Angular 应用程序大小突然增加

Question

我目前正在开发一个 Angular 应用程序。在某些时候，我注意到每次应用程序刷新(使用 ng serve 应用更改时)需要的时间越来越长。目前，在我看到浏览器(Chrome、经过测试的 Firefox 和 Safari)中的变化之前，最多可能需要 10 秒。

首先我忽略了它，因为我认为它是我的浏览器。但是当我后来检查时，我注意到 main.js 的开发规模高达 27 MB。我做过其他更大的项目，从来没有遇到过这样的问题。我也不明白这怎么会发生。即使是 ng build --prod输出仍然超过 8 MB，这在我看来太大了。

当然我可以开始使用 git 回滚，但我希望可能有更好的方法来确定这个文件大小爆炸的原因？我希望有人能给我一些提示，从哪里开始。

这是ng version输出:

Angular CLI: 7.0.6
Node: 8.11.2
OS: darwin x64
Angular: 7.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.10.6
@angular-devkit/build-angular      0.10.6
@angular-devkit/build-ng-packagr   0.10.6
@angular-devkit/build-optimizer    0.10.6
@angular-devkit/build-webpack      0.10.6
@angular-devkit/core               7.0.6
@angular-devkit/schematics         7.0.6
@angular/cli                       7.0.6
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.0.6
@schematics/angular                7.0.6
@schematics/update                 0.10.6
ng-packagr                         4.4.0
rxjs                               6.3.3
typescript                         3.1.6
webpack                            4.19.1

这是我目前的 package.json :

{
  "name": "website",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.1.0",
    "@angular/common": "^7.1.0",
    "@angular/compiler": "^7.1.0",
    "@angular/core": "^7.1.0",
    "@angular/forms": "^7.1.0",
    "@angular/http": "^7.1.0",
    "@angular/platform-browser": "^7.1.0",
    "@angular/platform-browser-dynamic": "^7.1.0",
    "@angular/router": "^7.1.0",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/chart.js": "^2.7.40",
    "bootstrap": "^4.1.3",
    "chart.js": "^2.7.3",
    "core-js": "^2.5.4",
    "ionicons": "^4.4.7",
    "json2typescript": "^1.0.6",
    "moment": "^2.22.2",
    "ngx-infinite-scroll": "^6.0.1",
    "ngx-moment": "^3.2.0",
    "ngx-swiper-wrapper": "^7.1.0",
    "rxjs": "~6.3.3",
    "swiper": "^4.4.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.10.6",
    "@angular-devkit/build-ng-packagr": "^0.10.6",
    "@angular/cli": "^7.0.6",
    "@angular/compiler-cli": "^7.1.0",
    "@angular/language-service": "^7.1.0",
    "@types/jasmine": "^3.3.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^10.12.10",
    "codelyzer": "^4.5.0",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "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",
    "ng-packagr": "^4.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tsickle": "^0.34.0",
    "tslib": "^1.9.0",
    "tslint": "^5.11.0",
    "typescript": "^3.1.6"
  }
}

还有一件事:

我已将部分代码库移至一个附加模块(最终应该是一个单独的 NPM 包)。我不得不承认我是第一次这样做，但是由于这部分很小(没有 GUI，只有 TypeScript 类)，这不应该是错误的。

Answer 1

在这种情况下，我集成 Bootstrap 的方式是错误的。我按照 How to use Bootstrap 4 with SASS in Angular 中的答案的指示，能够解决我的问题。

以下几点很重要:

导入 scss，而不是 angular.json 中的 css:

"styles": [
  "node_modules/bootstrap/scss/bootstrap.scss"
]

仅在 styles.scss 中导入非常必要的文件，在我的情况下:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

之前，我在这里导入了整个 Bootstrap scss 文件。问题是 Angular CLI(出于某种原因)多次导入整个 Bootstrap，实际上每次当组件 scss 导入我的 main.scss 时。

产生的差异:

在下表中，我显示了应用修复之前和之后文件大小的差异。有人可以说，差异是疯狂的:

Command          |  before   |  after
---------------------------------------
ng build         |  27.1 MB  |  2.87 MB
ng build --prod  |   8.1 MB  |  1.54 MB

我希望我可以帮助其他有类似问题的人。