ES11 / ES2020 动态 import()（异步加载模块）

ES2020 引入的 import() 动态导入语法 是现代 JavaScript 的重要特性，它允许按需异步加载模块，非常适合大型应用、懒加载、条件加载等场景。

✅ 一、基本语法

import(modulePath).then(module => {// 使用 module 中的导出
});

或用 await（需在 async 函数中）：

const module = await import('./math.js');
console.log(module.add(2, 3));

✅ 二、使用场景

🔹 1. 按需加载模块，减小初始包体积

button.onclick = async () => {const modal = await import('./modal.js');modal.show();
};

🔹 2. 条件加载

if (isMobile()) {import('./mobile-only.js').then(m => m.init());
}

🔹 3. 懒加载组件（React/Vue 中常见）

const LazyComp = React.lazy(() => import('./Comp.jsx'));

🔹 4. 代码分割（webpack 自动识别）

import(/* webpackChunkName: "math" */ './math.js')

✅ 三、动态 import 返回的结构

import() 总是返回一个 Promise，你拿到的是一个 模块对象，里面包含你导出的所有内容：

假设 math.js:

export function add(a, b) {return a + b;
}

调用：

const math = await import('./math.js');
math.add(1, 2); // => 3