在require.js data-main上过期缓存 [英] Expire cache on require.js data-main

问题描述

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

I'm using require.js and r.js to package my AMD modules. I'm using jquery & requirejs via the following syntax:

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

这一切都很有效邮政包装，但我遇到了很多问题，铬和&移动safari持有client.js的缓存版本。我想为client.js添加一个缓存器，但我似乎无法弄清楚如何使用上面的语法来实现它。

This all works great pre & post packaging, but I run into issues a lot where chrome & mobile safari hold on to the cached version of client.js. I'd like to add a cachebuster to client.js, but I can't seem to figure out how to do it using the above syntax.

我尝试了一些变化of：

I tried some variations of:

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

但现在需要尝试从 / ，而不是 / js ，所以它是404s。

but now require tries to get client.js from /, not /js, so it 404s.

我也试过添加

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

到 require.config ，但似乎没有效果。

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

I also tried adding the same value to app.build.js, but when it's in there, r.js no longer concatenates my js files, just uglifies them.

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

What is the proper syntax to bust a require.js data-main script cache?

推荐答案

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

How are you defining your require.config? I think for it to take effect before you import require.js, you need to code it like this:

<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'的对象。

Specifically, a an object named 'require' must be constructed before you import require.js.

更新

正如Jesse在下面的评论中指出的那样，有一些增强功能您应该将您的require {}对象应用于生产用途。以上示例来自RequireJS文档，并尽可能少地修改以回答此问题。

As Jesse points out in the comments below, there are a few enhancements you should apply to your require{} object for production use. The above example is cribbed from the RequireJS documentation and modified as little as possible to answer this question.

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

Here are a few things to consider for production use:

• 您应该使用开发环境中的内部版本号，而不是使用当前日期时间作为缓存清除变量。这允许您的客户端在版本之间缓存Javascript，但是每当您进行软件更新时，它们都会刷新它们的缓存。


• Jesse还使用require {}的能力来指定依赖项使用脚本的data-main属性。我不知道这是否严格更好，但我认为它看起来更干净。


• 根据您的需要调整waitSeconds。我使用了RequireJS文档中的示例值，但您应该根据需要调整值或省略它。

• Instead of using the current date-time as your cache-busting variable, you should use a build number from your development environment. This allows your clients to cache the Javascript between releases but will cause them to refresh their cache whenever you do a software update.
• Jesse also uses the require{}'s ability to specify dependencies instead of using the data-main attribute of the script. I don't know if that is strictly better, but I think it is cleaner looking.
• Adjust the waitSeconds based on your needs. I used the example value from the RequireJS documentation, but you should adjust the value or omit it, based on your needs.

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

So if you apply these techniques, your code might look like:

<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}}是服务器提供的值。

Note, in this case {{buildNumber}} is a value supplied by the server.

更新2

urlArgs缓存清除解决方案存在问题。遗憾的是，您无法控制可能位于您和用户的Web浏览器之间的所有代理服务器。遗憾的是，其中一些代理服务器配置为在缓存文件时忽略URL参数。如果发生这种情况，您的JS文件的错误版本将传递给您的用户。

The urlArgs cache bust solution has problems. Unfortunately you cannot control all proxy servers that might be between you and your user's web browser. Some of these proxy servers can be unfortunately configured to ignore URL parameters when caching files. If this happens, the wrong version of your JS file will be delivered to your user.

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

I would recommend using a buildNumber in your Javascript filename request, like buildNumber.myModule.js (prefix) or myModule.buildNumber.js (postfix). You can use the prefix style by modifying the baseUrl:

baseUrl: "/scripts/buildNumber",

请注意baseUrl末尾没有'/'。

Note the lack of a '/' at the end of the baseUrl.

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

You will need to use a modified version of require.js to use the postfix solution. You can read more about this here: https://stackoverflow.com/a/21619359/1017787

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

Obviously in either case you will want to use some solution to replace buildNumber with some type of version number that changes with each release.

这篇关于在require.js data-main上过期缓存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！