import() 是 javascript 的动态导入函数，返回 promise，支持运行时按需加载模块，适用于代码分割、路由懒加载等场景，需在模块作用域中使用，路径需受构建工具约束。
JavaScript 中的 import() 是一个函数式动态导入语法，它返回一个 Promise，用于在运行时按需加载模块，而不是在编译时静态引入。它特别适合做代码分割、路由懒加载、条件加载或用户交互触发的模块加载。
基本用法：调用 import() 加载模块
import() 接收一个模块路径字符串（支持变量拼接），返回 Promise，成功后解析出模块对象（默认导出或命名导出）：
import('./mathUtils.js')
.then(module => {
console.log(module.add(2, 3)); // 假设 mathUtils.js 导出 add 函数
})
.catch(err => {
console.error('加载失败:', err);
});
注意：import() 只能在模块作用域中使用（即 type="module" 的脚本或 ES 模块文件中），不能在普通 script 标签或 CommonJS 环境中直接调用。
配合 async/await 写法更简洁
利用 async 函数可让异步加载逻辑更易读：
async function loadCalculator() {
try {
const calc = await import('./calculator.js');
return calc.default ? calc.default : calc;
} catch (err) {
console.error('模块加载失败', err);
}
}
<p>// 使用示例
loadCalculator().then(instance => instance.multiply(4, 5));
</p>
如果模块使用 export default，解构时建议先检查 default 属性；若为纯命名导出（无 default），可直接访问属性名，如 calc.sum。
路径支持变量和表达式（但有约束）
import() 支持动态路径，但 Webpack/Vite 等打包工具会静态分析可能的模块路径，因此不能完全任意拼接：
- ✅ 支持模板字符串 + 字符串字面量组合：
import(`./pages/${pageName}.js`) - ✅ 支持有限变量（如枚举值、固定列表）：
const moduleMap = { home: './Home.js', about: './About.js' }; import(moduleMap[route]) - ❌ 不支持完全运行时不可知路径：
import(userInput + '.js')（打包工具无法预置，会报错或忽略）
实际项目中，建议把动态路径限制在已知范围内，便于构建工具生成对应 chunk。
常见场景：路由懒加载与按钮点击加载
在单页应用中，常结合框架或原生逻辑实现按需加载：
-
React（配合 Suspense）：
const Component = React.lazy(() => import('./Dashboard.js')); -
原生 JS 路由切换： 监听 hash 或 history change，再
import()对应模块并挂载到 DOM -
用户操作触发： 如点击“导出 PDF”按钮才加载 pdf-lib 库：
document.getElementById('exportBtn').addEventListener('click', () => import('pdf-lib').then(({ PDFDocument }) => {/* 使用 */}));
这样做能显著减小首屏体积，提升初始加载速度。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
