ES6动态加载import

ES6 动态加载 import

ES6 提供了动态 import() 函数：调用时返回一个 Promise，异步加载模块；与静态 import 不同，它可以在任意位置、任意条件中使用。

import("lodash").then(_ => {
  // Do something with lodash (a.k.a '_')...
});

常见用法

• 按需加载：根据路由或用户操作动态加载对应组件，常用于代码分割（code splitting）。
• 条件加载：根据平台、判断条件决定加载哪个模块。
• 与 async/await 配合：

async function load() {
  const { default: moment } = await import('moment');
  return moment().format('YYYY-MM-DD');
}

补充：动态 import() 的几个关键点：

• 本质上会被 webpack/rollup/vite 等打包工具识别为异步代码分割点，自动拆出一个独立 chunk。
• 与静态 import 不同，动态 import() 接受任意字符串表达式，所以拼接路径时要小心路径注入风险（建议通过白名单校验）。
• 返回的 Promise resolve 的是模块命名空间对象，所以解构时要通过 default 或具名导出。
• 在浏览器中使用时，注意 Content-Type 必须为 application/javascript，否则会拒绝执行。

来源整理自：vue3js.cn 面试官系列