代码之家 › 专栏 › 技术社区 › andreas

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

angular-cli typescript angular

andreas · 技术社区 · 7 年前

我目前正在开发一个角度应用程序。在某些时候,我注意到每个应用程序都会刷新(当使用 ng serve )时间越来越长。目前,在我看到浏览器(Chrome、测试过的Firefox和Safari)的变化之前,可能需要10秒钟的时间。

main.js 高达27MB。我做过其他更大的项目,从来没有过这样的问题。我也不明白这怎么会发生。即使 ng build --prod 输出仍然超过8MB,这在我看来太大了。

当然,我可以开始使用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类),这不应该是错误的。

1 回复 | 直到 7 年前

andreas 7 年前

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

以下几点很重要:

angular.json :

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

styles.scss ,就我而言:

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

之前,我在这里导入了整个引导scss文件。问题是Angular CLI(出于某种原因)多次导入整个引导,事实上每次组件SCS导入my main.scss .

产生的差异:

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

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

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