关于 bundle-splitting
这是一项介绍如何用 Webpack 或 Rollup 将应用代码拆分为多个包的开发技能。它帮助 Web 开发者分离当前页面或交互暂不需要的代码，以减少初始加载和执行工作。
主要功能
- 01将代码拆分为较小的包
- 02分离初始渲染所需代码
- 03减少加载与执行工作
- 04考虑 FCP、LCP 和 TTI
适用场景
- 01优化大型 JavaScript 包
- 02延后加载特定路由才用的代码
- 03减少慢速网络下的初始传输量
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/bundle-splitting确认已加载。
详细介绍
拆分打包
构建现代 Web 应用时，Webpack 或 Rollup 等打包工具会获取应用的源代码，并将其打包成一个或多个包。用户访问网站时，系统会请求并加载这些包，以便在用户屏幕上显示数据。
V8 等 JavaScript 引擎能够在用户请求的数据加载过程中对其进行解析和编译。尽管现代浏览器已不断优化，能够尽可能快速、高效地解析和编译代码，但开发者仍需优化这一过程中的两个环节：请求数据的加载时间和执行时间。我们希望尽可能缩短执行时间，以避免阻塞主线程。
适用场景
- 当应用的 JavaScript 包较大并影响加载时间时，可以使用此方法
- 如果想缩短首次内容绘制（FCP）和最大内容绘制（LCP）时间，此方法会很有帮助
- 当部分代码仅用于特定的用户交互或路由时，可以使用此方法
操作说明
- 使用 Webpack 或 Rollup 等打包工具将代码拆分为多个较小的包
- 将初始渲染不需要的代码拆分到单独的包中
- 考虑对可交互时间（TTI）的影响，并优先处理关键渲染代码
详情
尽管现代浏览器能够在 bundle 到达时逐步加载，但用户设备上首次绘制像素仍可能需要相当长的时间。bundle 越大，执行引擎到达首次渲染调用所在行所需的时间就越长。在此之前，用户只能盯着空白屏幕。
我们希望尽可能快地向用户显示数据。bundle 越大，加载、处理和执行所需的时间就越长。如果能缩小 bundle 的体积，就能加快这些过程。
与其请求一个包含不必要代码的庞大 bundle，不如将其拆分成多个较小的 bundle！
通过拆分应用的 bundle，我们可以缩短加载、处理和执行 bundle 所需的时间！缩短加载和执行时间后，我们可以减少屏幕上绘制首屏内容所需的时间，即首次内容绘制（FCP），以及屏幕上渲染最大组件所需的时间，即最大内容绘制（LCP）。
虽然能在屏幕上看到数据很棒，但我们不只是想_看到_内容。为了让应用功能完整，我们还希望用户能够与应用_交互_！只有在 bundle 加载并执行后，UI 才能进行交互。从屏幕上绘制所有内容并使其可交互所需的时间，称为可交互时间（TTI）。
bundle 较大并不一定意味着执行时间更长。我们可能加载了大量用户根本不会用到的代码！bundle 的某些部分也许只会在特定用户交互时执行，而用户可能会进行这种交互，也可能不会！
在用户能够看到屏幕上的任何内容之前，执行引擎仍然必须加载、解析并编译首次渲染时甚至不会用到的代码。由于浏览器高效地处理这两个步骤，解析和编译的成本实际上可以忽略不计，但获取超出所需的大型 bundle 会损害应用的性能。使用低端设备或较慢网络的用户，在 bundle 获取完成前会经历明显更长的加载时间。
与其在初始阶段请求当前导航中优先级不高的代码，不如将这部分代码与渲染初始页面所需的代码分开。
将大型 bundle 拆分成两个较小的 bundle：main.bundle.js 和 emoji-picker.bundle.js，可以减少初始加载的数据量，从而缩短初始加载时间。