动态导入通过import()实现按需加载，提升首屏速度与资源利用率，结合构建工具可拆分代码，适用于路由和功能模块分割，优化大型应用性能。
在现代前端开发中，动态导入（Dynamic Imports）是实现代码分割（Code Splitting）的重要手段。它允许你在运行时按需加载模块，而不是在初始加载时就引入所有代码。这对于提升页面加载速度、优化资源利用非常有效。
什么是动态导入
动态导入是 ES2020 引入的特性，通过 import() 函数语法实现。它返回一个 Promise，该 Promise 解析为模块对象。这与静态的 import 语句不同，静态导入在文件加载时就确定依赖关系。
示例：button.addEventListener('click', () => {
import('./module.js')
.then(module => {
module.default();
})
.catch(err => {
console.error('模块加载失败', err);
});
});
上面这段代码只有在用户点击按钮时才会去加载 module.js，实现了真正的“按需加载”。
如何实现代码分割
代码分割的目标是将打包后的 JavaScript 文件拆分成多个小块，让浏览器只加载当前需要的部分。结合动态导入和构建工具（如 Webpack、Vite 或 Rollup），可以自动完成这一过程。
立即学习“Java免费学习笔记（深入）”；
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 使用 import() 加载路由组件（例如在单页应用中）
- 延迟加载功能模块（如图表、编辑器等重型库）
- 根据设备或用户权限加载不同模块
const routes = {
'/home': () => import('./pages/Home.js'),
'/about': () => import('./pages/About.js'),
'/admin': () => import('./pages/Admin.js')
};
function navigate(path) {
routes[path]()
.then(({ default: Page }) => {
render(Page);
});
}
这样每个页面对应的代码会被打包成独立的 chunk，访问哪个页面才加载哪个模块。
动态导入的优势
相比一次性加载全部脚本，动态导入带来几个关键好处：
- 减少首屏加载时间：只加载必要代码
- 节省带宽：用户不会下载未使用的功能代码
- 提升用户体验：更快进入主流程
- 便于维护：逻辑上分离模块，构建工具自动处理拆分
尤其在大型应用中，合理使用动态导入能显著降低初始包体积。
注意事项
虽然动态导入很强大，但也需要注意以下几点：
- 确保构建工具支持 code splitting 配置（如 Webpack 的 splitChunks）
- 避免过度拆分，太多小文件会增加 HTTP 请求开销（HTTP/2 可缓解）
- 处理好错误情况，比如网络问题导致模块加载失败
- 注意模块路径必须是静态可分析的字符串，不能完全动态拼接（部分工具支持有限动态）
基本上就这些。动态导入 + 构建工具配合，是目前最主流的前端代码分割方案。用好它，能让应用更轻快。不复杂但容易忽略细节。
