动态导入是现代前端性能优化的刚需手段，用于按需加载代码以解决首屏慢、包体积大等问题；必须在事件回调、条件判断等场景使用，返回Promise需await/.then处理，路径须为字符串字面量且带.js后缀，配合魔法注释可精准控制打包与预加载。
JS 中动态导入（import()）不是“可选技巧”，而是现代前端性能优化的刚需手段。它让代码从“全量加载”转向“按需加载”，直接解决首屏慢、包体积大、功能冗余等高频痛点。
什么时候必须用动态导入？
静态 import 只能在顶层写，无法放进 if、for 或事件回调里——这恰恰是真实业务最常发生的场景：
- 用户点击“管理后台”按钮后，才加载权限模块
- 表单提交失败时，动态引入错误提示组件（避免主包里塞一堆冷门 UI）
- 根据设备类型加载不同渲染逻辑：
import('./renderers/CanvasRenderer.js')或import('./renderers/WebGLRenderer.js') - 鸿蒙 Stage 模型中启用动态特性模块（如
@ohos.dynamicModule），需运行时判断环境再加载
基础写法与关键细节
动态导入返回一个 Promise，必须用 await 或 .then() 处理：
button.addEventListener('click', async () => {
try {
const { formatTime, debounce } = await import('./utils.js');
console.log(formatTime(Date.now()));
} catch (err) {
console.error('模块加载失败：', err);
}
});注意三点：
- 路径必须是字符串字面量（不能是拼接变量），否则 Webpack/Vite 无法做代码分割
- 浏览器中路径需带
.js后缀，和静态导入一致 - 不支持默认导出的简写，必须解构命名导出或用
default属性：const mod = await import('./mod.js'); mod.default()
配合构建工具做精准控制
Webpack 和 Vite 都支持“魔法注释”，在 import() 调用前加注释，就能影响打包行为：
-
/* webpackChunkName: "payment" */→ 把该模块单独打成payment.js，便于分析和缓存 -
/* webpackPrefetch: true */→ 空闲时预加载（适合下一步大概率会用的功能，鸿蒙 NEXT 推荐） -
/* webpackPreload: true */→ 关键资源预加载（如首屏后立刻要用的模块）
示例：
document.getElementById('pay-btn').addEventListener('click', async () => {
const payment = await import(
/* webpackChunkName: "payment" */
/* webpackPrefetch: true */
'./services/PaymentService.js'
);
payment.init();
});在鸿蒙与跨端场景中的特殊处理
HarmonyOS Stage 模型对动态加载有安全约束，不能直接 import('@ohos.xxx')，需通过上下文获取能力：
import { BusinessError } from '@ohos.base';
import type common from '@ohos.app.ability.common';
<p>async function loadDynamicFeature(context: common.UIAbilityContext) {
try {
const dynamicModule = await import('@ohos.dynamicModule');
await dynamicModule.enableFeature(context);
} catch (error) {
const err = error as BusinessError;
console.error(<code>模块启用失败：${err.code}</code>);
}
}同时要确保 module.json5 中已声明对应模块依赖，并在 DevEco Studio 中开启动态特性支持。
不复杂但容易忽略：动态导入真正价值不在语法本身，而在于它迫使你思考“哪些代码真正在此刻需要”。拆分粒度合理、命名清晰、错误兜底到位，才是落地的关键。
