RequireJS缓存JS文件问题及路径异常技术求助

我刚好碰到过类似的RequireJS缓存和路径混淆的问题，给你拆解下根源和对应的解决方案：

问题根源分析 #

1. 模块映射缓存：RequireJS会在浏览器内存中缓存模块ID到文件路径的映射关系。你之前用bust=v18时，可能某次配置错误（比如text_contrast的路径没写./vendors/），导致浏览器缓存了错误的映射。后来即使你修正了paths配置，RequireJS还是会用旧的映射去请求文件，加上时间戳只是改变了URL参数，并没有更新内部的路径映射，所以会出现/static/main/js/text_contrast.js?xxx的404错误。
2. 时间戳缓存策略的弊端：用+(new Date()).getTime()虽然能强制刷新缓存，但每次请求的URL都不一样，浏览器完全无法缓存静态资源，会大幅增加服务器压力和页面加载时间，这不是最优方案。

具体解决方案 #

1. 清除RequireJS内部的旧模块缓存 #

在RequireJS配置完成后，主动清除可能存在错误映射的模块缓存，让RequireJS重新解析路径：

function requireConfig(urlArgs) {
  requirejs.config({
    // 你的原有配置...
    paths: {
      'text_contrast': './vendors/text_contrast', // 确保这个路径是正确的
      // 其他模块...
    }
  });

  // 清除text_contrast的旧缓存映射
  if (requirejs.defined('text_contrast')) {
    requirejs.undef('text_contrast');
  }
}

这样用户加载新页面时，RequireJS会重新根据正确的paths配置生成文件路径，而不是用之前缓存的错误映射。

2. 改用版本号绑定的缓存 bust 策略 #

放弃时间戳，改用部署版本号作为urlArgs的参数，比如每次部署更新版本号（v18→v19→v20）：

requireConfig("bust=v19"); // 每次部署代码时手动/自动更新这个版本号

这种方式的好处是：同一个版本的JS文件会被浏览器缓存，只有部署新版本时才会请求新的URL，既解决了缓存问题，又不会浪费缓存资源。

3. 服务器端配合设置缓存头 #

• 对于页面中的RequireJS配置脚本（也就是嵌入在HTML里的<script>代码），设置Cache-Control: no-cache, no-store, must-revalidate，确保浏览器每次都获取最新的配置，不会缓存旧的错误配置。
• 对于静态JS文件（比如require.js、vendors/text_contrast.js等），设置Cache-Control: max-age=31536000（缓存一年），因为我们已经通过版本号控制更新，不用担心缓存过期问题。

4. 进阶：文件名加版本号（推荐长期方案） #

如果有构建工具（比如Webpack、Gulp）支持，最好把版本号直接加到文件名里，比如text_contrast.v19.js，然后修改paths配置：

paths: {
  'text_contrast': './vendors/text_contrast.v19'
}

这种方式比urlArgs更可靠，因为浏览器会把不同文件名当作完全不同的资源，彻底避免缓存混淆的问题，同时还能享受浏览器的长期缓存。

修改后的完整代码示例 #

<script src="{% static 'main/js/require.js' %}"></script>
<script>
function requireConfig(urlArgs) {
  requirejs.config({
    baseUrl: '/static/main/js/',
    urlArgs: urlArgs,
    waitSeconds: 15,
    packages: [{
      name: 'moment',
      location: '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0',
      main: 'moment'
    }],
    paths: {
      'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min',
      'jquery_ui': '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min',
      'text_contrast': './vendors/text_contrast',
    },
    shim: {
      'jquery_ui': { deps: ['jquery'] },
      'text_contrast': { exports: 'hex' },
    }
  });

  // 清除旧模块缓存，避免路径映射错误
  if (requirejs.defined('text_contrast')) {
    requirejs.undef('text_contrast');
  }
}
</script>
<script type="text/javascript">
// 用部署版本号作为缓存bust参数
requireConfig("bust=v19");
require(['platform/init'], function (m) {
  m.init({
    debug: {{ debug|yesno:"true,false" }},
  });
});
</script>

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