我们有一个Angular 6应用程序。它在Nginx上提供服务。SSL是打开的。当我们部署新代码时,大多数新功能都可以正常工作,但有些变化并不适用。例如,如果前端开发人员更新服务连接并部署它,用户必须打开隐身窗口或清除缓存才能看到新功能。哪些类型的更改不会自动更新?为什么它们与其他更改不同?避免这个问题的常见解决方案是什么?
a9wyjsp71#
问题是当一个静态文件被缓存时,它可能会被保存很长一段时间,直到它最终过期。这可能是一个烦恼,如果你对一个网站进行更新,但是,由于文件的缓存版本存储在访问者的浏览器中,他们可能无法看到所做的更改。Cache-busting通过使用唯一的文件版本标识符来告诉浏览器新版本的文件可用,从而解决了浏览器缓存问题。因此,浏览器不会从缓存中检索旧文件,而是向源服务器请求新文件。Angular cli通过为build命令提供--output-hashing标志来解决这个问题。查看官方文档:https://angular.io/cli/build示例(旧版本)
--output-hashing
ng build --prod --aot --output-hashing=all
下面是可以传入--output-hashing的选项
对于angular版本(例如Angular 8,9,10),命令为:
ng build --prod --aot --outputHashing=all
对于最新版本的angular(从angular 11到angular 14),命令将恢复为较旧的格式:
ng build --aot --output-hashing=all
oiopk7p52#
for me adding添加:
当你的应用程序在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文件在每个开发(prod/dev)上该高速缓存的脚本:
"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_巴克_files:删除所有.巴克文件(网络性能)这些sed命令在GNU/BSD/Mac上都可以工作。相关链接:Angular - Prod Build not generating unique hashessed in-place flag that works both on Mac (BSD) and LinuxRE error: illegal byte sequence on Mac OS XInline if shell scriptHow to loop over files in directory and change path and add suffix to filenameIs it possible to build separate CSS file with angular-cli?
vxqlmq5t3#
虽然accepted answer above可以工作,**这个调整应该在angular.json**中进行,在configurations =〉<my-env-name> =〉outputHashing =〉下设置为all(用于生产环境)。简化示例:
angular.json
configurations
<my-env-name>
outputHashing
all
{ "projects": { "<my-project>": { "architect": { "build": { "configurations": { "<my-env-name>": { "outputHashing": "all" } } } } } } }
正如上面提到的,这个配置的可用选项:
*none:不执行哈希*media:只对通过[url]处理的文件添加哈希|文件]-加载程序*bundles:仅将散列添加到输出包*all:向介质和捆绑包添加哈希
3条答案
按热度按时间a9wyjsp71#
问题是当一个静态文件被缓存时,它可能会被保存很长一段时间,直到它最终过期。这可能是一个烦恼,如果你对一个网站进行更新,但是,由于文件的缓存版本存储在访问者的浏览器中,他们可能无法看到所做的更改。
Cache-busting通过使用唯一的文件版本标识符来告诉浏览器新版本的文件可用,从而解决了浏览器缓存问题。因此,浏览器不会从缓存中检索旧文件,而是向源服务器请求新文件。
Angular cli通过为build命令提供
--output-hashing
标志来解决这个问题。查看官方文档:https://angular.io/cli/build
示例(旧版本)
下面是可以传入
--output-hashing
的选项更新
对于angular版本(例如Angular 8,9,10),命令为:
对于最新版本的angular(从angular 11到angular 14),命令将恢复为较旧的格式:
oiopk7p52#
for me adding添加:
当你的应用程序在CDN和一个好的缓存nginx配置之后时,构建命令是不够的。
1-第一件事是删除html文件该高速缓存(nginx):
对于静态文件(js/css...),让缓存工作(网络性能/可用性):
2-保持dev/prod构建完全相同,用于测试目的。最终的build dev命令:
3-我们需要在每个部署客户端浏览器加载所有的javascript文件从服务器而不是该高速缓存,即使部署是一个小更新.就像角有一些错误与此:https://github.com/angular/angular-cli/issues/10641和发生在我身上。
我最后使用了bash的强大功能,这是我使用package.json文件在每个开发(prod/dev)上该高速缓存的脚本:
命令说明:
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_巴克_files:删除所有.巴克文件(网络性能)
这些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?
vxqlmq5t3#
虽然accepted answer above可以工作,**这个调整应该在
angular.json
**中进行,在configurations
=〉<my-env-name>
=〉outputHashing
=〉下设置为all
(用于生产环境)。简化示例:
正如上面提到的,这个配置的可用选项:
*none:不执行哈希
*media:只对通过[url]处理的文件添加哈希|文件]-加载程序
*bundles:仅将散列添加到输出包
*all:向介质和捆绑包添加哈希