动态导入（import()）可按需加载代码块，缩短FCP和LCP；替代静态导入避免首屏加载非关键模块；结合React.lazy与Suspense实现组件懒加载；适用于路由、弹窗等非首屏逻辑；需避免在关键路径滥用。
动态导入（import()）能将代码拆分成按需加载的块，避免首屏加载时下载和解析非关键模块，从而缩短首次内容绘制（FCP）和最大内容绘制（LCP）时间。
用 import() 替代静态 import
静态导入会在模块初始化时立即加载全部依赖，哪怕某些功能只在用户交互后才用到。动态导入把模块变成 Promise，延迟到真正需要时才请求、解析和执行。
- ❌ 静态导入（首屏即加载）：
import { heavyChart } from './charts.js'; // 无论是否渲染图表，都加载 - ✅ 动态导入（点击/滚动/条件满足时才加载）：
const { heavyChart } = await import('./charts.js');
结合 React 组件懒加载（Suspense + lazy）
在 React 中，React.lazy 底层就是基于 import()，配合 Suspense 可让组件异步加载且有加载态反馈，避免阻塞主模块解析。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 定义懒组件：
const DashboardChart = React.lazy(() => import('./DashboardChart')); - 在渲染处包裹 Suspense（防止白屏）：
<Suspense fallback=<Spinner />><DashboardChart /></Suspense> - 注意：不能用于服务端渲染（SSR）中的初始渲染，需配合
loadable-components或 React Server Components 做更细粒度控制
按路由或用户行为做代码分割
对非首页路由、弹窗、编辑器、图表库等“非首屏必需”逻辑，用动态导入切出独立 chunk，Webpack/Vite 会自动为其生成单独 JS 文件。
- 例如：只有用户点击“导出 PDF”按钮才加载 pdf-lib：
button.addEventListener('click', async () => {<br> const { generatePDF } = await import('pdf-lib');<br> generatePDF(data);<br>}); - 搭配 Webpack 的 magic comment 可命名 chunk，便于调试和缓存管理：
import(/* webpackChunkName: "pdf-generator" */ 'pdf-lib')
避免滥用，关注实际加载时机
动态导入不是万能加速器。如果在首屏关键路径中频繁触发多个 import()（比如同时加载 5 个大模块），反而会因并发请求数过多、解析竞争拖慢 LCP。
- 优先对体积大（>50 KB）、使用频次低、可延迟的功能做动态导入
- 利用 Chrome DevTools 的 “Coverage” 面板识别未执行 JS，再决定是否拆分
- 对必须首屏展示的内容（如 banner 图、标题、核心按钮），保持同步加载，确保 HTML 解析后尽快渲染
