名词解释
bundle
指的是整体的打包产物,包括JS和各种静态资源chunk
指打包后的JS产物,是bundle的子集vendor
指第三包的打包产物,是一种特殊的chunk
代码打包解决的问题
在传统的单chunk打包模式下,会出现随着项目越来越大,最后会下载一个很大的文件
- 无法按需加载,当前页面不需要的代码也会加载
- 缓存复用率比较低,改动一行代码,会导致整个bundle产物缓存失效
Vite默认拆包策略
默认打包后的产物
Vite 默认拆包的优势在于实现了 CSS 代码分割与业务代码、第三方库代码、动态 import 模块代码三者的分离,但缺点也比较直观,第三方库的打包产物容易变得比较臃肿,显然是有进一步拆包的优化空间的,这个时候我们就需要用到 Rollup 中的拆包 API ——manualChunks
了。
自定义拆包策略
针对更细粒度的拆包,Vite 的底层打包引擎 Rollup 提供了manualChunks
,让我们能自定义拆包策略,它属于 Vite 配置的一部分
// vite.config.js
export default {
build: {
rollupOptions: {
output: {
// manualChunks 配置
manualChunks: {},
},
}
},
}