使 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>

这一切都很好打包后，但我遇到了很多问题，其中 chrome &mobile safari 保留 client.js 的缓存版本.我想向 client.js 添加一个 cachebuster，但我似乎无法弄清楚如何使用上述语法来做到这一点.

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.

我尝试了一些变体:

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

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

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

我也尝试添加

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

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

to require.config, but it appears to have no effect.

我也尝试向 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 缓存 bust 解决方案有问题.不幸的是，您无法控制您和用户的 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.

我建议在您的 Javascript 文件名请求中使用 buildNumber ，例如 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 的修改版本才能使用 postfix 解决方案.您可以在此处阅读更多相关信息: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屋！