动态导入是JavaScript在运行时按需异步加载模块的特性，通过import()函数实现，返回Promise，支持条件加载、路由懒加载等场景，提升性能。
JavaScript动态导入是一种在运行时按需加载模块的方式，适合优化性能、减少初始加载时间。它通过import()函数实现，返回一个Promise，可以异步获取模块内容。
什么是动态导入
与静态的import语句不同，动态import()可以在代码执行过程中任意位置调用。它适用于条件加载、路由切换、懒加载组件等场景。
特点：
- 按需加载：只在需要时才加载模块
- 异步加载：不会阻塞主线程
- 支持表达式：路径可以是变量或拼接字符串
基本语法和使用方式
使用import(模块路径)即可动态导入模块，通常配合async/await或.then()处理结果。
立即学习“Java免费学习笔记（深入）”；
// 使用 async/await
const loadModule = async () => {
const module = await import('./myModule.js');
module.doSomething();
};
// 使用 .then()
import('./myModule.js')
.then(module => {
module.doSomething();
})
.catch(err => {
console.error('加载失败', err);
});
实际应用场景
动态导入特别适用于以下几种情况：
- 路由级代码分割：在单页应用中，每个页面对应的组件只在访问时加载
-
条件加载大体积库：例如仅在用户点击“导出PDF”时加载
pdf-lib - 国际化语言包：根据用户语言动态加载对应翻译文件
- 功能模块拆分：将不常用的高级功能独立成模块，避免主包过大
注意事项
使用动态导入时需要注意几点：
- 路径必须是相对或绝对URL，不能是纯变量（但可拼接）
- 构建工具（如Webpack、Vite）会自动将动态导入的模块拆分为独立chunk
- 错误处理很重要，网络问题可能导致加载失败
- 频繁调用
import()可能造成多次请求，建议结合缓存逻辑
基本上就这些。动态导入让模块加载更灵活，合理使用能显著提升应用加载速度和用户体验。
