需求：在 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"; } }, }, }, });
