什么是动态导入？
标准的 import 语法是静态的，这意味着模块必须在代码运行之前（即在编译/解析阶段）下载并解析。虽然这对依赖分析和打包优化很有帮助，但在某些场景下，我们需要按需加载模块。
动态导入功能允许你在运行时按需加载模块。import(moduleSpecifier) 表达式加载模块并返回一个 Promise，该 Promise resolve 为一个包含其所有导出的模块命名空间对象。
语法
javascript
import('/path/to/module.js')
.then((module) => {
// 使用模块
module.doSomething();
})
.catch((err) => {
// 处理加载错误
console.error(err);
});或者配合 async/await 使用：
javascript
async function load() {
const module = await import('/path/to/module.js');
module.doSomething();
}示例分析
基于提供的示例文件，我们来看一个实际的应用场景。
1. 模块定义 (click.js)
这是一个普通的 ES 模块，导出了 clickEvent 和 getClickCount 函数。注意它不需要任何特殊的修改来支持动态导入。
javascript
// click.js
let clickCount = 0;
export const clickEvent = ({ source = 'button' } = {}) => {
clickCount += 1;
// ... 返回数据
};
export const getClickCount = () => clickCount;2. 动态加载实现 (dynamic.html)
在 HTML 文件中，我们通过点击按钮来触发模块的加载。
按需加载
javascript
let modulePromise = null;
const loadModule = () => {
// 缓存 Promise，避免重复加载
if (!modulePromise) {
modulePromise = import('./click.js');
}
return modulePromise;
};这里使用了一个 modulePromise 变量来缓存 import() 的结果。这意味着模块只会下载和解析一次。后续的调用会直接重用已经 resolve 的 Promise。
用户交互触发
javascript
button.addEventListener('click', async () => {
button.disabled = true;
setStatus('模块加载中...', 'loading');
try {
// 等待模块加载完成
const module = await loadModule();
// 使用模块导出的函数
const payload = module.clickEvent({ source: 'button' });
renderResult(payload, loadCost);
setStatus('模块已加载并执行', 'success');
} catch (error) {
setStatus('模块加载失败', 'error');
} finally {
button.disabled = false;
}
});在这个例子中：
- 用户点击按钮。
- 调用
loadModule()开始加载click.js。 - 使用
await等待加载完成。 - 加载成功后，像使用普通对象一样访问
module.clickEvent。
预加载 (Preloading) 优化
示例中还包含了一个优化细节：
javascript
button.addEventListener('pointerenter', loadModule);当鼠标悬停在按钮上时，就提前调用 loadModule() 开始加载。这样当用户真正点击时，模块可能已经加载完毕，从而提供更快的响应速度。
动态导入的优势
- 性能优化：减少初始加载时间（Initial Load Time）。用户只需要下载当前页面急需的代码。
- 按需加载：某些功能（如复杂的图表、编辑器、或者只有特定用户权限可见的功能）可以等到用户真正需要时再加载。
- 节省带宽：如果用户从不使用某个功能，那么相关的代码就永远不会被下载。
适用场景
- 单页应用 (SPA) 中的路由懒加载。
- 体积巨大的第三方库（如 Three.js, ECharts 等）的按需加载。
- 条件加载（根据用户配置或环境加载不同的模块）。