代码拆分与延迟加载
使用动态导入和基于路由的拆分，将大型 JavaScript 资源包拆分为按需加载的代码块，让用户只下载实际需要的代码。
代码拆分与延迟加载 是 CoddyKit 上的免费 Web Performance Optimization & Lighthouse 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Performance Optimization & Lighthouse 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。
单体捆绑包问题
将所有 JavaScript 放在一个捆绑包中，会迫使用户下载他们可能永远不会访问的页面代码。代码拆分会将捆绑包拆成更小的块，仅在需要时加载。
动态 import()
动态 import() 表达式会返回一个 promise，并告诉捆绑工具创建单独的代码块。模块会在运行时按需加载。
button.addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});基于路由的拆分
最有效的拆分方式是按路由拆分：每个页面都成为自己的代码块，因此初始加载只包含落地路由。
const Dashboard = React.lazy(() => import('./pages/Dashboard'));Suspense 回退内容
在延迟加载的代码块加载期间，请显示回退内容，以保持界面响应。在 React 中使用 Suspense；其他框架也有相应功能。
<Suspense fallback={<Spinner />}>
<Dashboard />
</Suspense>组件级拆分
富文本编辑器、地图或图表等大型组件也可以拆分，仅在用户打开相应功能时加载，而不是在首次绘制时加载。
供应商拆分
将第三方库分离到供应商代码块中，可以让它独立缓存。应用代码经常变化，而供应商代码很少变化，因此用户需要重新下载的内容会减少。
预获取代码块
延迟加载可能会在用户导航时增加延迟。请在空闲时间预获取代码块，例如在链接悬停时获取，使其在点击前就准备好。
link.addEventListener('mouseenter', () => import('./pages/Settings'));避免过度拆分
过多的微型代码块会产生请求开销和瀑布流。请以有意义的边界为目标（路由、大型功能），而不要拆分每个小函数。
与摇树优化协同
代码拆分可以与摇树优化结合：使用 ES 模块导入，并且只导入所需内容，使无效代码不会进入任何代码块。
import { debounce } from 'lodash-es'; // only debounce is bundled衡量结果
使用捆绑包分析器检查代码块大小，并使用 DevTools 中的 Coverage 标签页查找初始加载时发送的未使用代码。Lighthouse 会标记体积较大的未使用 JS。
策略总结
- 首先按路由拆分。
- 延迟加载大型组件。
- 分离供应商代码块以便缓存。
- 在空闲时间预获取可能访问的下一个代码块。
快速检查
哪项 JavaScript 功能会告诉捆绑工具创建一个按需加载的单独代码块？
回顾
您已经学会通过代码拆分来缩小初始载荷：使用动态 import()、按路由和组件进行延迟加载、拆分供应商代码块、在空闲时间预获取，以及进行摇树优化。请在有意义的边界处拆分，并使用捆绑包分析器进行衡量。
用 AI 导师学习 Web Performance Optimization & Lighthouse — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 12
- 课程
- 48
常见问题解答
「代码拆分与延迟加载」课时是免费的吗？
是的 — 「代码拆分与延迟加载」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Performance Optimization & Lighthouse 课程的其余内容，请升级到 CoddyKit PRO。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。
「代码拆分与延迟加载」这节课中我会学到什么？
使用动态导入和基于路由的拆分，将大型 JavaScript 资源包拆分为按需加载的代码块，让用户只下载实际需要的代码。 你通过在浏览器中直接运行的动手代码来练习 Web Performance Optimization & Lighthouse，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Performance Optimization & Lighthouse 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Performance Optimization & Lighthouse 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「代码拆分与延迟加载」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Performance Optimization & Lighthouse 课中编写并运行代码吗？
能。每节 Web Performance Optimization & Lighthouse 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。