Question

我们有一个Angular 6应用程序。它在Nginx上投放。并且SSL已启用。

当我们部署新代码时，大多数新功能都可以正常工作，但不能进行某些更改。例如，如果前端开发人员更新并部署服务连接，则用户必须打开隐身窗口或清除缓存以查看新功能。

哪些类型的更改不会自动更新？他们为什么与众不同？

避免该问题的常见解决方案是什么？

Answer 1

对我来说补充：

    ng build --aot --output-hashing=all

仅当您拥有应用程序时，对构建命令的操作不够 CDN和良好的缓存Nginx配置后面。

1-第一件事情是删除html文件（nginx）的缓存：

    location ~ \.(html)$ {
        add_header Pragma "no-cache";
        add_header Cache-Control "no-store";
        add_header strict-transport-security "max-age=31536000";
        add_header X-Frame-Options "SAMEORIGIN";
        try_files $uri $uri/ /index.html;
    }

对于静态文件（js / css ...），缓存保持工作状态（网络性能/可用性）：

    location ~ \.(css|htc|less|js|js2|js3|js4)$ {
        expires 31536000s;
        add_header Pragma "public";
        add_header Cache-Control "max-age=31536000, public";
        try_files $uri $uri/ /index.html;
    }

2-出于测试目的，将dev / prod构建完全相同。最终的build dev命令：

    ng build --env=dev --aot=true --output-hashing=all --extract-css=true

3-我们需要在每次部署时客户端浏览器从服务器而不是从缓存加载所有javascript文件，即使部署是次要更新。就像棱角形有一些错误： https://github.com/angular/angular-cli/issues/10641 发生在我身上。

我结束了使用bash的功能，这是我杀死缓存的脚本在每个使用package.json文件的开发（产品/开发）中：

"scripts": {
 ...
    "deploy_dev": "ng build --env=dev --aot=true --output-hashing=all --extract-css=true && npm run add_date",
    "deploy_prd": "ng build --prod && npm run add_date",
    "add_date": "npm run add_date_js && npm run add_date_css && npm run rm_bak_files",
    "add_date_js": "for i in dist/*; do if [ -f $i ]; then LC_ALL=C sed -i.bak 's:js\":js?'$(date +%H%M%m%d%y)'\":g' $i; fi done",
    "add_date_css": "sed -i.bak 's:css\":css?'$(date +%H%M%m%d%y)'\":g' dist/index.html",
    "rm_bak_files": "find dist -name '*.bak' -exec rm -Rf {} \\;"
},

命令说明：
add_date_js：查找并替换为带有“ js？”的所有文件“ js”？{date +％H％M％m％d％y}”
add_date_css：在dist / index.html“ css”中查找并替换为“ css？{date +％H％M％m％d％y}”“
rm_bak_files：删除所有.bak文件（网络性能）

这些sed命令在GNU / BSD / Mac上均可使用。

链接：
Angular - Prod Build not generating unique hashes
sed in-place flag that works both on Mac (BSD) and Linux
RE error: illegal byte sequence on Mac OS X
Inline if shell script
How to loop over files in directory and change path and add suffix to filename
Is it possible to build separate CSS file with angular-cli?

Answer 2

问题是当静态文件被缓存时，它可以存储很长的时间，直到它到期。但是，如果您对网站进行更新，这可能会很烦人，因为文件的缓存版本存储在访问者的浏览器中，因此他们可能看不到所做的更改。

Cache-busting通过使用唯一的文件版本标识符来告知浏览器文件的新版本可用，从而解决了浏览器缓存问题。因此，浏览器不会从缓存中检索旧文件，而是会向原始服务器请求新文件。

Angular cli通过为构建命令提供--output-hashing标志来解决此问题。

检查官方文档：https://angular.io/cli/build

示例

ng build --aot --output-hashing=all

以下是您可以在--output-hashing中传递的选项

无：未执行哈希处理
media：仅将散列添加到通过[url | file] -loaders处理的文件中
捆绑包：仅将哈希添加到输出捆绑包
全部：将哈希添加到媒体和分发包

Answer 3

在accepted answer above可以正常工作的同时，应在angular.json => configurations => {{1 }} =>设置为<my-env-name>（用于生产环境）。

简化示例：

outputHashing

并且如所述帖子中所述，此配置的可用选项：

无：未执行哈希处理

媒体：仅将哈希添加到通过[url | file] -loaders处理的文件

捆绑包：仅将哈希添加到输出捆绑包

全部：向媒体和分发包添加哈希

新部署后，Angular应用必须清除缓存

3 个答案: