标准答案
- 开发阶段关注冷启动、按需转换和热更新速度,Vite 会利用浏览器原生 ESM。
- 生产阶段关注产物体积、兼容性、缓存、代码分割和资源优化,仍然需要完整打包。
- Rollup 在 ESM 分析、Tree Shaking 和库构建方面比较成熟。
- Vite 的插件体系也和 Rollup 有较强关系,很多生产构建能力可以复用 Rollup 插件生态。
- 因此 Vite 不是“不打包”,而是开发和生产采用不同的执行策略。
题目解析
Vite 的快主要发生在开发体验上。开发时浏览器可以按需请求模块,服务端只转换被请求的源码,不必一开始就把整个应用打成 bundle。
生产环境不能照搬这个模型。真实用户访问页面时,需要更少请求、更好缓存、更小体积和稳定兼容性,所以仍然要把模块图整理成适合线上分发的产物。
Rollup 的优势在于对 ESM 的静态分析和产物控制。对于 Vite 来说,用 Rollup 做生产构建,是在开发速度和线上产物质量之间做分工。
代码示例
Vite 的配置里可以直接通过 build.rollupOptions 调整生产构建行为。
JavaScript
export default {
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'vue-router']
}
}
}
}
}常见误区
- 认为 Vite 开发阶段不预打包源码,所以生产阶段也不需要打包。
- 把 Vite 的速度全部归因于 esbuild,忽略开发服务器模型和生产 Rollup 分工。
- 迁移到 Vite 后不再检查生产产物体积、chunk 结构和兼容性。