5

I am just getting started with Angular 2. It actually makes me think about the size of the page just for the Hello World.

Please look at the scripts which were actually needed and it already is 1.75 MB.

enter image description here

Offcourse with minification it would reduce 30-35% approximately.

Yet it would still be above 1 MB just for this junk Hello World type application. Adding bootstrap CSS / Jquery / Jquery UI at the minimal would take it even further plus add images depending upon the web application type.

Question is 1.75 MB of script without writing a single line of code pertaining to the application.

Is this the new web standard to make the page size on an average above 4-5 MB?

Tim Liberty
  • 2,099
  • 4
  • 23
  • 39
  • Looks like a dup of http://stackoverflow.com/questions/35539622/how-to-deploy-angular-2-apps/35563542#35563542 – Günter Zöchbauer Apr 05 '16 at 13:11
  • 2
    You're not supposed to use those bundles in prod, you should bundle the code yourself. For example take a look [at this](https://twitter.com/mgechev/status/715476673454411778) – Eric Martinez Apr 05 '16 at 14:12

2 Answers2

2

There are several strategies that will reduce the total size of your site.

  1. Enable gzip compression for your assets. Most text files (like JS files) compress very well due to lots of strings that get repeated.
  2. Use the minimised versions of libraries, as you identified.
  3. Use CDN references to 3rd party libraries if possible. That way, the user may already have the file in their cache and don't need to refetch it. Some CDNs also support HTTP/2, meaning that more files can be requested in parallel.
  4. Take advantage of the Ahead-Of-Time compilation (AOT, a.k.a. offline compilation) in Angular 2 RC 5, and swap to using the version of Angular 2 without the compiler. That saves about half of the size of the Angular 2 library file.
  5. Use HTTP/2 yourself for your assets, and refer to each JS file individually, rather than bundling it. That way, if they haven't changed, the user won't need to download them again when they reload. And the first time, all the files can be fetched in parallel.
  6. Use conditional comments or server side processing to remove the shims and other JS files that are only relevant to certain browsers like IE. That way, other browsers don't download those useless scripts.
  7. Use something like Rollup or another tool that can do "tree shaking" to remove unused code.

There are probably other ways to save even more, but this is a good starting point.

GregL
  • 37,147
  • 8
  • 62
  • 67
1

Angular2 is going to get smaller in smaller now. See ngconf about this. Its mainly result of tree-shaking minification (loading only code, that really used).

Angular 2 seed project, wich in prod build loads with ~300kb is already available for use.

Pavel
  • 2,602
  • 1
  • 27
  • 34