首屏必需模块依赖：用静态 ES2015 import…

当某模块在页面加载或初始渲染时就必须存在，且希望依赖关系可被静态分析和 tree shaking 时，使用 ES2015 静态 import。

适用场景

解决思路

1. 对首屏渲染必需的模块，使用默认 ES2015 静态导入语法：`import module from 'module'`。
2. 明确所有被静态导入的模块默认都会被加入初始 bundle；例如 Webpack 会把它们打包进 `main.bundle.js` 这类初始 chunk。
3. 记住静态导入的模块会在引擎执行到对应 `import` 语句所在行时立即执行；因此只把加载时就需要执行的依赖设为静态导入。
4. 检查构建产物的初始 bundle 大小，例如查看 `main.bundle.js` 的 `Size`、`Chunks`、`Chunk Names` 输出，评估大 bundle 对加载时间的影响。
5. 认识到在 `App` 组件渲染内容之前，必须先加载并解析所有静态导入的模块；如果某模块会阻塞首屏，优先不要静态导入它。
6. 不要一次导入所有模块；对只在用户交互后才需要的模块（如示例中的 `EmojiPicker`）或位于页面更下方的模块，改用动态 `import()`。
7. 等 `App` 组件渲染完成且用户能够交互后，再动态导入上述非关键模块，以避免它们进入初始 bundle。
8. 当初始 bundle 因静态导入过大时，把非首屏必需模块切换为动态导入，以缩短加载和解析时间。

适用边界 · 注意事项

• 模块并非页面加载时立即需要、也不是首屏渲染关键依赖时，不要用静态导入。
• 模块只应在用户交互后才渲染或加载时（如 `EmojiPicker`），不要用静态导入。
• 静态导入已导致初始 bundle 过大并显著拖慢加载或解析时，不要继续对非关键模块使用静态导入。