CODEWITHSUNDEEP
angularperformancebuilddownloadproduction
americanknight
americanknight

Reputation: 759

Angular dist files huge, causing slow download

Ever since upgrading my Angular app to version 5, then version 6, it's been downloading very slowly in the browser, sometimes taking well over 30 or 40 seconds. Though I'm optimizing the build for production, (ng build --prod --build-optimizer --aot), the core files add up to over a megabyte.

The main offenders are

enter image description here

Are these files typically so large? Any idea how I can trim them down and improve download speed?

Upvotes: 2

Views: 4047

Answers (1)

Dinh Duong
Dinh Duong

Reputation: 297

The reason is you bundle all your application inside one module.

It means all your pages,components,... will bundle in one file, it surely will be heavy.

The solution here is you should separate your application to more smaller bundles. In Angular it called is module lazy load and implement preloading(optional) to decrease bundle size at first time loading.

You can follow these articles:

Or follow these steps:

  • Make a module for a your page, it also includes its necessary components.
  • Routing for this module

  • Use loadChildren to load this module at app router. Something like that:

    { path: 'a', loadChildren: './anynomous/anynomous.module#AnynomousModule' },

Upvotes: 4

Related Questions