在现代Web开发中，动态加载JavaScript文件是一项常见需求。无论是实现按需加载、优化性能，还是管理大型应用的模块化依赖，掌握动态加载JS文件的技巧都至关重要。通过动态加载，我们可以减少初始页面加载时间，提升用户体验，同时更灵活地管理代码资源。JavaScript中动态加载JS文件的几种方法，并分析它们的优缺点。
1. 使用document.createElement方法
最基础的方法是使用document.createElement动态创建<script>标签，然后将其添加到DOM中。这种方法兼容性好，适用于所有现代浏览器：
function loadJS(url, callback) {
const script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
// 使用示例
loadJS('https://example.com/script.js', () => {
console.log('脚本加载完成');
});
优点：
- 简单直接，兼容性
- 可以明确控制加载时机
缺点：
- 需要手动处理错误情况
- 多个脚本的依赖关系需要自行管理
2. 利用async和defer属性
当需要控制脚本的执行顺序时，可以使用async或defer属性：
const script = document.createElement('script');
script.src = 'script.js';
script.async = false; // 保持顺序执行
document.head.appendChild(script);
区别：
async：下载完成后立即执行，不保证顺序defer：在文档解析完成后按顺序执行
3. 使用ES6模块的动态导入
对于现代浏览器，可以使用ES6的import()语法实现动态加载：
// 动态导入模块
import('/modules/myModule.js')
.then((module) => {
module.doSomething();
})
.catch((err) => {
console.error('加载失败:', err);
});
优点：
- 原生支持模块系统
- 返回Promise，便于处理异步逻辑
- 支持Tree Shaking优化
4. 利用第三方库
一些流行的模块加载库可以简化动态加载过程：
使用RequireJS：
requirejs(['module1', 'module2'], function(module1, module2) {
// 模块加载完成后的回调
});
使用SystemJS：
System.import('module.js').then(function(m) {
console.log(m);
});
5. 错误处理与性能优化
动态加载时需要注意以下几点：
错误处理：
script.onerror = function() {
console.error('脚本加载失败:', script.src);
};
性能优化建议：
- 合并小文件减少HTTP请求
- 使用preload/prefetch提示浏览器预加载
- 考虑HTTP/2的多路复用特性
动态加载JS文件是优化Web应用性能的重要手段。根据项目需求，可以选择原生方法、ES6模块或第三方库来实现。理解每种方法的适用场景和限制，才能在实际开发中做出选择。随着浏览器技术的不断发展，未来可能会出现更多高效的动态加载方案。
（本文来源：nzw6.com）
