异步加载第三方JS脚本的核心目标是不阻塞渲染且确保按需可用，主流方案包括动态创建script标签（兼容性好但需手动处理状态）、import()动态导入（ES模块专属，自动去重但兼容性受限）、封装加载器（健壮可控适合大型项目）及构建工具预处理（构建期优化但缺乏运行时灵活性）。
异步加载第三方 JS 脚本，核心目标是不阻塞页面渲染、不干扰主逻辑执行，同时确保脚本按需可用。主流方案在兼容性、可控性、错误处理和资源管理上差异明显，选型需结合具体场景。
动态创建 script 标签（原生最简方案）
手动创建 <script> 元素并插入 DOM，利用浏览器对 async 属性的默认行为实现非阻塞加载。
- ✅ 无需依赖，兼容所有现代浏览器及 IE9+
- ✅ 加载与执行完全异步，不影响 HTML 解析
- ⚠️ 缺乏内置加载状态反馈，需手动监听
load/error事件 - ⚠️ 多次调用可能重复加载同一脚本，需自行缓存判断
典型写法：
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
使用 import() 动态导入（ES 模块方案）
适用于已发布为 ESM 的第三方库（如部分 CDN 提供的 ?module 版本），通过 import() 返回 Promise，天然支持按需加载与错误捕获。
立即学习“Java免费学习笔记（深入）”；
- ✅ 语法简洁，自动去重（同一 URL 多次调用只加载一次）
- ✅ 原生支持加载状态、错误堆栈、tree-shaking（若模块支持）
- ⚠️ 要求目标脚本为合法 ES 模块，不兼容 IIFE 或 UMD 形式的老库
- ⚠️ 无法直接控制
<script>的属性（如crossorigin），CDN 跨域需额外配置
示例（需服务端或 CDN 支持模块化）：
import('https://cdn.jsdelivr.net/npm/dayjs@1/esm/index.js')
.then(({ default: dayjs }) => {
console.log(dayjs().format());
})
.catch(err => console.error('Load failed:', err));
封装加载器（兼顾兼容与健壮性）
在动态 script 基础上补充版本缓存、并发控制、超时机制、全局唯一标识等能力，适合中大型项目统一管理第三方依赖。
- ✅ 可统一处理跨域、SRI（Subresource Integrity）、加载优先级
- ✅ 支持 fallback（如 CDN 失败降级到备用源）
- ✅ 易集成到框架生命周期（如 React useEffect、Vue onMounted）
- ⚠️ 需自行维护或选用成熟工具（如
load-script、react-load-script）
关键设计点：
- 用 Map 缓存
src → Promise，避免重复请求 - 添加
timeout参数，防止脚本长期挂起 - 暴露
isLoaded状态，便于组件条件渲染
借助构建工具预处理（构建期方案）
Webpack、Vite 等工具支持将第三方库标记为外部依赖（externals）或通过 import() 自动代码分割，由打包结果控制加载时机。
- ✅ 构建时静态分析，可优化 chunk 分包、预加载提示（
prefetch/preload） - ✅ 天然支持类型提示、tree-shaking、版本锁定（lockfile）
- ⚠️ 不适用于运行时才确定的脚本地址（如用户配置的统计 SDK 地址）
- ⚠️ 需协调 CDN 资源路径与构建输出，部署流程稍复杂
例如 Webpack 中：
module.exports = {
externals: {
'lodash': '_',
'jquery': 'jQuery'
}
};
再通过 HTML 模板或 runtime 注入对应全局变量或 script 标签。
