2.7 KiB
2.7 KiB
name, description
| name | description |
|---|---|
| features-dep-bundling | Dependency pre-bundling configuration and caching |
Dependency Pre-Bundling
Vite pre-bundles dependencies on first run for faster dev server startup.
Why Pre-Bundling
- CommonJS/UMD to ESM - Convert non-ESM dependencies
- Performance - Bundle many internal modules into single file (e.g., lodash-es has 600+ modules)
// Works thanks to smart import analysis
import React, { useState } from 'react'
Automatic Discovery
Vite crawls source code to find bare imports and pre-bundles them with Rolldown.
New dependencies discovered after server start trigger re-bundling.
Including Dependencies
Force pre-bundling for dependencies not auto-discovered:
export default defineConfig({
optimizeDeps: {
include: [
'some-package',
'another-package/nested' // Deep imports
]
}
})
When to include:
- Dynamically imported (via plugin transform)
- Large dependencies with many internal modules
- CommonJS dependencies
Excluding Dependencies
Skip pre-bundling for small ESM-only dependencies:
export default defineConfig({
optimizeDeps: {
exclude: ['small-esm-dep']
}
})
Monorepo Linked Dependencies
Linked packages are treated as source code by default. If not ESM:
export default defineConfig({
optimizeDeps: {
include: ['linked-dep']
}
})
Restart with --force after making changes to linked deps.
Custom Rolldown Options
export default defineConfig({
optimizeDeps: {
rolldownOptions: {
plugins: [/* Rolldown plugins */],
// Other Rolldown options
}
}
})
Caching
File System Cache
Located in node_modules/.vite. Re-runs when:
- Package lockfile changes (
package-lock.json,pnpm-lock.yaml, etc.) - Patches folder modified
vite.config.jschangesNODE_ENVchanges
Force re-bundle:
vite --force
# Or delete node_modules/.vite
Browser Cache
Pre-bundled deps are cached with max-age=31536000,immutable.
To debug dependencies with local edits:
- Disable cache in browser DevTools Network tab
- Restart Vite with
--force - Reload page
Entries
Specify custom entry points for discovery:
export default defineConfig({
optimizeDeps: {
entries: [
'src/main.ts',
'src/other-entry.ts'
]
}
})
By default, all HTML files are used as entries.
esbuildOptions (Deprecated)
Use rolldownOptions instead:
export default defineConfig({
optimizeDeps: {
// Deprecated
esbuildOptions: {},
// Use instead
rolldownOptions: {}
}
})