动态导入通过import()实现按需加载，减少首屏体积，提升性能。常用于懒加载路由、条件加载大库或基于权限/设备加载模块。结合Webpack等工具可自动分割代码，生成独立chunk，实现分块下载。支持预加载、错误处理与加载状态提示，优化用户体验，是高效代码分割的核心手段之一。
动态导入（Dynamic Import）让 JavaScript 模块在运行时按需加载，而不是在初始加载时全部打包。这种方式天然支持代码分割，能显著减少首屏加载时间，提升性能。
按需加载降低初始包体积
使用 import() 语法可以在需要时才加载某个模块。比如用户点击某个功能按钮才加载对应逻辑，避免把不立即使用的代码包含进主 bundle 中。
常见场景包括：
示例：只有用户点击设置按钮时才加载设置模块button.addEventListener('click', () => {
import('./settingsModule.js')
.then(module => module.init())
.catch(err => console.error("加载失败", err));
});
与构建工具配合实现自动代码分割
现代打包工具如 Webpack、Vite、Rollup 能识别 import() 表达式，并自动将被动态导入的模块拆分为独立的 chunk 文件。
立即学习“Java免费学习笔记（深入）”；
这些 chunk 只有在调用 import() 时才会发起网络请求下载，实现真正的“分块加载”。
优势体现在：
- 首页只加载核心逻辑，其余功能异步加载
- 缓存利用率更高：某个功能模块更新，只需重新下载对应 chunk
- 预加载提示：可通过 <link rel="prefetch"> 提前预载可能用到的模块
结合错误处理和加载状态提升用户体验
动态导入是异步操作，可以结合 Promise 特性做更友好的交互反馈。
例如显示加载中提示、重试机制或降级方案，避免白屏或卡顿。
async function loadFeature() {
try {
const module = await import('./heavyFeature.js');
module.render();
} catch (err) {
console.error('模块加载失败，可能是网络问题');
showRetryUI();
}
}
基本上就这些。动态导入不只是语法变化，它是实现高效代码分割的核心手段之一，合理使用能让应用启动更快、资源更可控。 
