动态导入通过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免费学习笔记（深入）”；
路由场景示例：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，访问哪个页面才加载哪个模块。
慧博商城系统HuiboShop2011系统特色：1、上百套模板随意下载切换、模板定时更新；2、csv数据导入、数据定向读取，一键导入商品信息，省时、省力； 3、多会员等级管理，一站搞定零售、批发、代销；4、可集成网站分销功能模块，缔造庞大的代理业务链，代理客户一键铺货；5、代码严谨，防SQL注入；前后台用户分开管理，密码不可逆加密；6、简单易操作、只需几分钟搞定一个商城网站；商城后台帐号admin
动态导入的优势
相比一次性加载全部脚本，动态导入带来几个关键好处：
- 减少首屏加载时间：只加载必要代码
- 节省带宽：用户不会下载未使用的功能代码
- 提升用户体验：更快进入主流程
- 便于维护：逻辑上分离模块，构建工具自动处理拆分
尤其在大型应用中，合理使用动态导入能显著降低初始包体积。
注意事项
虽然动态导入很强大，但也需要注意以下几点：
- 确保构建工具支持 code splitting 配置（如 Webpack 的 splitChunks）
- 避免过度拆分，太多小文件会增加 HTTP 请求开销（HTTP/2 可缓解）
- 处理好错误情况，比如网络问题导致模块加载失败
- 注意模块路径必须是静态可分析的字符串，不能完全动态拼接（部分工具支持有限动态）
基本上就这些。动态导入 + 构建工具配合，是目前最主流的前端代码分割方案。用好它，能让应用更轻快。不复杂但容易忽略细节。
