按需动态加载js

按需动态加载JS的核心概念

按需动态加载指根据用户操作或页面状态，在需要时才加载对应的JS资源，避免一次性加载所有脚本,从而提升页面性能。

适用场景

动态加载的实现方法

使用 import() 动态导入（ES6模块）

// 示例：按钮点击后加载模块
document.getElementById('loadBtn').addEventListener('click', () => {
  import('./module.js')
    .then(module => {
      module.default(); // 调用模块默认导出函数
    })
    .catch(err => console.error('模块加载失败:', err));
});

动态创建 <script>

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => callback(null, script);
  script.onerror = () => callback(new Error(`${url} 加载失败`));
  document.head.appendChild(script);
}
// 使用示例
loadScript('//example.com/analytics.js', (err, script) => {
  if (err) console.error(err);
  else console.log('脚本已加载:', script.src);
});

---

性能优化策略

优化方向	具体措施
减少请求数	合并同类功能脚本，复用已加载资源
缓存控制	设置 cache-control 头，利用 Service Worker 缓存
代码分割	Webpack SplitChunks 拆分公共代码
懒执行	延迟执行非关键逻辑（如动画、埋点）

---

兼容性处理

1. ES6模块兼容性

   • 使用 Babel 转译为 ES5，配合 @babel/plugin-dynamic-import-webpack 插件。
   • 替代方案：通过打包工具（如 Rollup/Webpack）生成兼容代码。

2. 旧浏览器支持

   • 检测 import() 是否存在，若不支持则回退到动态脚本加载。

     const supportDynamicImport = typeof import === 'function';

---

常见问题与解决方案

问题	解决方案
重复加载脚本	维护已加载脚本列表，加载前检查缓存
加载顺序依赖	使用 Promise 链或异步函数控制顺序
跨域限制	确保脚本资源支持 CORS，或代理转发请求

---

相关问题与解答

问题1：动态加载JS与静态加载的核心区别是什么？

解答：

• 静态加载：页面初始化时同步加载所有脚本，可能导致首屏渲染阻塞。
• 动态加载：仅在需要时异步加载，减少初始请求体积,但需处理网络延迟和加载失败。

问题2：如何优化动态加载的性能？

解答：

1. 预加载关键资源：使用 <link rel="preload"> 提前加载高频模块。
2. 分优先级加载：优先加载用户可见区域的脚本，延迟加载次要功能。
3. 压缩与混淆：通过 UglifyJS/Terser