Why are Angular 2 projects so large [closed]

Question

We are in the process of re-writing our ng1 project with ng2. Our ng1 project, when built, is about 8mb. We are about a quarter of the way in our re-write to ng2 and we are already at 14mb for our ng2 prod build.

The major difference in the size of the dist folder can be attributed to differing sizes of source maps. Both projects include source maps but ng2 source maps are much larger. This makes sense to me as ng2 has more boilerplate, components are separated out, and so on.

Initially this question was placed on hold as it was too large to answer. I agree. But that's precisely why I am asking it. I'm trying to make sense of all the things ng2 offers that will make the final ng2 product better than the ng1 version.

With that, what are some of the practical approaches/procedures/tools that we can apply to our ng2 development practices to keep final sizes small and in turn user experience fast?

Answer 1

I was trying out angular 2 the other day and I faced the same issue as you do, my vendor.js was 6M and this was a simple "Hello World" app...

I've found the following post that helped a lot in understanding how we should act on this issue (for now): http://blog.mgechev.com/2016/06/26/tree-shaking-angular2-production-build-rollup-javascript/

He uses several optimizing and compression techniques (precompile,treeshake, minify, bundle and gzip) on his 1.5M app to reduce its size to just 50kb.

Check it out, hope it helps! :)