Vite 打包构建优化
抽离 node_modules 文件
output.manualChunks
可以将 node_modules 中的文件单独抽离出来,单独打包成一个文件,这样可以减少打包的体积,加快打包速度。
因为 node_modules 中的依赖并不是常常会变的,所以可以将其单独抽离出来,利用浏览器的缓存机制,当依赖没有发生变化时,就不会重新下载。
build: { rollupOptions: { output: { manualChunks: (id) => { if (id.includes('node_modules')) { return 'vendor' } } } }}
CDN 加载模块资源
项目中可能会出现一些第三方的模块,比如 lodash
、moment
等,这些模块可能会比较大,如果每次都打包到项目中,会导致打包的体积变大,加载的时间变长。
可以通过 vite.config.ts
中的 build.rollupOptions.external
配置,将这些模块通过 CDN 的方式加载,这样可以减少打包的体积,加快打包速度。
在 Vite 有一款插件可以自动将模块转换成 CDN 的方式加载,这款插件就是 vite-plugin-cdn-import
。
import viteCDNPlugin from 'vite-plugin-cdn-import'plugins: [ viteCDNPlugin({ modules: [ { name: 'xlsx', // 会替换打包时全局变量引入的变量名(全局变量名) var: 'XLSX', // 会将 script 脚本帮我们插入的head中 // 注意var的变量名要和脚本文件的导出的变量名一致(全局变量名) path: 'https://cdn.sheetjs.com/xlsx-0.19.3/package/dist/xlsx.full.min.js', }, ], }),]