Angular main.js file large size

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

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