【优化】Vite手动分包

news2024/9/28 9:35:26

前言

每次打包完成后，默认情况下会将第三方库和自己的代码统统打包到一个JS文件中

在这里插入图片描述

打包后的 JS 对应一个指纹，当修改了自己的业务代码并重新打包后，还会将第三方库重新打包，继而生成一个新指纹，浏览器发现指纹变了，并不会采用缓存，用户端需要重新下载整个 JS。通常第三方库较为稳定，所以需要将第三方库和业务代码拆分，确保用户无需额外下载。

实现

Vite中可以通过 import ('lodash') 自动分包，但有些场景下并不适用。下文采取另一种方式。

Vite在开发环境中使用的esbuild，生产环境中使用的rollup，所以分包就需要在Vite中配置rollup选项

vite.config.js

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          customName: ["lodash", "react"],
        },
      },
    },
  },
})

在这里插入图片描述

对业务代码进行一定改动后，再次打包发现，第三方库打包对应的 JS 文件指纹并未发生变化，此时浏览器就可以使用缓存。

在这里插入图片描述

manualChunks 可以配置多个选项，如

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          lodash: ["lodash"],
          react: ["react"],
          antd: ["antd"],
        },
      },
    },
  },
})

在这里插入图片描述

修改业务代码并重新打包，并不会修改第三方库 JS 的指纹

在这里插入图片描述

如果项目中使用了很多第三方库，对象形式就过于繁琐了，可以使用 manualChunks 函数形式配置，rollup 在打包时就会调用这个函数，参数为当前依赖模块的id。只需要筛选 node_modules 下的包并将它们合并为一个 chunk 即可。

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return "vendor"
          }
        },
      },
    },
  },
})