停止在 Angular.js 中缓存视图

Question

由于某种原因，我的所有 html 似乎都 100% 缓存在 chrome 中。

我在 .net web api 2 项目中使用 angular 1.2，我的内容在 index.html 中提供。

我还没有对缓存策略进行任何更改，但它似乎正在大量缓存所有内容。

在我清除浏览器缓存之前，我所做的任何更改（对视图）都不会反映。

在按 f5 或将我的网站发布到服务器并在其上执行 f5 后，我没有看到新的更改。我必须明确清除浏览器缓存，或者在“打开开发工具时不缓存”设置保持控制台打开。

我想避免在部署新版本时要求用户清除浏览器缓存。

Answer 1

由于没有人参与，我将发布我实施的解决方案，该解决方案有效，但可能会更好

IIS：

http features > http response headers > set custom headers > Expire Web Content: Immediately
(if you don't see http features, you'll have to add the feature to your iis server)

index.html：

<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta http-equiv="CACHE-CONTROL" content="NO-STORE"> 
(these may cause issues in older versions of IE)

这可行，但我更愿意在版本之间实现更好的缓存平衡。

另一种方法是使用 Grunt 等构建工具，并为生产中的脚本生成唯一的文件名并更新 index.html 中的链接。我相信这将是最好的方法，因为将启用完全缓存，并且浏览器总是会请求新版本的文件，因为名称是唯一的。 （我还看到人们将 ?v=666 附加到文件中，但据我所知，这不是一种可靠的方法）

此外，如果您从 .Net 页面（而不是基本的 .html）提供内容，您可以选择使用 Bundler 来管理版本之间的标签。

bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular/angular.js")
                                                 .Include("~/Scripts/angular/angular-route.js"));

这将导致

<script src="/bundles/angular?v=20LMOimhsS0zmHdsbxeBlJ05XNyVXwPaS4nt3KuzemE1"></script>

更新

此外，我还在模板包含中添加了版本参数。这会阻止缓存，但它可能会完全阻止缓存，所以如果你走那条路，请做一些测试

<div data-ng-include=" 'app/import/import-summary.html?v=' + appVersion "></div>

appVersion 可以是 app.js 中设置的全局变量

app.run(['$route', '$rootScope', function ($route, $rootScope) {
    $rootScope.appVersion = getBuildVersion(); // this can be read from assembly file version or any other place where versions are generated by your build server
}]); 

Answer 2

我发现我的生产服务器也间歇性地遇到同样的问题。

在大多数情况下，我推送到生产服务器的 80% 的代码都没有问题。然而，一个新的模块引用、一个新的 Angular 绑定，甚至是最小的模板编辑都可能需要多次刷新才能真正清除缓存并显示最新的更新。

我实际上写了一个 7 段的问题斜线陈述来表达我的不满，并希望有人和我有同样的问题。我最终删除了这个问题，因为我担心这只是我的经验。

我发现了一个奇怪的解决方法，如果我通过在我的机器上运行“npm start”或“http-server”模块从终端托管站点，我的开发和生产服务器之间的不断更新将强制浏览器确认两种环境并导致更改出现在一个环境或两者中。

在我看来，有两种类型的开发人员：模块化和逐行异步。

模块化程序员大块编写代码，然后上传整个代码工作，从而最大限度地减少大量缓存。

异步程序员喜欢通过编写几行代码来查看他们所做的每一个更改，上传小的更改，然后刷新浏览器以查看他们最新的进展细微差别。

我绝对是一个异步程序员。我发现它可以让我发现较小的错误并了解我使用的任何一种语言的内部工作原理。

可以肯定地说异步编程会导致浏览器缓存过多，从而导致我们在这个特定问题上遇到的问题吗？

很高兴分享你盲目的挫败感，因为自从我涉足 Angular 以来，这一直是我的一个大问题。

乍一看，这似乎是一个小问题，但是当您学习 Angular 时，您可能会花费数小时甚至几天的时间来重新编写相同的 30 行代码，因为您的浏览器没有任何变化。这是一个非常危险且无形的问题，可能会导致大量时间被浪费在开发时间上。