search

codelab-fun / codelab

Interactive Angular Codelab 🦋 Learn Angular basics online without setup
https://codelab.fun
Apache License 2.0
221 stars 63 forks source link

Find ways to reduce the eventual bundle size #1175

Open NothingEverHappens opened 5 years ago

NothingEverHappens commented 5 years ago

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
antkiewicz commented 5 years ago

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.