React lazy 与代码分割

掌握 React.lazy 和动态 import() 实现按需加载，减少应用初始包体积。 · 难度：入门 · +15XP

为什么需要代码分割？

随着应用增长，打包文件会变得非常大，影响首次加载速度。代码分割允许你将代码拆分成小的块，然后按需加载。React.lazy 使得动态导入组件变得非常简单。

1. React.lazy 基本用法

React.lazy 接受一个函数，该函数返回一个 Promise，Promise 解析为一个默认导出的 React 组件。

const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

2. 基于路由的代码分割

最常见的实践是结合 React Router 进行路由级别的代码分割，这样每个页面只加载其所需的代码。

3. 命名导出与 React.lazy

React.lazy 只支持默认导出。如果你需要对命名导出的组件使用懒加载，可以创建一个中间模块重新导出。

练习提示

在下方代码中，点击按钮会动态加载并显示一个延迟组件。尝试将 import 路径改为本地其他组件，观察加载行为。