JavaScript模块懒加载通过延迟加载非关键资源提升页面性能，以下是主流实现方式：
一、原生动态导入（推荐方案）
通过ES2020的import()函数实现异步加载，返回Promise对象：
javascript
button.addEventListener('click', async () => { const module = await import('./module.js'); // 动态加载模块 module.doSomething(); // 执行模块方法 });
▲ 特性：
- 浏览器原生支持，无需额外库。
- 自动代码分割(code splitting)。
- 与Webpack/Rollup等构建工具无缝集成。
二、传统模块加载方案
1. Webpack特定语法
javascript
require.ensure([], () => { const module = require('./module'); module.doSomething(); }, 'chunk-name'); // 命名代码块
▲ 适用场景：
- 兼容旧版Webpack项目。
- 需显式控制代码块命名。
2. 动态Script注入
原生JS实现的通用方案：
javascript
function loadModule(src) { return new Promise((resolve) => { const script = document.createElement('script'); script.src = src; script.onload = resolve; document.head.appendChild(script); }); } // 使用示例 loadModule('module.js').then(() => { // 模块加载完成后执行 });
▲ 优势：
- 兼容所有浏览器环境。
- 支持非模块化脚本加载。
三、进阶优化策略
- 交互驱动加载
结合用户行为（点击/滚动）触发模块加载，减少初始负载。 - 预加载提示
使用<link rel="preload">声明重要模块优先级。 - 缓存策略
通过Service Worker缓存已加载模块，提升二次访问速度。
优先采用原生
import()方案，旧项目可渐进式迁移至动态导入。对于图片/视频等资源懒加载，推荐使用IntersectionObserver API实现。