dynamic import() 与脚本加载函数：通用场景下孰优孰劣？

适用场景分清楚 #

• 自定义脚本加载函数：如果你要加载第三方独立脚本（比如CDN上的jQuery、ECharts），或是项目完全不用构建工具，这个方案更灵活——你能精准控制脚本的插入位置、加载时机，甚至给脚本添加额外属性。
• dynamic import()（包括webpack内置支持）：要是你的项目用了webpack、Vite这类构建工具，优先选这个。它能和构建流程深度整合，帮你做代码拆分、Tree Shaking，还能直接导入项目内模块的导出内容，不用手动处理全局变量那套逻辑。

性能差异对比 #

两者本质都会发起网络请求，但细节上差很多：

• 自定义加载函数只是单纯插入script标签，没有构建优化加持。如果加载的文件没压缩、没加缓存哈希，浏览器缓存复用率低；而且加载完成后，你还得自己处理模块导出（比如依赖全局变量），多了额外的逻辑开销。
• webpack的dynamic import()优势明显：构建时会自动把代码拆分成小块，生成带哈希值的文件名（浏览器下次访问直接复用缓存），还能通过webpackPrefetch/webpackPreload注释提前预加载可能用到的代码块。加载完成后直接拿到模块导出内容，不用额外折腾，性能和开发体验都更顺畅。

最佳选择判断 #

没有绝对的最优方案，看你的项目情况：

• 现代前端项目（使用构建工具）：选webpack/Vite的dynamic import()，构建工具的优化全给你拉满，代码拆分、缓存、模块管理一步到位。
• 无构建工具项目/加载第三方独立脚本：自定义加载函数更适配，能满足各种特殊加载需求。

自定义脚本加载函数示例 #

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.async = true;
    script.src = url;

    script.addEventListener('load', () => {
      resolve(true);
    });

    script.addEventListener('error', (event) => {
      reject(event);
    });

    document.head.appendChild(script);
  });
}

内容的提问来源于stack exchange，提问作者George