动态导入（import()）是ES2020正式引入的运行时模块加载特性，支持按需加载、代码分割与条件加载，但需防范白屏、重复加载、错误静默、Promise链断裂及Tree Shaking失效等风险。
动态导入（import()）是 ES2020 正式引入的特性，它让模块加载从静态编译期转向运行时，支持按需加载、代码分割和条件加载。但用不好容易踩坑：白屏、重复加载、错误静默、Promise 链断裂、Tree Shaking 失效……下面结合实战场景，总结关键防坑点与编写规范。
确保环境兼容并正确降级
动态导入返回 Promise，不支持旧版浏览器（如 IE 全系、Safari
- 检查
typeof import === 'function'，否则 fallback 到 AMD/require.js 或 script 标签注入 - 使用 Webpack/Vite 时，确保
target或browserslist配置合理；Babel 需启用@babel/plugin-syntax-dynamic-import（仅语法解析，不转译执行逻辑） - 注意：Babel 不会把
import()转成require.ensure等旧 API，转译需靠打包工具配合
路径必须是字符串字面量或受限表达式
import() 的参数不是任意表达式——Webpack/Vite 等工具依赖静态分析生成 chunk，因此路径需“可预测”：
- ✅ 允许：
import('./utils.js')、import(`./pages/${page}.js`)（模板字符串中变量需为有限枚举，如const page = 'home' | 'about'） - ❌ 禁止：
import('./' + name + '.js')、import(someVar)、import(getPath())（导致构建失败或全量打包） - 提示：Vite 在开发时可能容忍部分动态路径，但生产构建会报 warning 或退化为 fallback 行为
统一错误处理，避免 Promise 沉默失败
动态导入失败默认抛出异常，但若未 catch，会变成 unhandled rejection，影响用户体验且难定位：
- 永远用
.catch()或try/catch包裹，不要裸调用：import('./mod').then(m => m.init()).catch(err => console.error('加载失败:', err)) - 对业务关键模块（如登录弹窗、支付 SDK），建议加重试机制或降级 UI：
async function loadWithRetry(path, times = 2) { ... } - 避免在
useEffect或mounted中无保护调用，尤其网络不稳定时
警惕副作用与重复加载
多次调用相同路径的 import()，现代打包器通常会自动去重（返回同一 Promise），但仍有边界情况需注意：
- 不同绝对路径视为不同模块：
import('./a.js')与import('src/a.js')可能触发两次请求（取决于 resolve 配置） - 带查询参数的路径会被视为新请求：
import('./mod.js?v=1.2')→ 每次都重新加载（慎用于热更新调试） - 模块内含顶层副作用（如直接执行 init 函数、修改全局状态），重复
import()不会重复执行（因模块缓存），但export default是函数时需自行控制单例
动态导入本质是运行时能力，它的灵活性来自约束——路径可控、错误可见、加载可管。写的时候多问一句：这个路径构建时能分析出来吗？失败了用户知道吗？重复点三次会不会卡住？答案清晰了，坑就绕开了。
