Currently in the process of developing an Angular application, I've encountered a frustrating issue. Each time I refresh the app using ng serve, the loading time seems to increase gradually. It can now take up to 10 seconds for changes to reflect in the browser (tested on Chrome, Firefox, and Safari). Initially, I dismissed it as a browser problem, but upon further investigation, I discovered that the size of main.js during development is a staggering 27 MB. This puzzles me because I have worked on larger projects without facing such issues before. Even after running ng build --prod, the output remains over 8 MB, which seems excessive.
I could resort to rolling back using git, but I'm hopeful there's a more effective way to pinpoint the root cause of this sudden file size surge. Any suggestions on where to start would be greatly appreciated.
Here's the output of 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
Below is 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",
.
. here goes numerous dependencies listed from bootstrap to zone.js...
.
},
"devDependencies": {
.
. likewise, various dev dependencies listed from codelyzer to typescript...
.
}
}
Another point to note:
Recently, I moved a portion of the code base into an additional module with the intention of creating a separate NPM package eventually. While this step was new to me, the segment involved consists solely of TypeScript classes without any GUI elements, so it shouldn't be the source of the issue.