部署Angular 8应用程序后的缓存清除
我有一个angular 8应用程序,在部署之后,我经常收到最终用户的抱怨,他们看不到新功能.我是否需要合并缓存清除.经过一番谷歌搜索后,我看到了以下命令
I have an angular 8 application and very often after deployment I get complains from end users that they are unable to see the new features. Do I need to incorporate cache busting. After a bit of googling i saw the following command
ng build --output-hashing=all
我的问题是ng使用角度8 cli构建--prod是否考虑了缓存清除,还是我需要在部署步骤中添加以下命令?我也想知道如何测试
My question here is does ng build --prod using the angular 8 cli take into consideration cache busting or do I need to add the following command in my deployment step. I would also like to know how do i test it
我的angular.json
My angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"quickapp": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "css"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"src/app/assets/styles/components/buttons.css",
"src/app/assets/styles/components/forms.css",
"src/app/assets/styles/components/inputs.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.js",
"./node_modules/bootstrap-toggle/js/bootstrap-toggle.js",
"./node_modules/bootstrap-select/dist/js/bootstrap-select.js",
"./node_modules/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
"./node_modules/moment/moment.js",
"./src/app/assets/scripts/drive-js.js",
"./src/app/assets/scripts/external-js.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "400kb"
}
]
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "quickapp:build"
},
"configurations": {
"production": {
"browserTarget": "quickapp:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "quickapp:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "quickapp:serve"
},
"configurations": {
"production": {
"devServerTarget": "quickapp:serve:production"
}
}
}
}
}},
"defaultProject": "quickapp"
}
如您在 angular.json
中所见,默认情况下已启用输出哈希.问题可能是您的用户正在缓存index.html文件,因此他不知道新的块.对于未按角度散列"的高速缓存的静态文件,这也可能是一个问题.参见> https://stackoverflow.com/Questions/728616/disable-cache-for-some-images
As you can see in angular.json
output hashing is enabled by default. The problem might be that your user is caching index.html file and thus he is not aware of the new chunks.
This might be also a problem with cached static files that are not "hashed" by angular. See https://stackoverflow.com/Questions/728616/disable-cache-for-some-images
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all", <---- enabled by default
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}