React.lazy

在大型 React 项目中。你会发现因为组件数量增长，初始打包体积膨胀导致首屏渲染缓慢，甚至影响 SEO 和使用者留存。怎么说呢，React.lazy 正是为了解决这一痛点而设计。它让你可以按需动态导入组件，实现代码分割。

为什么要使用 React.lazy？

• 减少初始包体积只加载当前路由或交互所需的代码。
• 提高首屏加载速度更少 JavaScript 代表着更快解析和执行。
• 调整带宽与缓存使用者可能只使用部分功能，懒加载未用代码节省流量。
• 与 Suspense 天然集成优雅显示 Loading 状态。

渲染流程

1. 初始化: 调用 `React.lazy => import)` 创建懒对象，内部包含 `_status: Uninitialized` 与 `_result: ctor`。
2. 首次渲染时触发 Promise: `lazyInitializer` 执行 `_result` 得到 Promise，将状态改为 `Pending` 并抛出 Promise。不过，
3. Suspense 捕获并挂起: 捕获 Promise 后渲染 `` 提供占位 UI。 并为 Promise 添加 ping 监听器。
4. PROMISE RESOLVE / REJECTED: 加载完成后更新状态为 `Resolved/Rejected` 并触发 `pingSuspendedRoot` 调度渲染。
5. 第二次渲染完成展示真实组件: 状态已 `Resolved` 时返回模块默认导出，替换 fallback。

注意事项 & 常见陷阱

1. Avoid calling lazy inside render.- 在每次渲染中动态创建 lazy 会导致不同引用，从而每次都重新请求。请在模块顶层声明，说起来，
2. Error handling.- 网络失败时建议配合 Error Boundary 捕获错误。否则页面会被挂起，{''}
3. Naming exports.- 默认导出是 lazy 的约定，如需命名导出需手动包装：`const InfoCard = lazy => import.n));`
4. No suspense boundary?- 若懒组件外部没有 `` 包裹。 则 Promise 挂起无法被捕获，页面会卡住。

再看示例，懒加载 Card 组件并显示 Loading 动画