React 如何实现组件懒加载？

Question

React 如何实现组件懒加载？

仓乃文 · Accepted Answer

组件懒加载使用 React.lazy 和 Suspense，可以减少首屏加载时间，按需加载非关键组件。基础用法： ```javascript import { lazy, Suspense } from "react"; const LazyComponent = lazy(() => import("./HeavyComponent")); function App() { return ( 加载中...}> ); } ``` 路由懒加载（配合 react-router）： ```javascript const Home = lazy(() => import("./pages/Home")); const About = lazy(() => import("./pages/About")); const Dashboard = lazy(() => import("./pages/Dashboard")); function App() { return ( }> } /> } /> } /> ); } ``` 补充说明： - React.lazy 只支持默认导出（default export） - Suspense 的 fallback 可以是任何 React 元素 - 路由懒加载是常见优化手段，减少首屏 bundle 大小 - 懒加载组件在首次渲染时才发起加载请求