11

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

Improve this question
10
  • 5
    Try taking a look at the Webpack Bundle Analyzer: coryrylan.com/blog/… Commented Apr 23, 2019 at 2: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. Commented Apr 23, 2019 at 2:28
  • 2
    What is the command you used to build it? Commented Apr 23, 2019 at 2:31
  • 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 Commented Apr 24, 2019 at 5:13
  • @TheLawliet94 got it. Hmm.. And what is the total size after compressing? You know you can deliver compressed files via your servers, right? Commented Apr 24, 2019 at 5:21

3 Answers 3

Reset to default
7

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

My build contains main.js file which size is 12MB, will applying lazy loading solve this large file size issue. @Prashanthi
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.
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.
And when you look at the image above, I don't know why it is showing main.ts + 357 modules (concatenated)
This answer tells us in only one sentence what to do but not how.
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.

Improve this answer

2 Comments

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
How do you lazy load a shared module? Because it wont have routing.
1

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.