问题描述：
这几天升级公司的一个Angular项目，把Angular更新到最新的10.0.1版本。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 | { "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 模块的名字添加到
1 2 3 4 5 6 7 8 9 10 | "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "allowedCommonJsDependencies": [ "lodash" ] ... } ... }, |
修改如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | "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