CODEWITHSUNDEEP
angularwebpackangular-ui-routerangular-builder
VinoPravin
VinoPravin

Reputation: 987

Angular main.js file large size

My project user angular version 7, and here is the angular.json configuration enter image description here

when I build for production my main.js file is way too large nearly 12MB in size which makes my app to load the page very slowly. Nearly the initial load tooks 4 - 5 minutes

Here is the build result enter image description here

Here is my analyser result enter image description here

Thanks in advance

Upvotes: 11

Views: 31745

Answers (3)

Hiep Tran
Hiep Tran

Reputation: 4093

if you was try lazyload module and it still not work. change the tsconfig.json module from commonjs to es2020 and add sideEffects: false to your package.json and then, voila:

enter image description here

full explain I was talk in here https://stackoverflow.com/a/72342681/5748537

btw, you can use g-zip on server to make it faster.

Upvotes: 1

Aniket
Aniket

Reputation: 93

  • First of all, stop using webpack bundle analyzer because it does not give accurate representation of your bundle space and start using source-map-explorer.

  • As per the Angular docs, if you import any thing outside of lazy loaded module, then it will be included in your main.js bundle. I had this issue where I was importing shared module in every module and shared module itself imported a lot of packages from node_modules which led to an increase in main.js file.

Upvotes: 6

Prashanthi
Prashanthi

Reputation: 153

Split the file which is taking too much into modules and apply lazy loading

Upvotes: 7

Related Questions