React.lazy React.lazy 懒加载
最后更新：2026-10-28
React.lazy React.lazy 懒加载
React.lazy(() => import('./Page')) 把组件变成「用到才加载」的代码块，配合 Suspense 的 fallback 显示占位 UI。首屏只打包首页代码，其余路由按需下载，是 SPA 提速的第一板斧。
| 分组 | 路由与状态管理 |
|---|---|
| 类型 | API |
| 引入版本 | React 16.6 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
import { lazy, Suspense } from 'react'
const AdminPage = lazy(() => import('./AdminPage')) // 动态 import 拆包
<Suspense fallback={<p>加载中…</p>}>
<AdminPage /> {/* 渲染时才请求 chunk，完成后替换 fallback */}
</Suspense>⚙️ 参数
| factory | () => import('./X') 工厂函数：返回模块 Promise；模块需含 default 导出（React 18 起可用 then 手动指定命名导出）。 |
|---|
返回值：lazy(factory) 返回一个新组件：首次渲染时触发模块加载，未完成期间向上抛给最近的 Suspense 显示 fallback。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
点按钮后先显示 1.2 秒「下载中」占位，再切到加载完成的内容——对应 Suspense fallback → 懒组件的切换（模拟演示）。💡 要点
⚠️ 注意 lazy 的模块必须有 default 导出（或用 then 包一层指定），否则渲染时抛错；加载失败要配 ErrorBoundary 接住。
💡 提示 懒加载最常配路由：每个页面 Route 包一层 lazy + Suspense，首屏 JS 减半是常态。
ℹ️ 说明 本地开发里 chunk 秒加载看不出效果，用 vite build && vite preview 构建预览才能体会真实分包延迟。
🏷️ 路由与状态管理相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q lazy 和 Suspense 是什么关系？
A lazy 负责声明「这个组件要按需加载」，Suspense 负责接住「还没好」的状态显示 fallback。两者必须配对使用。
Q fallback 闪一下就没了很难看怎么办？
A 把 fallback 做成骨架屏减少观感跳动；也可给关键 chunk 加 modulepreload 提示浏览器提前下载。
Q 懒加载组件只有命名导出怎么办？
A 用 lazy(() => import('./X').then(m => ({ default: m.X }))) 手动包一层，把命名导出转成 default。
