Vite学习笔记之拆包

1,728 阅读1分钟

名词解释

  • bundle 指的是整体的打包产物,包括JS和各种静态资源
  • chunk 指打包后的JS产物,是bundle的子集
  • vendor 指第三包的打包产物,是一种特殊的chunk

代码打包解决的问题

在传统的单chunk打包模式下,会出现随着项目越来越大,最后会下载一个很大的文件

  • 无法按需加载,当前页面不需要的代码也会加载
  • 缓存复用率比较低,改动一行代码,会导致整个bundle产物缓存失效

Vite默认拆包策略

默认打包后的产物

image.png

Vite 默认拆包的优势在于实现了 CSS 代码分割与业务代码、第三方库代码、动态 import 模块代码三者的分离,但缺点也比较直观,第三方库的打包产物容易变得比较臃肿,显然是有进一步拆包的优化空间的,这个时候我们就需要用到 Rollup 中的拆包 API ——manualChunks 了。

自定义拆包策略

针对更细粒度的拆包,Vite 的底层打包引擎 Rollup 提供了manualChunks,让我们能自定义拆包策略,它属于 Vite 配置的一部分

// vite.config.js
export default { 
    build: { 
        rollupOptions: { 
            output: { 
                // manualChunks 配置 
                manualChunks: {}, 
            }, 
        } 
    }, 
}

vite-plugin-chunk-split

文档