Angular main.js file large size

Question

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

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

Here is my analyser result

Thanks in advance

Try taking a look at the Webpack Bundle Analyzer: https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack — Pace, Apr 23 '19 at 02:07
While this is understandably frustrating, there doesn't seem to be a direct programming question asked here. It also seems like the nature of the issue might need more than a simple reproduction to debug. As @Pace said, analyzing the bundle is a good place to start. — , Apr 23 '19 at 02:28
ng build --prod, where I didn't added any other since all the default things are already there in the angular.json configuration, as you see the picture above @wentjun — VinoPravin, Apr 24 '19 at 05:13
@TheLawliet94 got it. Hmm.. And what is the total size after compressing? You know you can deliver compressed files via your servers, right? — wentjun, Apr 24 '19 at 05:21
I tried that and I updated my my analysed result above @Pace — VinoPravin, Apr 24 '19 at 05:35
If you expand the menu on the left there is an option to show concatenated contents. It claims to be inaccurate but it should give you a rough idea. — Pace, Apr 25 '19 at 03:54

score 7 · Accepted Answer · answered Apr 23 '19 at 06:30

7

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

answered Apr 23 '19 at 06:30

Prashanthi

145
5

My build contains main.js file which size is 12MB, will applying lazy loading solve this large file size issue. @Prashanthi – VinoPravin Apr 24 '19 at 05:10
Divide your large modules (app.modules) into multiple sub modules with max size per sub module should be less than 3 MB and then apply lazy loading to these modules.You will see a drastic increase in the performance. – Prashanthi Apr 24 '19 at 06:41
Yeah, the problem is I've already lazy loading things. I have app module and 5 other modules. I don't know where exactly am making mistake. – VinoPravin Apr 24 '19 at 10:41
And when you look at the image above, I don't know why it is showing main.ts + 357 modules (concatenated) – VinoPravin Apr 24 '19 at 12:09
This answer tells us in only one sentence **what** to do but not **how**. – Martin Schneider Aug 23 '22 at 09:07

score 6 · Answer 2 · answered May 16 '20 at 17:46

6

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.

answered May 16 '20 at 17:46

Aniket Sanadhya

83
1
5

1

Here are the steps I followed: 1. Identified the js included in my main bundle 2. I had already implemented lazy loading of modules, but figured few other components can be included in their lazy loaded modules as well 3. I started breaking one big shared module into smaller commonly used components shared module and added them in the lazy loaded modules imports – Aniket Sanadhya Aug 05 '20 at 08:09
How do you lazy load a shared module? Because it wont have routing. – Gerardo Buenrostro González May 08 '21 at 18:44

score 1 · Answer 3 · answered May 23 '22 at 02:28

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:

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.

Angular main.js file large size

3 Answers3