javascript es modules 使用 import() 函数实现动态导入，该函数返回一个 promise，在模块加载成功后解析为包含模块所有导出内容的命名空间对象。调用时只需传入模块路径字符串，即可在运行时按需加载代码，适用于路由懒加载或条件渲染等场景。
如何获取动态导入的模块导出内容
动态导入返回的是模块的命名空间对象，需要通过解构赋值提取具体的导出项。例如从返回的对象中获取默认导出或具名导出，直接访问属性即可得到实际值。
const modulePath = './utils.js';
async function loadModule() {
try {
const mod = await import(modulePath);
console.log(mod.default); // 默认导出
console.log(mod.helper); // 具名导出
} catch (error) {
console.error('加载失败:', error);
}
}
loadModule();
运行上述代码，若 utils.js 存在且导出正确，控制台将打印对应的模块内容；若文件不存在或路径错误，则捕获异常并打印错误信息。
动态导入与静态导入的区别是什么
静态导入在编译阶段确定依赖关系，而动态导入在运行时解析路径，支持变量作为参数。静态导入必须位于顶层作用域，动态导入可在任何函数或条件块中使用，灵活性更高但需处理异步逻辑。
// 静态导入：必须在顶层
import { helper } from './utils.js';
// 动态导入：可在运行时决定路径
async function dynamicLoad(condition) {
if (condition) {
const mod = await import('./moduleA.js');
return mod.default;
} else {
const mod = await import('./moduleB.js');
return mod.default;
}
}
对比两种写法，静态导入无法根据条件切换模块，而动态导入可根据 condition 的值加载不同模块，适合多语言切换或功能插件化场景。
动态导入失败时如何处理错误
当模块路径错误或网络请求失败时，import() 会抛出异常，可通过 try...catch 结构捕获并处理。建议在关键业务逻辑中加入 fallback 机制，确保应用稳定性。
async function safeImport(path) {
try {
return await import(path);
} catch (err) {
console.warn(`模块 ${path} 加载失败，使用备用方案`);
return await import('./fallback.js');
}
}
safeImport('./nonexistent.js').then(mod => {
console.log('最终加载的模块:', mod);
});
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
