前端 JS 经典：Vite 打包优化

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