Vite Build Optimization in 2026
Cut your Vite production build time and bundle size with proven techniques.
Measure First
``bash
npx vite-bundle-visualizer
`
The treemap reveals the actual heavy hitters. Most bundles have one library that accounts for 30%+ of size.
Code Splitting Strategies
Manual chunks for vendor libraries:
`js
build: {
rollupOptions: {
output: {
manualChunks: {
react: ['react', 'react-dom'],
chart: ['chart.js']
}
}
}
}
`
Combined with route-level dynamic imports, this lets browsers cache vendor code across deploys.
Tree Shaking Pitfalls
- Avoid barrel files (index.js re-exporting everything) for libraries with side effects
- Mark your package as side-effect free in package.json: "sideEffects": false
- Import specific submodules: import x from 'lib/x' not import { x } from 'lib'
Compression
Vite-plugin-compression generates .gz and .br alongside assets. CDNs serve them transparently when the client supports it. Brotli typically beats gzip by 15-20%.
Image Optimization
Vite plugins like vite-imagetools generate AVIF/WebP at build time:
`html
`
Modern formats cut image weight by 50-70%.
Dependency Pre-bundling
Vite pre-bundles dependencies on first dev start. If you change deps frequently, set optimizeDeps.include for the heaviest ones to avoid surprise re-optimizations.
Build Cache in CI
Cache node_modules/.vite between CI runs. Cuts dev server startup and first build dramatically.
Lighthouse Budget
Add a lighthouserc.js` and fail CI on regression. Bundle size and Time to Interactive should both have budgets.
For JS-side optimizations see [es2026 features overview](/blog/es2026-features-overview).