可通过CustomEvent配合dynamic import实现模块按需懒加载：1.点击等交互时dispatch带参数的自定义事件；2.全局监听并import()加载，用Map缓存避免重复；3.懒加载模块导出init等方法，不自动执行副作用；4.可结合IntersectionObserver自动触发。
可以通过自定义事件（customevent）配合动态 import() 实现模块的按需懒加载：当用户触发某个操作（如点击按钮、滚动到区域、输入完成等），再分发事件并监听执行加载逻辑，避免初始打包体积过大。
1. 定义并触发自定义事件
在交互发生时（比如按钮被点击），创建并派发一个带语义的自定义事件，例如 "load-editor" 或 "open-modal"。事件可携带必要参数（如模块名、配置项）：
- 使用
new CustomEvent(type, { detail })构造事件 - 通过
document.dispatchEvent()或具体元素的.dispatchEvent()触发 - 推荐挂载到
document，便于全局监听，也支持冒泡
示例：
document.getElementById('editor-btn').addEventListener('click', () => {
document.dispatchEvent(new CustomEvent('load-editor', {
detail: { theme: 'dark', autoFocus: true }
}));
});
2. 全局监听并动态加载模块
在应用初始化阶段（如入口文件或主组件挂载后），监听该自定义事件，并在回调中调用 import() 动态导入对应模块。注意：加载后应缓存结果，避免重复请求。
- 用
import('./modules/Editor.js')返回 Promise，可then或await获取模块对象 - 建议用 Map 或对象缓存已加载模块，提升二次触发性能
- 加载失败时需有降级处理（如提示错误、重试按钮）
示例：
const loadedModules = new Map();
document.addEventListener('load-editor', async (e) => {
const { theme, autoFocus } = e.detail;
if (loadedModules.has('Editor')) {
loadedModules.get('Editor').init({ theme, autoFocus });
return;
}
try {
const { default: Editor } = await import('./modules/Editor.js');
loadedModules.set('Editor', Editor);
Editor.init({ theme, autoFocus });
} catch (err) {
console.error('Editor module load failed:', err);
}
});
3. 模块导出需适配懒加载场景
被懒加载的模块不应自动执行副作用（如直接渲染 DOM），而应导出明确的初始化函数（如 init()、mount()），由主应用控制何时、如何使用。
- 避免模块顶层立即执行逻辑（如
renderTo('#app')） - 导出类、函数或对象均可，但需提供统一接入接口
- 可导出多个方法（
init、destroy、update）以支持生命周期管理
示例模块结构（./modules/Editor.js）：
export default class Editor {
static instance = null;
static init(options) {
if (this.instance) return this.instance;
this.instance = new Editor(options);
this.instance.render();
return this.instance;
}
constructor({ theme }) {
this.theme = theme;
}
render() {
// 渲染逻辑，不自动挂载
}
}
4. 扩展：结合 IntersectionObserver 自动触发加载
对“进入视口即加载”的场景（如长页面中的富文本编辑器区块），可用 IntersectionObserver 监听可见性，代替手动点击，再触发同一套自定义事件流程。
- 观察目标元素，当
isIntersecting === true时 dispatch 事件 - 可加防抖或只触发一次（
unobserve）防止重复加载 - 保持事件类型一致，复用已有监听逻辑，解耦触发方式与加载行为
示例：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
document.dispatchEvent(new CustomEvent('load-editor', {
detail: { autoLoad: true }
}));
observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 });
observer.observe(document.querySelector('.editor-section')); 
