Turbopack如何对JavaScript进行分块
内容提要
Turbopack通过智能分块优化JavaScript加载，平衡请求数量与代码体积。它引入“块组”概念，仅在组内合并块，并依据用户导航模式计算合并收益。Next.js 16.3新增功能：运行时动态选择合并或未合并块、基于分析调整合并策略，以及通过树摇CJS模块和共享运行时减少代码量，提升缓存命中与加载性能。
延伸解读
分块的核心权衡
文章指出，分块的核心矛盾在于请求数量与代码体积之间的权衡。合并块可以减少请求，但可能导致重复下载；拆分块则增加请求，但能提高缓存命中率。Turbopack通过引入“块组”概念，仅在组内合并，以避免过度发送代码。理解这一权衡有助于开发者评估不同分块策略对性能的影响。
合并的收益取决于用户行为
Turbopack的合并算法基于用户导航模式计算收益。文章通过示例说明，合并两个块是否有利取决于后续页面是否同时需要这两个块。例如，从首页导航到法律页时，合并可能导致重复下载。因此，算法假设单页访问占三分之二，并允许通过配置调整权重，以适配不同站点的实际用户行为。
运行时动态选择块
Next.js 16.3新增的generateComponentChunks功能，使运行时能根据浏览器已缓存的内容，动态选择加载合并块还是未合并的缺失部分。这解决了构建时无法预知缓存状态的问题，减少了软导航时的多余代码下载。文章还提到实验性的only-if-cached指令，旨在将类似优化扩展到回访用户。
减少代码量的新手段
除了分块策略，文章还介绍了减少总代码量的方法：对CJS模块进行树摇，消除未使用的导入导出；共享运行时块替代每页独立运行时，节省约10KB代码；默认运行时不再包含WebAssembly和Web Worker代码，仅在需要时加载。这些功能均需在Next.js 16.3中手动启用，未来将默认开启。
Q&A
Turbopack 在 JavaScript 分块时面临的主要挑战是什么？
Turbopack 需要在减少网络请求数量和减小代码下载体积之间取得平衡。如果合并成更大的块，请求数减少，但可能过度加载代码；如果分成更小的块，代码更精简，但请求数增多，且缓存效率降低。
什么是 chunk group？它如何帮助解决过度加载问题？
Chunk group 是一组一起加载的块，例如每个路由对应一个 chunk group。Turbopack 只在同一个 chunk group 内合并块，因为组内的块总是同时加载，合并不会增加页面额外下载的内容，从而避免过度加载。
Turbopack 如何决定是否合并两个块？
Turbopack 会分析两个块在不同页面中的使用情况，计算合并后对请求数和下载量的影响，并根据用户导航模式（如单页访问和两页访问的概率）进行加权，最终决定合并是否有利。
Next.js 16.3 中的 generateComponentChunks 功能有什么作用？
启用 experimental.turbopackChunking.generateComponentChunks 后，Turbopack 会同时生成合并和未合并的块版本。运行时根据浏览器已缓存的内容，动态选择加载合并块或仅加载缺失的未合并块，从而减少不必要的代码下载，提升缓存命中率。
Next.js 16.3 提供了哪些基于分析的 chunking 配置选项？
可以在 next.config.js 中配置 experimental.turbopackChunking 下的选项：firstPageLoadPriority 调整单页与多页访问的权重，priorityRoutes 指定优先加载的路由，clusters 定义常一起访问的路由组，以优化合并策略。
Next.js 16.3 中如何减少发送到客户端的代码量？
通过启用 experimental.turbopackCjsTreeShaking 对 CJS 模块进行树摇，移除未使用的导入导出；启用 experimental.turbopackSharedRuntime 共享运行时，减少每个页面的运行时开销；默认运行时不再包含 WebAssembly 和 Web Worker 代码，仅在需要时加载。
Turbopack 的默认分块策略与不合并、最大合并相比有何优势？
在 nextjs.org 的测试中，默认策略相比不合并，请求数从 96 次降至 38 次，下载量从 561.6 KiB 降至 554.8 KiB；相比最大合并，请求数略多（38 vs 15），但下载量更少（554.8 vs 610.0 KiB），在请求数和代码量之间取得了更好的平衡。
