动态导入（import()）是es2020引入的运行时按需加载语法，返回promise，适用于路由分割、功能模块懒加载、环境驱动模块选择及插件系统；禁止在关键同步路径无条件调用或替代静态导入；路径须为字符串字面量，推荐相对路径与webpackchunkname注释；必须捕获错误并提供降级策略；需通过eslint、构建分析、单元测试和文档规范协同保障。
动态导入（import()）是 ES2020 引入的语法，用于在运行时按需加载模块。它返回 Promise，支持条件加载、路由懒加载、插件化扩展等场景。但若不加约束，容易导致代码可维护性下降、调试困难、打包异常或性能反模式。制定清晰的动态导入代码规范，核心是统一 何时用、怎么写、怎么管。
明确适用场景：只在必要时才用 import()
避免滥用动态导入替代静态导入。以下情况推荐使用：
-
路由级代码分割：SPA 中按页面/视图拆分，如 React Router 的
lazy(() => import('./Page')) - 功能模块按需加载：用户触发后才加载的重型能力（如富文本编辑器、图表库、PDF 渲染器）
-
环境或配置驱动的模块选择：例如根据
process.env.FEATURE_FLAG加载不同实现 - 插件系统或主题切换：从远程或本地目录动态加载插件模块
禁止场景：
— 在同步逻辑关键路径中无条件调用（如组件初始化阶段未加 loading 或 fallback）
— 替代已知稳定依赖的静态导入（如 import { utils } from './utils' 不应写成 import('./utils').then(...)）
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
命名与路径规范：确保可读性与构建工具兼容
动态导入的字符串参数不是普通字符串，而是 Webpack/Vite/Rollup 等工具识别“魔法注释”和代码分割点的关键依据：
-
路径必须为字符串字面量或模板字符串中的静态部分，禁止拼接变量（如
import(`./${name}.js`)会导致无法预分析，降级为全量 chunk） -
优先使用相对路径，且保持结构清晰，例如：
import('./features/chart/LineChart.js')而非import('../components/LineChart.js') -
配合 webpackChunkName 注释（Vite 支持类似 magic comment），提升 chunk 可读性：
import(/* webpackChunkName: "chart-line" */ './features/chart/LineChart.js') - 若需多语言/主题等变量路径，改用 预定义映射表 + 静态 key 查找，而非运行时拼接
错误处理与用户体验：Promise 必须被显式捕获
动态导入失败不会中断主线程，但可能静默白屏或功能缺失。所有 import() 调用必须配套错误处理：
- 使用
.catch()或try/catch（配合await），不可忽略拒绝状态 - 提供有意义的降级策略：显示友好提示、回退到轻量实现、记录错误日志（含 chunk 名、环境、用户操作上下文）
- 结合加载状态管理：展示 skeleton、loading spinner 或 placeholder，尤其在 UI 组件中
- 示例（React + Suspense 场景外的兜底）：
import('./HeavyModule.js')<br> .then(mod => mod.init())<br> .catch(err => {<br> console.error('Failed to load HeavyModule:', err);<br> showToast('功能暂时不可用，请稍后重试');<br> });
构建与测试协同：让规范落地可验证
规范不能只靠人工 Review。建议在工程链路中嵌入自动化保障：
-
ESLint 插件约束：启用
eslint-plugin-import的no-dynamic-require（虽名含 require，实也覆盖 import() 检查），或自定义规则拦截非法路径拼接 -
构建产物检查：CI 中运行
webpack-bundle-analyzer或 Vite 的build.report，监控意外生成的巨型匿名 chunk -
单元测试覆盖边界：模拟
import()拒绝（如 Jest 中 mock 动态导入返回 rejected Promise），验证错误路径逻辑 - 文档沉淀与团队对齐：在项目 README 或内部 Wiki 明确列出「允许的动态导入模式」和「禁止模式」，附带正反例
