javascript - 停止在 Angular.js 中缓存 View

Question

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

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

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

在我清除浏览器缓存之前，我所做的(对 View )的任何更改都不会反射(reflect)出来。

在按 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
}]);