codelab icon indicating copy to clipboard operation
codelab copied to clipboard

Find ways to reduce the eventual bundle size

Open NothingEverHappens opened this issue 6 years ago • 1 comments

What the issue is about

image

Codelab historically has a giant bundle (15mb+), big part of it is due to the following things:

  1. We use TypeScript in the browser +7mb
  2. We bundle all the types in a single file (files.txt) + 2.5mb
  3. We bundle everything angular-related (ng2-bundle) + 2.5mb
  4. The editor we're using (monaco) is also giant.
  5. Everything else adds up to many mode mb

The goal of this tasks is to use webpack bundle analizer and `source-map-analizer' to find how to reduce the size of the bundle to make things load faster.

Where to start

There are many ways to go around this, a good start would be:

ng build --prod --stats-json
npx webpack-bundle-analyzer ./dist/apps/codelab/stats-es2015.json

NothingEverHappens avatar Oct 22 '19 00:10 NothingEverHappens

I've noticed we are loading CodelabComponentsModule, which also includes monaco in IndexModule. Since our milestone modules also import it, shouldn't we skip loading it on index page? We have no use for those components or monaco there anyway. This would make initial homepage load a bit faster.

antkiewicz avatar Oct 27 '19 19:10 antkiewicz