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

Answer 1

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

Answer 2

• 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.