部署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://*.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://*.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"
                }
              ]
            }