依赖分包的好处
Vite 的依赖预构建(也称为依赖分包)是一种优化手段,主要用于提高开发环境下的页面加载速度。
在传统的打包工具中,每次文件改动都会触发整个应用的重新构建。随着应用规模的增大,构建时间会变得越来越长。而 Vite 则采用了一种不同的方式,它只会对改动的文件进行重新构建,大大提高了更新速度。
然而,即使是 Vite,如果一个模块有很多依赖,那么在开发环境下,浏览器还是需要发送很多请求来获取这些依赖。这就是依赖预构建的用武之地。
在第一次启动 Vite 或者安装新的依赖时,Vite 会自动检测你的项目中的所有依赖,并将它们预构建成优化过的 ES Module 格式。这样,浏览器只需要发送一个请求,就可以获取到所有的依赖,大大提高了页面加载速度。
此外,预构建的依赖还会被缓存起来,除非你安装或者更新了依赖,否则不会再次进行预构建。总的来说,Vite 的依赖预构建可以提高开发环境下的页面加载速度,提升开发体验。
分包流程
1.先安装terser
terser
是一个 JavaScript 解析器和压缩器,用于优化和压缩你的代码。Vite 在生产环境下默认使用 terser
进行代码压缩。
你可以通过以下命令来安装 terser
:
npm install terser --save-dev
或者
yarn add terser --dev
2.在vite.config.ts里面添加以下逻辑
build: {
minify: 'terser', // 必须开启:使用 terserOptions 才有效果
terserOptions: {
compress: {
drop_console: process.env.NODE_ENV === 'production' ? true : false,
drop_debugger: process.env.NODE_ENV === 'production' ? true : false,
},
},
rollupOptions: {
// 静态资源分类打包
output: {
// 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
globals: {},
chunkFileNames: 'static/js/[name]-[hash].js',
entryFileNames: 'static/js/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
manualChunks(id) {
// 静态资源分拆打包
if (id.includes('node_modules')) {
return id
.toString()
.split('node_modules/')[1]
.split('/')[0]
.toString()
}
},
},
},
},
这段代码是 Vite 的构建配置,主要包含了三个部分:minify,terserOptions 和 rollupOptions。
1. minify: 'terser'`:这个选项用于指定构建时使用的压缩器。在这里,使用的是 terser。
2. terserOptions:这个选项用于配置 terser的行为。在这里,如果环境变量 NODE_ENV`是 production,那么 terser会移除代码中的 console和 debugger。
3. rollupOptions:这个选项用于配置 Rollup 的行为。Rollup 是 Vite 在生产环境下用于打包的工具。
- output:这个选项用于配置输出文件的行为。
- globals:这个选项用于在 UMD 构建模式下为外部依赖提供全局变量。
- chunkFileNames、entryFileNames 和 assetFileNames:这些选项用于配置输出文件的命名规则。在这里,所有的文件都会被放在 static目录下,文件名包含原始名称和哈希值。
- manualChunks:这个函数用于控制代码分割的行为。在这里,所有来自 node_modules的模块都会被打包成单独的文件,文件名是模块的名称。
总的来说,这段代码的作用是在生产环境下,使用 terser 进行代码压缩,移除 console 和 debugger,并且将代码和静态资源打包到 static目录下,所有来自 node_modules的模块都会被打包成单独的文件。
未分包之前
分包之后
分包弊端
分包前构建时间
分包后构建时间
对于比较小型的项目来说,使用 Vite 进行依赖分包时,构建时间变长。可能有以下几个原因:
1. 首次构建时间增加:依赖分包会将项目的依赖项拆分成多个包,因此在首次构建时,需要下载和构建更多的依赖包,导致构建时间增加。这是因为首次构建需要下载和构建所有的依赖包,而不仅仅是项目本身的代码。
2. 构建过程复杂化:依赖分包会引入更多的构建过程,例如拆分依赖、生成依赖映射等。这些额外的构建过程会增加构建时间。
3. 依赖包体积增加:依赖分包会将项目的依赖项拆分成多个包,这可能导致每个包的体积增加。在构建过程中,需要处理更多的依赖包,因此构建时间会增加。
4. 构建工具配置不合理:如果依赖分包的配置不合理,例如拆分过多的依赖包或者拆分的粒度过细,都可能导致构建时间增加。需要根据项目的实际情况进行合理的配置。
为了减少构建时间,可以尝试以下优化措施:
1. 缓存依赖包:使用缓存工具(例如 Yarn 或 npm)来缓存依赖包,避免每次构建都重新下载和安装依赖。
2. 合理配置依赖分包:根据项目的实际情况,合理配置依赖分包的粒度和拆分方式,避免过多的拆分和不必要的构建过程。
3. 并行构建:使用构建工具的并行构建功能,同时处理多个依赖包,加快构建速度。
4. 优化构建工具配置:根据项目的实际情况,优化构建工具的配置,例如调整构建工具的线程数、内存限制等。
通过以上优化措施,应该能够减少依赖分包的构建时间。但需要注意的是,依赖分包可能会增加构建时间,因此在使用依赖分包时需要权衡其带来的优势和额外的构建成本。