分包策略-性能优化

原因

由于浏览器的缓存策略，在请求静态资源时只要静态资源的名称不变就不会重新请求。所以使用 vite 打包后的文件带有哈希值，只要有一点代码的变动文件的哈希值就会变换，以此来保证每次请求获取的都是最新代码。

但是有很多包是不需要经常更新的（第三方资源包，例如 lodash 等），每次重新请求对浏览器来说就是浪费资源，我们可以将这部分的包单独进行打包处理。

output.manualChunks

利用 rollup 本身的配置来实现。当该选项值为函数形式时，每个被解析的模块都会经过该函数处理。如果函数返回字符串，那么该模块及其所有依赖将被添加到以返回字符串命名的自定义 chunk 中。

export default defineConfig({
  // ...
  build: {
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          console.log("id----", id); // id 对象所有需要打包的文件路径
          // 路径包含 node_modules 的包，一般为第三方包，不会变动的
          if (id.includes("node_modules")) {
            return "vendor"; // 会分出一个前缀为 vender的包
          }
        },
      },
    },
  },
});