react.lazy 必须包裹动态 import() 表达式以生成可渲染组件，且必须由 suspense 包裹并提供 fallback；组件文件需 export default，否则报错；错误处理需结合 error boundary，预加载可用 webpack 魔法注释。
核心是用 React.lazy 包裹动态 import() 表达式，再用 Suspense 统一处理加载状态。
必须用 React.lazy 封装 import()
不能直接把 import('./Component') 赋值给组件变量，因为它是 Promise，不是可渲染的 React 组件。React.lazy 的作用就是把异步导入包装成 React 能识别的懒加载组件：
const LazyComp = lazy(() => import('./MyPage'))- 函数体里必须返回一个 Promise，且该 Promise resolve 后要导出
default组件 - 组件文件需确保有
export default，否则会报 “module has no default export”
必须用 Suspense 包裹使用位置
React.lazy 创建的组件不能单独使用，它会在加载时抛出 Promise，必须由 Suspense 捕获并展示 fallback：
<suspense fallback="<div">加载中...><lazycomp></lazycomp></suspense>- fallback 可以是任意 JSX，支持骨架屏、旋转图标等自定义 UI
- Suspense 可嵌套，但每个懒加载组件都需被其包裹（或共用一个父级 Suspense）
动态映射组件时避免常见错误
如果通过 key 查找组件（比如路由配置），不要在对象字面量里直接写 import()：
- ❌ 错误：
const map = { a: import('./A') }—— 这会立即执行 import，且结果是 Promise - ✅ 正确：用工厂函数封装，再传给 lazy：
const map = { a: () => import('./A') }，然后lazy(map.a) - 更稳妥的做法是把 lazy 调用放在组件内部或路由切换逻辑中，而非模块顶层
补充容错与进阶控制
网络失败或模块解析异常会导致白屏，需主动兜底：
- 配合 Error Boundary 捕获懒加载失败，显示降级 UI（如“加载失败，请重试”）
- Webpack 支持魔法注释，例如
import(/* webpackPrefetch: true */ './Modal')可预取资源 - Next.js 等框架推荐用
next/dynamic替代原生 lazy，对 SSR/SSG 更友好
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
