How does Vite’s dependency pre-bundling work?

In a nutshell

When you run vite in development for the first time, Vite pre-bundles your project’s dependencies (node_modules/) before loading your site locally.

It does this for 2 reasons:

1. CommonJS and UMD compatibility: During development, Vite serves all code as native ESM. To do so, Vite must convert CommonJS and UMD code into ESM first.
2. Performance: Vite converts ESM dependencies with many internal modules into a single module to improve subsequent page load performance. This means that an ESM dependency with 10 internal module is resolved as a single module instead of 10 modules – saving on the number of separate HTTP requests that need to be made for each module.

Caching

Vite caches the pre-bundled dependencies in node_modules/.vite. It determines whether it needs to re-run the pre-bundling step if one of the below change:

• Package manager lockfile content, e.g. package-lock.json, yarn.lock, pnpm-lock.yaml or bun.lockb.
• Patches folder modification time.
• Relevant fields in your vite.config.js, if present.
• NODE_ENV value.

You can force Vite to re-bundle deps by either starting the dev server with the --force command line option, or manually delete the node_modules/.vite cache directory.

Sources & further reading

• Dependency Pre-Bundling​