JavaScript 实现模块懒加载的几种方式

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(() => { // 模块加载完成后执行 });

▲ 优势：

• 兼容所有浏览器环境。
• 支持非模块化脚本加载。

三、进阶优化策略

1. ‌交互驱动加载‌
   结合用户行为（点击/滚动）触发模块加载，减少初始负载。
2. ‌预加载提示‌
   使用<link rel="preload">声明重要模块优先级。
3. ‌缓存策略‌
   通过Service Worker缓存已加载模块，提升二次访问速度。

优先采用原生import()方案，旧项目可渐进式迁移至动态导入。对于图片/视频等资源懒加载，推荐使用IntersectionObserver API实现。