在require.js data-main上过期缓存

Question

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

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

这一切都适用于前后包装,但我遇到了很多问题,其中chrome和mobile safari持有client.js的缓存版本.我想为client.js添加一个缓存器,但我似乎无法弄清楚如何使用上面的语法来实现它.

我尝试了一些变化:

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

但现在需要尝试从而获取client.js /,而不是/js404s.

我也尝试过添加

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

到require.config,但似乎没有效果.

我也尝试添加相同的值app.build.js,但当它在那里时,r.js不再连接我的js文件,只是uglifies它们.

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

Answer 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"的对象.

UPDATE

正如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文件的错误版本将传递给您的用户.

我建议buildNumber 在你的Javascript文件名请求中使用a ,如buildNumber.myModule.js(prefix)或myModule.buildNumber.js(postfix).您可以通过修改baseUrl来使用前缀样式:

baseUrl: "/scripts/buildNumber",

注意baseUrl末尾缺少'/'.

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

显然,在任何一种情况下,您都希望使用某种解决方案来替换buildNumber随每个版本更改的某种类型的版本号.