vite分包策略

圈圈同学2023-10-26 17:29

项目问题

1. js包之间的依赖问题

分析network加载顺序可知，页面js依赖preview.js，previw.js执行时间过长，还需要等待main.js执行完之后再加载。考虑把previw.js跟main.js合并，将preview.js加载时间提前，能提升整体js加载时长。

2. 细小js文件合并问题

将同文件夹下的琐碎js文件，合并至同一个文件。

vite配置修改

你可以通过配置 build.rollupOptions.output.manualChunks 来自定义 chunk 分割策略（查看 Rollup 相应文档）。在 Vite 2.8 及更早版本中，默认的策略是将 chunk 分割为 index 和 vendor。这对一些 SPA 来说是好的策略，但是要对所有应用场景提供一种通用解决方案是非常困难的。从 Vite 2.9 起，manualChunks 默认情况下不再被更改。你可以通过在配置文件中添加 splitVendorChunkPlugin 来继续使用 "分割 Vendor Chunk" 策略：

javascript 复制代码

// vite.config.js
import { splitVendorChunkPlugin } from 'vite'
export default defineConfig({
  plugins: [splitVendorChunkPlugin()],
})

也可以用一个工厂函数 splitVendorChunk({ cache: SplitVendorChunkCache }) 来提供该策略，在需要与自定义逻辑组合的情况下，cache.reset() 需要在 buildStart 阶段被调用，以便构建的 watch 模式在这种情况下正常工作。

WARNING

你应该使用 build.rollupOptions.output.manualChunks 函数形式来使用此插件，如下面例子所示，另外还需要将默认的插件去掉，不然会走默认方式。另外如果使用对象形式，插件将不会生效。

python 复制代码

    build: {
      rollupOptions: {
        manualChunks(id) {
          if (id.includes('preview/main') || id.includes('views/preview')) {
            return 'mianPreview';
          }
          if (id.includes('packages/composables')) {
            return 'composables';
          }
        },
      },
    },

运行结果

1. js合并成功

previw.js与main.js合并成功，previw加载提前，页面加载更快