Angular application size suddenly increasing

Question

I am currently developing an Angular application. At some point, I noticed that each app refresh (when applying changes using ng serve) takes longer and longer. At the moment it can take up to 10 seconds until I see the changes in the browser (Chrome, tested Firefox and Safari as well).

First I ignored it because I thought it was my browser. But when I checked later I noticed that the development size of main.js is at a whopping 27 MB. I have made other much larger projects and never had issues like that. I also don't understand how this could happen. Even with ng build --prod the output is still over 8 MB, which is way too large in my eyes.

Of course I could start rolling back using git, but I hope there might be a better method to determine the cause of this file size explosion? I hope somebody can give me some hints where to start at.

This is the ng versionoutput:

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

This my current 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"
  }
}

One more thing:

I have moved some part of the code base to an additional module (which is supposed to be a seperate NPM package in the end). I have to admit that I have done this for the first time, but as this part is quite small (no GUI, just TypeScript classes), this should not be at fault.

Answer 1

In this case, my way of integrating Bootstrap was at fault. I followed the instruction from the answer in How to use Bootstrap 4 with SASS in Angular and was able to resolve my issues.

The following points were important:

Import the scss, not the css in angular.json:

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

Only import the very necessary files in styles.scss, in my case:

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

Before, I imported the whole Bootstrap scss file here. The problem was that Angular CLI (for some reason) imported the whole Bootstrap multiple times, in fact every time when a component scss imported my main.scss.

Resulting difference:

In the following table I show the difference of file size before applying the fixes and after. One could say, the difference is insane:

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

---

I hope that I could help other people with a similar issue.