Rspack 代码分割原理及构建最佳实践-冯宇.pdf

1、扫/码/关/注 重庆 两江软件园 海王星数字创园(5楼)重庆，字节跳动 Web Infra-Rspack 团队前端开发程师 冯宇 本次分享将介绍代码分割背后是如何作的，并回答些对分割后产物相关的疑惑，同时也会讲解 Rspack 和其他诸如 webpack 等打包具相，独有的些优化案。Rspack 代码分割原理及构建最佳实践Rspack聊下 Code SplittingRspackRspack（读为/respk/,）是个基于 Rust 编写的性能 JavaScript 打包具，它提供对 webpack 态良好的兼容性，能够缝替换 webpack，并提供闪电般的构建速度。Vite 是很好的构建具，

2、但在巨项中我们还是遇到了些在 Vite 以及 Vite 底层使的 Rollup/esbuild 中不好解决的问题1.因 No Bundle 导致的量络请求2.开发环境和产环境某些情况下表现不致Rollup 代码分割灵活度差，法最化利到浏览器并发络请求能为什么不 Vite为什么需要打包具1.模块化开发会造成量的件，浏览器加载件太多2.如果所有件打包成整个件，法利并发加载，也法按需加载最体积对打包具的需求1.将模块件打包在起，并且可以调整件最体积的阈值2.有能按需加载其他件的能代码分割ChunkModule可以简单的理解为户的源码件(.js.ts.css 等)，资源件(.svg.png 等)代码分

3、割策略是描述如何去链接 Module，如何成 Chunk 的过程堆 Module 链接到起就组成了 Chunk，个 Chunk 对应个产物件根据前的需求，可以和 ESM 语法天配合起来，由静态 Import 语法链接的模块会被放到同个件中，由动态 import 语法链接的模块会作为新的，开始链接新的模块，组成另个件什么时候需要成个 Chunk？1.源码中的 import()语句，或其他特殊语句，例如 new Worker()2.配置定义规则，例如 Rollup 中的 manualChunks，Rspack/webpack 中的 SplitChunksRollupWebpack举个例有如图模块关

4、系实线箭头代表 esm import 语法 import lib虚线箭头代表 esm 动态引 import()语法成 3 个 Chunk最终产物有 3 个 js 件esbuild 和 Rollup 产物都不包含额外运时(不算上 commonjs 的兼容代码)，产物体上如下图体上是将静态引的 module 按照拓扑顺序进排序后 进拼接优点是产物很净，没有其他额外运开销，但也带来了限制Rollup 产物同个 Module 不能出现在多个 Chunk 中假设某个 module 常常，但它同时被多个所引，由于同个 module 如果出现在多个 chunk 会导致重复执。Rollup 不得不为该 mod

5、ule 单独分配个 Chunk，浏览器不得不为了个很的 module 新发送个络请求Rollup 产物缺点通常产环境会使 manualChunks 将 Chunk 拆分成更的 Chunk，但由于 Chunk 加载的时候就会执 Chunk 内的所有 module，因此 module 的执顺序和源码中的引顺序是不致的。Vite 在开发阶段，module 的执顺序和源码的 import 顺序致，但产环境被 manualChunks 处理后很有可能不致最终 Module 的执顺序和源码逻辑顺序可能不致上述规则会导致 foo 和 bar 的执顺序脱离原本模块图中的执顺序Rollup 产物缺点Rollup

6、 产物缺点源码执顺序foo console bar产物执顺序foo bar consoleRollup 产物缺点总结下，产物中不包含额外运时，导致 Chunk 加载和 Module 执是起的，因此很难将 Module 安全地从 Chunk 中抽离出去1.Module 只能在产物中存在份2.经过 manualChunks 拆包后，难以保证正确执顺序Rspack 产物如果我们将 Module 的执和 Chunk 加载逻辑解藕，让运 Chunk 只负责模块的注册，就可以解决前提到的问题 不妨想象下 CommonJS 运时