时间戳

首页 > 解决方案 > Angular 应用程序大小突然增加

angular - Angular 应用程序大小突然增加

问题描述

我目前正在开发一个 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 类），这不应该是错误的。

标签： angulartypescriptangular-cli

解决方案

在这种情况下，我集成 Bootstrap 的方式是错误的。我按照如何在 Angular 中使用带有 SASS 的 Bootstrap 4 中的答案中的说明进行操作，并且能够解决我的问题。

以下几点很重要：

导入scss，而不是css angular.json：

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

在我的情况下，只导入非常必要的文件styles.scss：

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

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

产生的差异：

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

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

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

推荐阅读