前端Wiki/词条/lazy 懒加载

lazy 懒加载

定义配合 Suspense 按需加载路由级或组件级代码，减小首屏包体积

React.lazy 接收一个返回 import() 动态导入的函数，把普通组件变成懒加载组件。首次渲染到它时才发起请求加载对应 chunk，在此之前由 Suspense 的 fallback 展示占位内容。最常见的用法是路由级拆分：每个页面组件 lazy 包裹，用户点进去才加载，首屏只载入公共与首页代码。

Suspense 之外别忘了加载失败的情况：网络抖动导致 chunk 请求失败会抛错。生产实践是给 lazy 组件再包一层重试逻辑（利用 import 重新执行），或配合错误边界兜底。与传统 webpack 魔法注释一样，动态导入天然会被打包器拆成独立 chunk。

lazy 发起动态导入，Suspense 的 fallback 负责加载中的占位
路由级懒加载是控制首屏体积最直接的手段
chunk 加载失败会抛错，需要重试封装或错误边界兜底

JavaScript

import { lazy, Suspense, useState } from 'react';

const Detail = lazy(() => import('./Detail'));   // 首屏不加载，点开才请求

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button onClick={() => setShow(true)}>打开详情</button>
      <Suspense fallback={<p>加载中...</p>}>
        {show && <Detail />}
      </Suspense>
    </div>
  );
}

⚠ 常见误区

用了 lazy 却不加 Suspense，加载期间没有 fallback 直接报错
Suspense fallback 放在最外层，加载任何组件都全屏转圈
不处理加载失败，弱网下路由打不开也没有任何提示

🔗 相关词条打包与部署常见报错速查