Minimum bundle size?

[kemsky]

Hi, thanks for your efforts on this project.

I've tried to remove all code and modules from this project and check minimum bundle size. I get about 800kb minimum. As i know webpack2 should support tree-shaking, but i see the same bundle size as i get with webpack1. Does tree-shaking work in this config ? Is it necessary to configure additional plugins to make it work?

Thanks.

[DzmitryShylovich]

How did you build project?

Even with material and ngrx my final bundle is 209kb.

[kemsky]

I guess you are talking about gzipped version?

[DzmitryShylovich]

ofc

[kemsky]

My point is that there is no difference between webpack1 and webpack2 builds. They both produce ~800kb raw and ~200kb gzipped. It questions if there is any tree-shaking actually.

[DzmitryShylovich]

You should compare it to Rollup instead of webpack1.

[kemsky]

If there is no difference between webpack1 and webpack2 then i don't have reason to migrate. Currently i'm checking angular-cli project to see how far it can go.

[DzmitryShylovich]

I've tried to remove all code and modules from this project and check minimum bundle size.

probably there's nothing to treeshake this is why u don't see any difference.

[kemsky]

I was expecting angular source code to get tree-shaked because i believe that there is a lot of unused code in this scenario.

angular-cli

All builds make use of bundling, and using the --prod flag in ng build --prod or ng serve --prod will also make use of uglifying and tree-shaking functionality.

Result is ~700kb but it is not big difference and i could miss something during webpack expreiments.

M. Gechev mentions ~200kb raw size using rollup.

[DzmitryShylovich]

CLI uses webpack2 under the hood so its output should be very similar to this starter.

For now Rollup has the best treeshaking mechanism and should give you the smallest bundle.

[qdouble]

@kemsky If you remove preloading from the bare minimum branch so it compiles, it comes out to about ~700kb and 150KB gzipped. First of all, I'd be weary about the supposed differences of rollup builds, without using any extra tricks (closure compiler, and doing other types of hacks that are not standard), once you include polyfills, i.e shim, etc, it comes out to just about the same size. When I did a direct comparison apples to apples comparison myself, the difference was maybe 10-20kb gzipped. Also, the gzipped size is really what matters most... sometimes the rollup build may give a smaller minified size, while being about the same gzipped, so it doesn't make a practical difference.

Webpack is tree-shaking, it's just Angular doesn't currently get a lot smaller without non-standard hacks.

[qdouble]

@kemsky Also note that ie shim alone is like 24kb gzipped... I'm sure many of the rollup size statements are not even talking about a fully working app. Once you have a few modules and components, load up the polyfills, use i.e. shim and other stuff, a 50kb hello-world angular 2 app is a myth in terms of one that actually run in the browser without anything tacked on.

Make sure that any comparison between Webpack and rullup is comparing the size of the exact same thing. Same modules and components and including polyfills and shims. Also make sure you are comparing gzipped sizes. Once you look at it through that lens, I'm sure you'll see they are not far off unless you're doing some additional, non standard tricks.

[kemsky]

@qdouble, i understand you, its approximate comparison, my application is already ~ 1.5MB raw, so +- 50KB do not change anything really.

I just was surprised: AOT, tree-shaking, Webpack 2, online template compiler removed, modules, a lot of configuration - but bundle size is ~ same as it was several months ago when i created Webpack 1 build config. The only reason to use AOT is #11583. I'll wait until rollup/closure compiler get ready for production.