Question

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

首先我忽略了它，因为我认为它是我的浏览器。但是当我稍后检查时，发现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

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

角度应用程序大小突然增加

1 个答案: