JavaScript 动态导入 (Dynamic Imports)

什么是动态导入？

标准的 import 语法是静态的，这意味着模块必须在代码运行之前（即在编译/解析阶段）下载并解析。虽然这对依赖分析和打包优化很有帮助，但在某些场景下，我们需要按需加载模块。

动态导入功能允许你在运行时按需加载模块。import(moduleSpecifier) 表达式加载模块并返回一个 Promise，该 Promise resolve 为一个包含其所有导出的模块命名空间对象。

语法

import('/path/to/module.js')
  .then((module) => {
    // 使用模块
    module.doSomething();
  })
  .catch((err) => {
    // 处理加载错误
    console.error(err);
  });

或者配合 async/await 使用：

async function load() {
  const module = await import('/path/to/module.js');
  module.doSomething();
}

示例分析

基于提供的示例文件，我们来看一个实际的应用场景。

1. 模块定义 (click.js)

这是一个普通的 ES 模块，导出了 clickEvent 和 getClickCount 函数。注意它不需要任何特殊的修改来支持动态导入。

// click.js
let clickCount = 0;

export const clickEvent = ({ source = 'button' } = {}) => {
    clickCount += 1;
    // ... 返回数据
};

export const getClickCount = () => clickCount;

2. 动态加载实现 (dynamic.html)

在 HTML 文件中，我们通过点击按钮来触发模块的加载。

按需加载

let modulePromise = null;

const loadModule = () => {
    // 缓存 Promise，避免重复加载
    if (!modulePromise) {
        modulePromise = import('./click.js');
    }
    return modulePromise;
};

这里使用了一个 modulePromise 变量来缓存 import() 的结果。这意味着模块只会下载和解析一次。后续的调用会直接重用已经 resolve 的 Promise。

用户交互触发

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;
    }
});

在这个例子中：

1. 用户点击按钮。
2. 调用 loadModule() 开始加载 click.js。
3. 使用 await 等待加载完成。
4. 加载成功后，像使用普通对象一样访问 module.clickEvent。

预加载 (Preloading) 优化

示例中还包含了一个优化细节：

button.addEventListener('pointerenter', loadModule);

当鼠标悬停在按钮上时，就提前调用 loadModule() 开始加载。这样当用户真正点击时，模块可能已经加载完毕，从而提供更快的响应速度。

动态导入的优势

1. 性能优化：减少初始加载时间（Initial Load Time）。用户只需要下载当前页面急需的代码。
2. 按需加载：某些功能（如复杂的图表、编辑器、或者只有特定用户权限可见的功能）可以等到用户真正需要时再加载。
3. 节省带宽：如果用户从不使用某个功能，那么相关的代码就永远不会被下载。

适用场景

• 单页应用 (SPA) 中的路由懒加载。
• 体积巨大的第三方库（如 Three.js, ECharts 等）的按需加载。
• 条件加载（根据用户配置或环境加载不同的模块）。