javascript - Angular 在生产中禁用缓存的部分

Question

我正在开发站点，但每次我将新版本上传到我的服务器时，用户都需要清理那里的缓存才能看到更改，这个问题的解决方案是什么？

我尝试了两种方法来解决这里问题的答案:

第一种方式:

myApp.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

但是这种方式在 ui.bootstrap 及其抛出错误方面存在问题。

第二种方式:

$rootScope.$on("$stateChangeStart", function( event, toState, current ) {

    if (typeof(current) !== 'undefined'){
      $templateCache.remove(current.templateUrl);
    }
})

这不会引发错误，但我不知道这个解决方案是否正确，如果有效，我需要做什么？

Answer 1

这是服务器配置的问题，以及它如何告诉浏览器缓存用作模板部分的 HTML 文件。

了解浏览器缓存

您正在尝试执行 $templateCache.remove(..) 和 $templateCache.removeAll() 这不会起作用，因为模板还没有尚未加载，或者浏览器将使用缓存版本重新加载它们。

您需要检查浏览器中的网络历史记录，以确保服务器正确处理 HTML 请求。发送您期望的用于缓存的 header 设置。对于每个部分，应该有一个 302(未修改)响应。当 HTML 文件发生变化时，服务器应将新的修改后的文件发送给浏览器。

另一个问题是您在服务器上的默认缓存持续时间可能太长。这告诉浏览器应该多久检查一次服务器以发送新版本的 HTML 文件。您可能希望将此持续时间减少到 1 小时。

大多数 Web 服务器都预先配置为假定扩展名为 .html 的文件永远不会更改并且是静态的。所以默认设置是让浏览器尽可能长时间地缓存这些文件。

您可能希望将这些文件重命名为类似.ahtml 的名称，并将其用作您的部分文件名。不应有任何预定义的配置来强制兑现这些文件类型。

了解 $templateCache

这是 AngularJS 中一个非常简单的缓存服务。如果在内存中找不到该 URL，则会从服务器加载它。下次在应用程序运行时需要该部分时，将使用内存版本。此服务器的使用与服务器/浏览器缓存无关。

正确使用模板

最佳做法是创建一个包含应用程序所需的所有部分模板的 JavaScript 文件。此 JS 文件将调用 $templateCache 服务并添加这些模板。这提高了应用程序的启动性能，并消除了处理服务器/浏览器缓存的问题。

有几个 grunt 任务可以做到这一点。

https://www.npmjs.com/package/grunt-angular-templates

https://github.com/karlgoldstein/grunt-html2js

结合这将是一个 JavaScript 压缩器并将所有 JS 合并到一个文件中，您就可以顺利进行了。