当非首屏模块增大初始 bundle 时，用动态…

在 React/JS 应用中，将只在用户交互或特定条件下才需要的模块（如弹窗、选择器、重型库）改为动态导入，以减小初始 bundle 并加快首屏加载。

适用场景

解决思路

1. 对初始页面加载不需要、仅在用户交互或条件满足时才需要的模块，改为动态 import()，不要静态导入。
2. 在 React 组件中，使用 React.lazy 配合 Suspense 进行动态组件导入。
3. 为动态导入的模块提供有意义的 fallback UI，在模块加载期间展示，避免用户误以为应用卡死。
4. 在 SSR 应用中且 React Suspense 尚不支持时，考虑使用 loadable-components 替代 React Suspense。
5. 只动态导入对初始渲染不关键的模块，不要把首屏必需模块也懒加载。
6. 将类似 EmojiPicker 的非首屏组件拆分为独立 bundle，减少初始 bundle 大小。
7. 使用 React.Suspense 配合动态加载组件，让 App 组件通过暂停 EmojiPicker 模块的导入更快渲染。
8. 当模块加载时渲染 fallback 组件，让用户知道应用没有冻结，只需等待模块处理和执行完成。
9. 使用 loadable-components 时，把懒导入的模块传给 loadable，使其只在请求 EmojiPicker 模块时才导入。
10. 在 CSR 应用中也可以使用 loadable-components 来暂停模块导入。
11. 确保动态导入后应用在用户等待组件加载时已经渲染并可交互。

适用边界 · 注意事项

• 初始渲染就必需或首屏可见的模块不适合动态导入，否则会导致额外等待或渲染问题。
• SSR 场景中 React Suspense 尚不支持时，不适用 React Suspense，应改用 loadable-components。
• 不要在没有有意义的 fallback 时动态导入，否则用户可能误以为应用冻结。