在require.js的data-main中如何清除缓存

Question

在require.js的data-main中如何清除缓存

javascriptcachingrequirejsbrowser-cacheamd

43

我正在使用 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>

但现在需要从/获取client.js，而不是从/js获取，因此会出现404错误。

我还尝试添加

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

尝试使用require.config，但它似乎没有任何效果。

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

如何正确地打破require.js data-main脚本缓存的语法？

- Jesse

data-main="/static/code/main.js?git_sha=ae9f10b520" 对我有效。 - Bob Stein

2个回答

-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);break}d=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");

- Alessia

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JBCP · Accepted Answer

你是如何定义 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在下面的评论中指出的那样，您应该对您的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缓存破坏解决方案存在问题。不幸的是，您无法控制可能在您和用户Web浏览器之间的所有代理服务器。其中一些代理服务器可能被不幸地配置为在缓存文件时忽略URL参数。如果发生这种情况，则会向用户传递错误版本的JS文件。

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

baseUrl: "/scripts/buildNumber",

注意baseUrl结尾没有'/'。

你需要使用修改过的require.js来使用后缀解决方案。你可以在这里阅读更多信息：https://dev59.com/rGsy5IYBdhLWcg3wyxCi#21619359

显然，无论哪种情况，你都需要使用某种解决方案来用某种随每次发布而变化的版本号替换 buildNumber。