面试题：JavaScript 中动态导入模块的基本语法是什么

Question

请写出在JavaScript中使用动态导入模块的基本语法，并简要说明其适用场景。

Answer 1

动态导入模块的基本语法

在JavaScript中，动态导入模块使用 import() 语法，它返回一个 Promise。示例如下：

import('./module.js')
  .then((module) => {
      // 使用导入的模块
      module.doSomething();
    })
  .catch((error) => {
      console.error('导入模块失败:', error);
    });

也可以使用 async/await 语法让代码看起来更简洁：

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

适用场景

1. 按需加载：当某些模块不是在页面加载时就需要，而是在特定条件（如用户点击某个按钮）下才需要时，可以使用动态导入。这样可以避免一开始就加载所有模块，从而提升页面的初始加载性能。例如，一个富文本编辑器，只有当用户点击编辑按钮时才加载相关的编辑功能模块。
2. 路由懒加载：在单页应用（SPA）中，路由对应的组件可以通过动态导入实现懒加载。这样在页面初始化时，只加载必要的路由组件，当用户导航到特定路由时，才加载对应的组件模块，优化应用的加载速度。比如，一个大型电商应用，商品详情页、用户个人中心等页面组件可以在用户访问相应页面时动态导入。
3. 条件加载：根据不同的环境或用户配置，动态决定加载哪个模块。例如，根据用户浏览器语言设置，动态加载不同语言的翻译模块。