CODEWITHSUNDEEP
angular
Aranganathan
Aranganathan

Reputation: 741

Angular Production Build is very huge even after including --aot --build-optimizer --sourcemaps=false

i have nearly 17 Modules in my application whose sizes are negligible compared to what angular generates. 

chunk {common} common.chunk.js (common) 2.18 MB 
chunk {main} main.bundle.js (main) 4.42 MB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 616 KB [initial]

I understand Angular generates these chunks for handling some internal stuffs ,but why is the main bundle is 4.5 MB.

what am i doing wrong?

Is there a way i can reduce these sizes?

enter image description here

Upvotes: 3

Views: 437

Answers (2)

Aranganathan
Aranganathan

Reputation: 741

I have upgraded my project to Angular v6 ....and i just cant believe our budle size has gone down to 1 MB from 4MB ....Greak job by Angular team :)

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15566

There is no specific way to reduce size. One idea is LazyLoading your modules to reduce initial chunk.

Another one is to analyse the chunk using webpack bundle analyser.

enter image description here

In bundle analyser, you might get more insight into what to optimise and how. Generate the JSON for production build (--aot --prod) and analyse with bundle analyser.

Also, if you haven't updated all packages to latest, tree shaking may not be working, so if you import something like:

import {Observable} from `rxjs/Rx`

It might end up bundling the whole library, you might have to do specific imports like

import {Observable} from `rxjs/Observable`

If tree shaking is there or not will probably be obvious as you examine your bundle in analyser.

Even with tree shaking some dependancies like momenjs can be cumbersome as it was not modular, changing to modular alternatives might help in those scenarios.

There is also source-map-explorer which is already mentioned in Angular docs

enter image description here

Upvotes: 5

Related Questions