动态导入（import()）是运行时按需加载模块的机制，返回Promise，支持变量路径、async/await和.then()调用，适用于路由拆分、条件功能、大依赖隔离等场景，并可配合构建工具生成独立chunk。
JavaScript 动态导入（import()）是一种在运行时按需加载模块的机制，它返回一个 Promise，让你可以只在真正需要时才加载代码，而不是在页面初始化时全部加载。
动态导入怎么写
和静态 import 不同，动态导入使用函数调用语法：
import('./module.js') → 返回 Promise，成功后解析为模块对象。
常用写法示例：
立即学习“Java免费学习笔记（深入）”；
- 配合
async/await：
const module = await import('./utils.js');
module.doSomething();
- 配合
.then()：
import('./chart.js').then(chart => chart.render());
注意：路径支持变量或表达式（如 import(`./locales/${lang}.js`)），但不能是完全动态拼接的任意字符串（需被构建工具静态分析到）。
按需加载的核心好处
它让前端资源更“轻量”、更“聪明”，主要体现在三方面：
- 首屏加载更快：主包不包含非关键逻辑（如弹窗组件、报表图表、多语言包），减少初始 JS 体积，缩短白屏时间。
- 内存占用更低：未使用的模块不会执行、不会驻留内存，尤其对单页应用中不同路由对应不同功能模块很有效。
-
用户体验更顺滑：可结合用户行为预加载（如鼠标悬停菜单时预取子模块），或在空闲时加载非紧急资源（
requestIdleCallback+import()）。
典型应用场景
不是所有地方都要用，但这些场景特别适合：
-
路由级拆分：Vue Router / React Router 的 lazy loading 就基于此（
const Home = () => import('./views/Home.vue')）。 - 条件性功能：比如只有管理员才用的后台配置页，普通用户访问时不加载相关代码。
-
大体积依赖隔离：像
pdfjs-dist、monaco-editor这类重型库，只在用户点击“查看 PDF”或“打开编辑器”时才加载。 - 错误降级处理：加载失败可优雅回退（如显示提示、加载简化版）：
try {
const mod = await import('./heavy-feature.js');
mod.init();
} catch (err) {
console.warn('功能未加载', err);
showFallbackUI();
}
搭配构建工具效果更好
Webpack、Vite、Rollup 等能自动识别 import() 并生成独立 chunk 文件。例如 Webpack 会把 import('./a.js') 编译成一个编号为 a.xxx.js 的分离文件，按需请求。
你还可以加魔法注释优化打包行为：
import(/* webpackChunkName: "vendor-chart" */ './chart.js')
→ 让生成的 chunk 有可读名字，方便调试和缓存管理。
不复杂但容易忽略。
