React 中的懒加载
大型 React 应用会产生庞大的 JavaScript bundle。 庞大的 bundle 会减慢网站速度。 用户需要更长的时间才能与您的应用进行交互。 这会损害您的用户体验。
懒加载（Lazy loading）解决了这个问题。 它仅在用户需要时才加载组件。 您不再需要一次性加载所有内容。
懒加载的优势：
- 更小的初始 bundle 体积
- 更快的页面加载速度
- 更好的用户体验
- 更低的带宽消耗
- 更好的核心 Web 指标 (Core Web Vitals)
如何使用 React.lazy()
React 提供了一个名为 lazy() 的函数来动态导入组件。
React 仅在渲染组件时才会下载代码。
示例代码：
import { lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
您必须配合 lazy 组件使用 Suspense。
Suspense 会在组件加载时显示一个回退 UI (fallback UI)。
示例代码：
import { Suspense, lazy } from "react";
const ProductDetail = lazy(() => import("./pages/ProductDetail"));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductDetail />
</Suspense>
);
}
成功的两个准则：
- 您的组件必须使用默认导出 (default exports)。
- 在组件函数外部声明您的 lazy 导入。
您在项目中使用懒加载吗？ 请在下方留言。我会回复您。