如何解決 Angular 被瀏覽器 cache ?

来源:转载

浏览器为了效能,会对 HTML、JavaScript 与 CSS 做 cache,其本意是好的,但对于 developer 来说,却担心更新到 production server 后,user 仍然是执行到被浏览器 cache 的 HTML、JavaScript 与 CSS,Angular 该如何解决这个问题呢 ?


Version

Angular 5.1


HTML

在经过 Angular CLI 的 ng build --prod 之后,会在 dist 目录下产生整个 Angular 专案唯一的 index.html ,担心的是 user 执行到被浏览器 cache 的 index.html 。


新增 HTML Meta
src/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NG5HttpClient</title>
<meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0, must-revalidate">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>


第 6 行



<meta http-equiv="Cache-Control" content="no-cache, no-store, max-age=0, must-revalidate">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />


新增这 3 行 <meta> 。


在 HTTP 1.1 规格中,有 Cache-Control 可设定浏览器的 cache。


在 HTTP 1.0 规格中,有 Pragma 可设定浏览器的 cache。


而 HTTP 1.0 与 1.1 都有 Expires 设定 cache 内容的有效期限,但在 1.1 的规格中, Cache-Control 的优先权是大于 Expires ,因此可以规划出以上通用设定,就可避免 index.html 被浏览器 cache。



开启 src 目录下的 index.html
加入 3 行 <meta>
编译 Angular

~/MyProject $ ng build --prod


要放进 production server 的 code,最后会加上 --prod 。



编译后的 index.html

经过 ng build --prod 之后的 HTML、JavaScript 与 CSS 都会放在 dist 目录下。



选择 dist 目录
选择 index.html ,这是最后会上 production server 的 index.html
我们刚刚加入的 3 个 <meta> 都还留着,因此不用每次编译就修改 index.html

只要改一次 src/index.html 的 <meta> ,之后就不用担心 HTML 被浏览器 cache 的问题


JavaScript

JavaScript 若档名相同,浏览器会优先选择使用本地的 cache 增加效能,Angular CLI 在每次 ng build --prod 之后,会重新以乱数命名 JavaScript 档案,因此浏览器只能重新对 server 抓 *.js ,而不会採用浏览器的 cache。



所有经过 ng build --prod 所 bundle 的 JavaScript 都经过乱数改掉档名,因此浏览器一定会再跟 server 要新的 JavaScript。



Angular CLI 会帮我们将所引用的 JavaScript 一併改名。


CSS

CSS 若档名相同,浏览器会优先选择使用本地的 cache 增加效能,Angular CLI 在每次 ng build --prod 之后,会重新以乱数命名 CSS 档案,因此浏览器只能重新对 server 抓 *.css ,而不会採用浏览器的 cache。



所有经过 ng build --prod 所 bundle 的 CSS 都经过乱数改掉档名,因此浏览器一定会再跟 server 要新的 CSS。



Angular CLI 会帮我们将所引用的 CSS 一併改名。


Conclusion
在开发阶段时,完全不用担心 HTML、JavaScript 与 CSS 被浏览器 cache 问题,Angular CLI 内建的 web server 已经帮我们处理
由于 JavaScript 并没有提供 <meta> 机制,因此若将 JavaScript 独立于 HTML,就必须面临 JavaScript 可能被浏览器 cache 的问题,Angular CLI 已经帮我们处理了 JavaScript 与 CSS,我们唯一需要处理的只剩下 HTML 部分,所幸 HTML 部分可简单的用 <meta> 处理即可
Reference

Poy Chang , 在 Angular 网站中取消浏览器快取功能


分享给朋友:
您可能感兴趣的文章:
随机阅读: