需求:在 Vue + Vite 项目中,当我们不做任何打包配置时,每次打包都会构建全部静态文件,这些文件有第三方库的代码,也有一些自己写的组件、页面等。但这是不合理的,有些时候我们只改了自己的组件,然后打包,这时候我们只需要更改我们自己源码的那部分文件就行了,这样可以让浏览器快速下载到变更文件,让页面快速更新。这就需要做分包了。
实现:那怎么分包呢。我们知道 Vite 背后是两个东西在起作用,一个 Esbuild 主要影响开发环境, 一个 rollup 主要影响打包结果,所以我们应该修改 rollup,rollup 里面有个配置 manualChunks,可以自定义将模块打包进同一个 js。如下我们配置 vite.config.js 文件,将所有 node_modules 下的模块打包进一个前缀是 vender 的 js 文件里。
export default defineConfig({
plugins: [],
build: {
rollupOptions: {
manualChunks(id) {
if (id.includes("node_modules")) {
return "vender";
}
},
},
},
});