动态 import() 是 JavaScript 原生异步模块加载方式，适用于按需加载弹窗等非首屏组件，返回 Promise，支持 await/.then 获取导出内容，可配合 Promise.all 并行加载多资源、缓存复用、错误捕获，并在原生 JS 中轻量可控。
动态 import() 是 JavaScript 原生支持的异步模块加载方式，非常适合按需加载弹窗这类非首屏必需、使用频次较低的组件。它返回一个 Promise，配合 await 或 .then() 即可获取导出的组件类或函数，再结合 DOM 操作或框架机制（如 React/Vue）挂载到页面中。
基本用法：加载并实例化弹窗类
假设你有一个封装好的弹窗类 Modal.js，导出默认构造函数：
export default class Modal {
constructor(content) {
this.el = document.createElement('div');
this.el.className = 'modal';
this.el.innerHTML = `<div class="modal-content">${content}</div>`;
}
show() {
document.body.appendChild(this.el);
}
hide() {
this.el.remove();
}
}
在需要触发弹窗的地方（比如点击按钮），动态导入并使用：
document.getElementById('openBtn').addEventListener('click', async () => {
const { default: Modal } = await import('./Modal.js');
const modal = new Modal('欢迎来到动态弹窗！');
modal.show();
// 可选：点击遮罩关闭
modal.el.addEventListener('click', (e) => {
if (e.target === modal.el) modal.hide();
});
});
配合 Promise.all 实现多资源并行加载
如果弹窗依赖样式、图标或翻译文案等资源，可一并动态加载：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 将 CSS 作为模块导入（需构建工具支持，如 Webpack/Vite）
- 同时加载多个 JS 模块，例如弹窗 + 动画库 + 国际化配置
async function openRichModal() {
const [Modal, animations, i18n] = await Promise.all([
import('./Modal.js'),
import('./animations.js'),
import('./locales/zh-CN.js')
]);
const modal = new Modal.default(i18n.default.title);
animations.fadeIn(modal.el);
modal.show();
}
防重复加载与缓存复用
多次调用 import('./Modal.js') 不会重复请求——浏览器和打包工具（如 Vite/Webpack）会自动缓存已加载的模块。但为避免重复解析或初始化逻辑，可加一层简单缓存：
const modalModuleCache = new Map();
async function getModal() {
if (modalModuleCache.has('Modal')) {
return modalModuleCache.get('Modal');
}
const module = await import('./Modal.js');
modalModuleCache.set('Modal', module);
return module;
}
// 使用时
const { default: Modal } = await getModal();
在现代框架中更自然的集成方式
在 React 中可结合 React.lazy 和 Suspense（本质也是基于动态 import）；Vue 中可用 defineAsyncComponent。但原生 JS 场景下，直接用 import() 最轻量、最可控：
- 不依赖框架生命周期
- 可自由控制加载时机（如 hover 预加载、点击后加载）
- 错误可捕获：
try/catch处理网络失败或模块语法错误
try {
const { default: Modal } = await import('./Modal.js');
new Modal('加载成功').show();
} catch (err) {
console.error('弹窗加载失败：', err);
alert('功能暂不可用，请刷新重试');
} 
