Angular 10 - CommonJS or AMD dependencies can cause optimization bailouts warning

問題描述：
這幾天升級公司的一個Angular項目，把Angular更新到最新的10.0.1版本。

{
    "dependencies": {
    "@angular/animations": "^10.0.1",
    "@angular/cdk": "^10.0.1",
    "@angular/common": "~10.0.1",
    "@angular/compiler": "~10.0.1",
    "@angular/core": "~10.0.1",
    "@angular/forms": "~10.0.1",
    "@angular/material": "^10.0.1",
    "@angular/platform-browser": "~10.0.1",
    "@angular/platform-browser-dynamic": "~10.0.1",
    "@angular/router": "~10.0.1",
    "@feathersjs/authentication-client": "^4.4.3",
    "@feathersjs/client": "^4.4.3",
    "@feathersjs/feathers": "^4.4.3",
    "@feathersjs/rest-client": "^4.4.3",
    "@feathersjs/socketio-client": "^4.4.3",
    "@handsontable/angular": "^2.0.0",
    "@ngtools/webpack": "^10.0.0",
    "@types/socket.io-client": "^1.4.33",
    "angular2-qrcode": "^2.0.3",
    "angularx-flatpickr": "^6.3.1",
    "bootstrap": "^4.5.0",
    "core-js": "^3.6.5",
    "echarts": "^4.8.0",
    "file-saver": "^2.0.2",
    "flatpickr": "^4.6.3",
    "hammerjs": "^2.0.8",
    "handsontable": "6.2.2",
    "jquery": "^3.5.1",
    "mobx": "^5.15.4",
    "mobx-angular": "^4.1.0",
    "moment": "^2.27.0",
    "ng2-dnd": "^5.0.2",
    "ng2-file-upload": "^1.4.0",
    "ng2-flatpickr": "^9.0.0",
    "ngx-bootstrap": "^5.6.1",
    "ngx-echarts": "^5.0.0",
    "ngx-mat-select-search": "^3.0.0",
    "ngx-perfect-scrollbar": "^9.0.0",
    "rxjs": "~6.5.5",
    "sweetalert2": "^9.15.2",
    "trumbowyg": "^2.21.0",
    "tslib": "^2.0.0",
    "xlsx": "^0.16.3",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular-devkit/core": "^10.0.0",
    "@angular/cli": "~10.0.0",
    "@angular/compiler-cli": "~10.0.1",
    "@angular/language-service": "~10.0.1",
    "@angularclass/hmr": "^2.1.3",
    "@types/jasmine": "~3.5.11",
    "@types/jasminewd2": "~2.0.8",
    "@types/node": "~14.0.14",
    "codelyzer": "^5.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.2",
    "typescript": "~3.9.5"
  }
}

升級運行後，一直看到這個警告。

WARNING in XXX.ts depends on moment/locale/zh-cn. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

解決辦法：

配置 CommonJS 依賴項

建議你在 Angular 應用中避免依賴 CommonJS 模塊。對 CommonJS 模塊的依賴會阻止打包器和壓縮器優化你的應用，這會導致更大的打包尺寸。 建議你在整個應用中都使用 ECMAScript 模塊。 欲知詳情，參見爲什麼 CommonJS 會導致更大的打包尺寸。

如果 Angular CLI 檢測到你的瀏覽器端應用依賴了 CommonJS 模塊，就會發出警告。 要禁用這些警告，可以把這些 CommonJS 模塊的名字添加到 angular.json 文件的 build 區的 allowedCommonJsDependencies 選項中。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     ...
   }
   ...
},

修改如下：

"projects": {
  "project-name": {
    ...
    "architect": {
      "build": {
        "builder": "@angular-devkit/build-angular:browser",
        "options": {
          ...
          "allowedCommonJsDependencies": [
            "@angularclass/hmr",
            "moment",
            "moment/locale/zh-cn",
            "jquery",
            "handsontable",
            "@feathersjs/socketio-client",
            "@feathersjs/rest-client",
            "@feathersjs/feathers",
            "@feathersjs/authentication-client",
            "socket.io-client",
            "xlsx",
            "rxjs",
            "pikaday",
            "ng2-flatpickr"
          ],
          ...
        },
      },
    }
  }
},

再次運行就不包警告啦。

參考：angular-10-commonjs-or-amd-dependencies-can-cause-optimization-bailouts