禁用 Sencha 脚本加载器缓存破坏，但仅在开发/调试时

Posted 2023-02-26

【中文标题】禁用 Sencha 脚本加载器缓存破坏，但仅在开发/调试时

【英文标题】：Disable Sencha script loader cache busting but only while developing/debugging

【发布时间】：2015-06-23 01:02:58

【问题描述】：

我正在使用 ExtJS 4.x 和 Sencha Architect 2.2，但这应该与更高版本以及使用 Ext.Loader 类动态加载脚本的任何应用程序相关，包括 Sencha Touch。

默认情况下，Ext.Loader 添加了一个 ?_dc=... 缓存清除参数，以确保将每个脚本的最新版本加载到浏览器中。当部署到生产环境或 beta 测试环境时，这是一件好事，因为它可以确保用户/测试人员在每次部署和更新时都能获得最新的脚本，但对于开发环境来说，这并不是必需的，因为开发人员知道使用浏览器技术像 ctrl+F5 强制重新加载所有脚本。更重要的是，当您在浏览器中重新加载应用程序时，由于断点等会丢失，因此缓存破坏会妨碍调试。

通过在Ext.Loader 配置中将 disableCaching 设置为 false 来禁用缓存破坏。例如：

Ext.Loader.setConfig(
    enabled: true,
    disableCaching: false
);

在这个 sn-p 中，动态加载启用，缓存清除禁用。然而，API 文档here 中描述了其他配置选项。

在 Sencha Architect 中，此代码是在 app.js 中为您生成的，您无法对其进行编辑。 Architect 有一个“项目设置”来启用缓存，但在 2.2 版中它不适用于 ExtJS 4。我认为它在以后的版本中可以正常工作，但它似乎是全有或全无，所以你必须记住将其关闭并重新构建以部署到非开发环境。

我想要的是能够：

解决 Architect 2.2 版中的设置错误 在“生产”中启用缓存破坏，但在开发中不启用，无需 重建我的应用

【参考方案1】：

Ext.Loader.setConfig() 可以使用不同的设置多次调用，并且这些设置被“合并”在一起。对我来说，这在 documentation 中并不清楚，但幸运的是在 source code 中更明显。

源代码还显示了 setConfig 的未记录形式，它采用 name 和 value 而不是配置对象，但由于它未记录，我'将坚持传递这样的对象：

Ext.Loader.setConfig(disableCaching: false);

知道这不会影响在您的应用中其他位置设置的其他 Ext.Loader 配置，您可以在加载 Ext 之后但在调用 Ext.onReady() 之前将此代码anywhere。在 Sencha Architect 中，这可以通过将其放入“JS 资源”中来实现，如 here 所述。

这解决了我的问题的第一部分，但我还想要能够在不重建的情况下关闭缓存破坏，因此我修改了代码以检查“调试”URL 参数，如下所示：

if (Ext.Object.fromQueryString(document.location.search).debug) 
    Ext.Loader.setConfig(disableCaching: false);

现在，当我想调试我的应用时，我可以使用如下所示的 URL：

http://myhost/.../app.html?debug=true

并且缓存清除已关闭。我只是省略了 debug 参数以重新打开它。

【参考方案2】：

如果您使用的是 Sencha 命令，您可以在调试块中换行以禁用缓存破坏，在 app.js 的开头某处

// <debug>
Ext.Loader.setConfig(disableCaching: true);
// </debug>

现在代码将在为生产而构建时被删除。如果您愿意（或需要），您还可以为测试构建配置构建属性以保留调试代码。

【讨论】：

好主意@cpastore84。但是，有时也可以在生产环境中使用调试模式。