for some reason all of my html seems to be 100% cached in chrome.
出于某种原因,我的所有html似乎都是100%缓存在chrome中。
I am using angular 1.2 with .net web api 2 project, and my content is served in index.html.
我正在使用带有.net web api 2项目的angular 1.2,我的内容在index.html中提供。
I did not make any cache policy changes yet, but it seems to be caching everything very heavily.
我还没有进行任何缓存策略更改,但它似乎正在大量缓存所有内容。
none of the changes i make (to the views) are reflected until i clear browser cache.
在我清除浏览器缓存之前,我所做的任何更改都没有(对视图)。
I don't see new changes after pressing f5 or after publishing my site to the server and doing f5 on that. I have to either explicitly clear browser cache, or keep console open with "no caching while dev tools are open" setting on.
按f5或将我的站点发布到服务器并执行f5之后,我没有看到新的更改。我必须明确清除浏览器缓存,或者保持控制台打开,并且“开启开发工具时没有缓存”设置。
I want to prevent asking users to clear their browser cache when new versions are deployed.
我想阻止在部署新版本时要求用户清除浏览器缓存。
3 个解决方案
#1
6
Since noone is chiming in, i'll post the solution I implemented, which works, but could be better
既然没有人在喋喋不休,我会发布我实施的解决方案,哪个有效,但可能更好
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)
this works, but I'd prefer to strike a better balance of caching between releases.
这有效,但我更愿意在版本之间实现更好的缓存平衡。
Alternative approach would be to use a build tool such as Grunt, and generate unique filenames for your scripts in production and update links in index.html. This would be the best approach I believe, because full caching would be enabled, and browser would always make the request for new version of files since the names would be unique. (I've also seen people append ?v=666 to files, but from what i've read this is not a reliable approach)
替代方法是使用诸如Grunt之类的构建工具,并为index.html中的生产和更新链接生成脚本的唯一文件名。这将是我认为最好的方法,因为将启用完整缓存,并且浏览器将始终请求新版本的文件,因为名称将是唯一的。 (我也看到人们追加?v = 666到文件,但从我读过的这不是一个可靠的方法)
Also if you're serving content from .Net pages (instead of basic .html) you have an option of using Bundler which does manage tags between releases.
此外,如果您从.Net页面(而不是基本.html)提供内容,您可以选择使用Bundler来管理版本之间的标记。
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular/angular.js")
.Include("~/Scripts/angular/angular-route.js"));
this will result in
这将导致
<script src="/bundles/angular?v=20LMOimhsS0zmHdsbxeBlJ05XNyVXwPaS4nt3KuzemE1"></script>
update
additionally I've also been adding a version parameter in template includes. This prevents caching, but it may prevent caching completely so do some testing if you go that route
另外我还在模板中添加了一个版本参数。这可以防止缓存,但它可能会完全阻止缓存,所以如果你走这条路线就做一些测试
<div data-ng-include=" 'app/import/import-summary.html?v=' + appVersion "></div>
appVersion can be a global variable set in app.js
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
}]);
#2
0
I have found I have the same issue intermittently with my production server as well.
我发现我的生产服务器间歇性地也有同样的问题。
In most instances, 80% of the code that I push to the production server has no problems. However, a new module reference, a new Angular binding, or even the smallest template edit can take several refreshes to actually clear the cache and show the latest updates.
在大多数情况下,我推送到生产服务器的代码中有80%没有问题。但是,新的模块引用,新的Angular绑定,甚至是最小的模板编辑都可以进行多次刷新,以实际清除缓存并显示最新的更新。
I actually wrote a 7 paragraph question slash statement to air my grievances and hoping someone had the same issue as myself. I ended up deleting the question, as I feared it was just my experience.
我实际上写了一个7段的问题斜杠声明来表达我的不满,并希望有人和我一样有同样的问题。我最后删除了这个问题,因为我担心这只是我的经历。
I have found a weird workaround, where if I host the site from the terminal by running either 'npm start' or 'http-server' modules on my machine, the constant update between both my development and production server will force the browser to acknowledge both environments and cause the change to either appear in one environment or both.
我找到了一个奇怪的解决方法,如果我通过在我的机器上运行'npm start'或'http-server'模块从终端托管网站,我的开发和生产服务器之间的不断更新将迫使浏览器确认两种环境都会导致更改出现在一个环境中或两者都出现。
In my opinion, there are two types of developers: modular and line-by-line asynchronous.
在我看来,有两种类型的开发人员:模块化和逐行异步。
Modular programmers code in large chunks and then upload the entire code effort which minimizes heavy caching.
模块化程序员以大块编码,然后上传整个代码工作量,从而最大限度地减少繁重的缓存。
Asynchronous programmers like to view every single change they make by coding a couple of lines, uploading the small changes and then refreshing the browser to see their latest nuance of progression.
异步程序员喜欢通过编写几行来查看他们所做的每一个更改,上传小的更改然后刷新浏览器以查看他们最新的进展细节。
I am definitely an asynchronous programmer. I find it allows me to catch smaller mistakes as well as understand the inner workings of whichever language I am using.
我绝对是一个异步程序员。我发现它可以让我捕捉到更小的错误,并了解我使用的任何语言的内部运作方式。
Is it safe to say that asynchronous programming leads to heavy browser caching, which is leading to the problem we are all having on this particular question?
可以肯定地说,异步编程导致了大量的浏览器缓存,这导致了我们在这个特定问题上遇到的问题吗?
Glad to share in your blind frustration, as this has been a huge problem of mine, ever since I've been dabbling in Angular.
很高兴分享你的盲目沮丧,因为这一直是我的一个巨大的问题,因为我一直在涉及Angular。
It may at first glance appear to be a small issue, however as you are learning Angular, you may spend hours or even a couple of days recoding the same 30 lines because there was no change in your browser. This is a very dangerous, invisible issue which can lead to large amounts of time being chipped away for development time.
它可能乍一看似乎是一个小问题,但是当您正在学习Angular时,您可能需要花费数小时甚至几天来重新编码相同的30行,因为您的浏览器没有任何变化。这是一个非常危险的,无形的问题,可能导致大量的时间被削减开发时间。
#3
-3
May be its just in your browser case. For development purpose you can use chrome's incognito browser. Use ctrl+shift+N after opening chome, it'll open incognito browser.
可能只是在你的浏览器案例中。出于开发目的,您可以使用chrome的隐身浏览器。打开chome后使用ctrl + shift + N,它将打开隐身浏览器。
#1
6
Since noone is chiming in, i'll post the solution I implemented, which works, but could be better
既然没有人在喋喋不休,我会发布我实施的解决方案,哪个有效,但可能更好
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)
this works, but I'd prefer to strike a better balance of caching between releases.
这有效,但我更愿意在版本之间实现更好的缓存平衡。
Alternative approach would be to use a build tool such as Grunt, and generate unique filenames for your scripts in production and update links in index.html. This would be the best approach I believe, because full caching would be enabled, and browser would always make the request for new version of files since the names would be unique. (I've also seen people append ?v=666 to files, but from what i've read this is not a reliable approach)
替代方法是使用诸如Grunt之类的构建工具,并为index.html中的生产和更新链接生成脚本的唯一文件名。这将是我认为最好的方法,因为将启用完整缓存,并且浏览器将始终请求新版本的文件,因为名称将是唯一的。 (我也看到人们追加?v = 666到文件,但从我读过的这不是一个可靠的方法)
Also if you're serving content from .Net pages (instead of basic .html) you have an option of using Bundler which does manage tags between releases.
此外,如果您从.Net页面(而不是基本.html)提供内容,您可以选择使用Bundler来管理版本之间的标记。
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular/angular.js")
.Include("~/Scripts/angular/angular-route.js"));
this will result in
这将导致
<script src="/bundles/angular?v=20LMOimhsS0zmHdsbxeBlJ05XNyVXwPaS4nt3KuzemE1"></script>
update
additionally I've also been adding a version parameter in template includes. This prevents caching, but it may prevent caching completely so do some testing if you go that route
另外我还在模板中添加了一个版本参数。这可以防止缓存,但它可能会完全阻止缓存,所以如果你走这条路线就做一些测试
<div data-ng-include=" 'app/import/import-summary.html?v=' + appVersion "></div>
appVersion can be a global variable set in app.js
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
}]);
#2
0
I have found I have the same issue intermittently with my production server as well.
我发现我的生产服务器间歇性地也有同样的问题。
In most instances, 80% of the code that I push to the production server has no problems. However, a new module reference, a new Angular binding, or even the smallest template edit can take several refreshes to actually clear the cache and show the latest updates.
在大多数情况下,我推送到生产服务器的代码中有80%没有问题。但是,新的模块引用,新的Angular绑定,甚至是最小的模板编辑都可以进行多次刷新,以实际清除缓存并显示最新的更新。
I actually wrote a 7 paragraph question slash statement to air my grievances and hoping someone had the same issue as myself. I ended up deleting the question, as I feared it was just my experience.
我实际上写了一个7段的问题斜杠声明来表达我的不满,并希望有人和我一样有同样的问题。我最后删除了这个问题,因为我担心这只是我的经历。
I have found a weird workaround, where if I host the site from the terminal by running either 'npm start' or 'http-server' modules on my machine, the constant update between both my development and production server will force the browser to acknowledge both environments and cause the change to either appear in one environment or both.
我找到了一个奇怪的解决方法,如果我通过在我的机器上运行'npm start'或'http-server'模块从终端托管网站,我的开发和生产服务器之间的不断更新将迫使浏览器确认两种环境都会导致更改出现在一个环境中或两者都出现。
In my opinion, there are two types of developers: modular and line-by-line asynchronous.
在我看来,有两种类型的开发人员:模块化和逐行异步。
Modular programmers code in large chunks and then upload the entire code effort which minimizes heavy caching.
模块化程序员以大块编码,然后上传整个代码工作量,从而最大限度地减少繁重的缓存。
Asynchronous programmers like to view every single change they make by coding a couple of lines, uploading the small changes and then refreshing the browser to see their latest nuance of progression.
异步程序员喜欢通过编写几行来查看他们所做的每一个更改,上传小的更改然后刷新浏览器以查看他们最新的进展细节。
I am definitely an asynchronous programmer. I find it allows me to catch smaller mistakes as well as understand the inner workings of whichever language I am using.
我绝对是一个异步程序员。我发现它可以让我捕捉到更小的错误,并了解我使用的任何语言的内部运作方式。
Is it safe to say that asynchronous programming leads to heavy browser caching, which is leading to the problem we are all having on this particular question?
可以肯定地说,异步编程导致了大量的浏览器缓存,这导致了我们在这个特定问题上遇到的问题吗?
Glad to share in your blind frustration, as this has been a huge problem of mine, ever since I've been dabbling in Angular.
很高兴分享你的盲目沮丧,因为这一直是我的一个巨大的问题,因为我一直在涉及Angular。
It may at first glance appear to be a small issue, however as you are learning Angular, you may spend hours or even a couple of days recoding the same 30 lines because there was no change in your browser. This is a very dangerous, invisible issue which can lead to large amounts of time being chipped away for development time.
它可能乍一看似乎是一个小问题,但是当您正在学习Angular时,您可能需要花费数小时甚至几天来重新编码相同的30行,因为您的浏览器没有任何变化。这是一个非常危险的,无形的问题,可能导致大量的时间被削减开发时间。
#3
-3
May be its just in your browser case. For development purpose you can use chrome's incognito browser. Use ctrl+shift+N after opening chome, it'll open incognito browser.
可能只是在你的浏览器案例中。出于开发目的,您可以使用chrome的隐身浏览器。打开chome后使用ctrl + shift + N,它将打开隐身浏览器。