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

标签 javascript caching requirejs browser-cache amd

我正在使用 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 添加缓存无效化程序,但我似乎无法弄清楚如何使用上述语法来实现它。

我尝试了一些变体:

<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 数据主脚本缓存的正确语法是什么?

最佳答案

您如何定义您的 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 cache bust 解决方案有问题。遗憾的是,您无法控制可能位于您和您用户的网络浏览器之间的所有代理服务器。不幸的是,这些代理服务器中的一些可能被配置为在缓存文件时忽略 URL 参数。如果发生这种情况,您的 JS 文件的错误版本将交付给您的用户。

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

baseUrl: "/scripts/buildNumber",

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

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

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

关于javascript - 在 require.js data-main 上过期缓存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11088909/

相关文章:

javascript - JSDoc3:如何记录返回函数的 AMD 模块

php - 绕过 W3 Total Cache 创建的页面缓存

javascript - 在 iPhone Phonegap 应用程序上下载图像并本地保存

javascript - 如果表单中出现错误,则提交表单时对话框应保持打开状态

javascript - JS 和 jQuery 事件监听器在页面加载时不起作用

sql-server - 强制 SQL Server 将整个数据库预缓存到内存中

html - 如何强制 Instagram 应用程序内网络浏览器的页面刷新?

javascript - 迁移现有的 RequireJS 应用程序以使用 Webpack

javascript - 服务器端 requirejs 优化 (r.js) 多页站点

javascript - jQuery 自动完成结果到自定义下拉列表(在选择选项标签处)