Angular 5 - Main bundle file is too large on the development server

Question

We are developing an application using Angular 5. After running the ng build --prod --aot and deployed the dist folder to the dev server the main bundle produced 2.2MB on initial load. It's already small compared to 8MB vendor bundle size (when running ng build --prod) but still, we need to lower the size of the main bundle. Is there any way to lower the size of the main bundle?

Mcclary

You can exclude node_modules folder from bundle. – Illbred

Can you provide index.html and .angular-cli.json files? – Creep

Hi @ManojChalode Please see this link to see index.html and .angular-cli.json Thanks :) – Mcclary

Answer 1

You can reduce the bundle size by adding build-optimizer flag to your build:

ng build --prod --build-optimizer

Try running the above command. For more info visit: https://angular.io/guide/deployment

AFAIK you need not have to include --aot flag when building using --prod. Production build is aot by default.

Updating to the latest version of angular is also a solution for this. Since latest version often comes with more optimized build procedures.

Noneffective

Hi Gautam, I tried to ran the command but the size main bundle still 2.3 MB – Mcclary

Hi @Mcclary then try using the steps provided in the following answer: https://mcmap.net/q/135909/-how-to-decrease-prod-bundle-size – Noneffective

Tried this command "ng build --aot --prod --build-optimizer=true --vendor-chunk=true" and it lowered the size from 2.3MB to 869KB. However it created a vendor file with the size of 1.7MB which I think still the same – Mcclary

--aot and --build-optimizer are suprlus when using --prod – Important

Answer 2

I believe you need to separate your code into modules and load them lazily.

Sideburns