如何在JS延迟加载中避免重复下载未变更的大体积JS文件？

你的问题很典型——当前的延迟加载虽然实现了按需加载，但没充分利用浏览器缓存特性。我们可以通过版本号本地存储+对比的方式，让浏览器只在文件真的更新时才去服务器下载，否则直接读取缓存。下面是具体的修改方案和完整代码：

// 把JS文件的路径和版本号抽离成配置，方便后续维护
const jsBundleConfig = {
  basePath: "/Scripts/JQueryBundle",
  currentVersion: "vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1"
};

function downloadJs() {
  // 从本地存储获取之前保存的版本号
  const savedVersion = localStorage.getItem("jqueryBundleVersion");
  
  // 创建script标签的通用逻辑
  function createScriptTag() {
    const element = document.createElement("script");
    element.src = `${jsBundleConfig.basePath}?v=${jsBundleConfig.currentVersion}`;
    document.body.appendChild(element);
  }

  // 版本对比核心逻辑
  if (!savedVersion || savedVersion !== jsBundleConfig.currentVersion) {
    // 无历史版本/版本不一致：下载新文件，同时更新本地存储的版本号
    const element = document.createElement("script");
    element.src = `${jsBundleConfig.basePath}?v=${jsBundleConfig.currentVersion}`;
    element.onload = () => {
      localStorage.setItem("jqueryBundleVersion", jsBundleConfig.currentVersion);
    };
    document.body.appendChild(element);
  } else {
    // 版本一致：直接请求相同URL，浏览器会自动读取缓存
    createScriptTag();
  }
}

// 兼容不同浏览器的加载事件绑定
if (window.addEventListener) {
  window.addEventListener("load", downloadJs, false);
} else if (window.attachEvent) {
  window.attachEvent("onload", downloadJs);
} else {
  window.onload = downloadJs;
}

关键逻辑说明： #

• 版本号持久化：用localStorage保存已加载过的JS版本号，页面刷新或重新打开时能记住历史版本。
• 版本对比机制：
  • 首次加载或版本号不一致时，下载新文件并更新本地存储的版本号；
  • 版本号一致时，直接请求相同URL——浏览器会根据服务器配置的缓存策略，直接返回本地缓存的文件，不会发起真实的服务器请求。
• 服务器端配合：需要给静态资源设置合理的缓存策略，比如给/Scripts/JQueryBundle设置Cache-Control: public, max-age=31536000（一年有效期），这样版本号不变时，浏览器会长期缓存文件，彻底避免无效请求。

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