JavaScript 动态导入

动态导入是 JavaScript 中一种按需加载模块的技术，它允许你在运行时异步地加载模块，而不是在代码初始化时就静态地导入所有模块。

基本语法

动态导入使用 import() 函数，它返回一个 Promise：

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

或者使用 async/await 语法：

async function loadModule() {
  try {
    const module = await import('./module.js');
    module.doSomething();
  } catch (err) {
    console.error('模块加载失败:', err);
  }
}

动态导入的特点

1. 异步加载：模块在需要时才加载，减少初始加载时间
2. 返回 Promise：可以使用 then/catch 或 async/await 处理
3. 代码分割：与打包工具(如 Webpack)配合可实现自动代码分割
4. 按需加载：只在特定条件下加载模块，如用户点击按钮时

常见使用场景

1. 路由级别的代码分割：

// 在路由变化时动态加载对应组件
router.beforeEach(async (to, from, next) => {
  const component = await import(`./views/${to.name}.vue`);
  // ...
});

2. 条件性加载模块：

if (user.needsAdvancedFeature) {
  const advancedModule = await import('./advanced.js');
  advancedModule.init();
}

3. 减少初始包大小：

document.getElementById('btn').addEventListener('click', async () => {
  const heavyModule = await import('./heavyModule.js');
  heavyModule.run();
});

注意事项

1. 路径处理：动态导入的路径可以是变量，但要注意路径解析
2. 错误处理：务必处理加载失败的情况
3. 浏览器支持：现代浏览器都支持，但旧版可能需要 polyfill
4. Tree Shaking：动态导入可能影响打包工具的 tree shaking 优化

与静态导入的比较

动态导入是优化应用性能的重要工具，特别是在大型应用中，可以显著减少初始加载时间。