requirejs data-main 上的过期缓存

Posted 2023-02-15

【中文标题】requirejs data-main 上的过期缓存

【英文标题】：Expire cache on require.js data-main

【发布时间】：2012-06-20 18:44:04

【问题描述】：

我正在使用 require.js 和 r.js 来打包我的 AMD 模块。我通过以下语法使用 jquery 和 requirejs：

<script data-main="/js/client" src="/js/external/require-jquery.js"></script>

这一切在打包前后都非常有效，但我经常遇到 chrome 和移动 safari 保留 client.js 的缓存版本的问题。我想在 client.js 中添加一个 cachebuster，但我似乎无法弄清楚如何使用上述语法来完成它。

我尝试了一些变体：

<script data-main="js/client.js?b=busted" src="/js/external/require-jquery.js"></script>

但现在 require 尝试从 / 获取 client.js，而不是 /js，所以它是 404s。

我也试过添加

urlArgs : "bust="+new Date().getTime()

到require.config，但是好像没有效果。

我也尝试将相同的值添加到app.build.js，但是当它在那里时，r.js 不再连接我的 js 文件，只是将它们丑化。

破坏 require.js 数据主脚本缓存的正确语法是什么？

【问题讨论】：

data-main="/static/code/main.js?git_sha=ae9f10b520" 为我工作。

【参考方案1】：

你是如何定义你的 require.config 的？我认为要让它在你导入 require.js 之前生效，你需要这样编码：

<script type="text/javascript">
    var require = 
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+new Date().getTime()
    ;
</script>
<script data-main="app/main" src="/scripts/require.js"></script>

具体来说，在导入 require.js 之前必须构造一个名为 'require' 的对象。

更新

正如 Jesse 在下面的 cmets 中指出的那样，您应该将一些增强功能应用于您的 require 对象以供生产使用。上面的例子是从 RequireJS 文档中抄来的，为了回答这个问题，尽可能少地修改。

以下是生产使用需要考虑的一些事项：

您应该使用开发环境中的内部版本号，而不是使用当前日期时间作为缓存清除变量。这允许您的客户端在版本之间缓存 Javascript，但会导致他们在您进行软件更新时刷新其缓存。 Jesse 还使用 require 的功能来指定依赖项，而不是使用脚本的 data-main 属性。我不知道这是否严格更好，但我认为它看起来更干净。 根据您的需要调整 waitSeconds。我使用了 RequireJS 文档中的示例值，但您应该根据需要调整或省略该值。

因此，如果您应用这些技术，您的代码可能如下所示：

<script type="text/javascript">
    var require = 
        baseUrl: "/scripts/",
        waitSeconds: 15,
        urlArgs : "bust="+buildNumber,
        deps : ['app/main']
    ;
</script>
<script src="/scripts/require.js?bust=buildNumber"></script>

注意，在这种情况下 buildNumber 是服务器提供的值。

更新 2

urlArgs 缓存破坏解决方案有问题。不幸的是，您无法控制您和用户的网络浏览器之间可能存在的所有代理服务器。不幸的是，其中一些代理服务器可能被配置为在缓存文件时忽略 URL 参数。如果发生这种情况，您的 JS 文件的错误版本将交付给您的用户。

我建议在您的 Javascript 文件名请求中使用 buildNumberin，例如 buildNumber.myModule.js（前缀）或 myModule.buildNumber.js（后缀）。可以通过修改baseUrl来使用前缀样式：

baseUrl: "/scripts/buildNumber",

请注意 baseUrl 末尾缺少“/”。

您需要使用修改后的 require.js 版本才能使用后缀解决方案。您可以在此处阅读更多相关信息：https://***.com/a/21619359/1017787

显然，在任何一种情况下，您都希望使用某种解决方案将buildNumber 替换为随每个版本而变化的某种类型的版本号。

【讨论】：

谢谢！这就是我最终解决它的方式，只是忘了回到这里更新。waitSeconds 在我的情况下不是必需的（我认为它默认为 7），我在服务器上设置了我的 bust 变量，所以它会与我的应用程序版本同步。此外，我也将主脚本定义移到了 require 配置中。

所以在我的例子中，require 看起来像这样：require = urlArgs : "b=buildTime", baseUrl : "/js", deps : ['client'] ，而下面的 require 没有 data-main。我还将 cachebuster 放在 require 依赖项上，只是为了彻底。

感谢您的帮助，我不得不清空 Chrome 缓存才能使刷新工作，我想知道为什么这些信息很难找到...

@JBCP 如何将buildNumber 添加到 html 的引导加载程序文件中的 data-main 属性中（而不是在 jsp 中）？

回复：“很遗憾，您无法控制可能位于您和您用户的网络浏览器之间的所有代理服务器。”如果您使用 HTTPS，这不是问题。

【参考方案2】：

这是我的解决方案（紧急情况）：

在require.js中找到如下代码：

开发版

//Join the path parts together, then figure out if baseUrl is needed.
url = syms.join('/');
url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js'));
url = (url.charAt(0) === '/' || url.match(/^[\w\+\.\-]+:/) ? '' : config.baseUrl) + url;

或

生产版

e).join("/"),h=m(d,h))H(h)&&(h=h[0]);a.splice(0,e,h);breakd=a.join("/");d+=b||(/^data\:|\?/.test(d)||c?"":".js");

在.js之后添加?v=x.0

url += (ext || (/^data\:|^blob\:|\?/.test(url) || skipExt ? '' : '.js?v=1.0'));

或

(/^data\:|\?/.test(d)||c?"":".js?v=1.0");