[Discussion] Angular Material bundle issues

[mrjmd]

One of the concerns brought up by the Angular team is that currently Angular Material is a bit bloated and unable to take advantage of tree shaking, which causes our bundles to be quite large.

Apparently the change was introduced in Material beta 3, so there was some discussion around either considering not using it or going with the beta 2 release which should resolve the issue, but obviously it isn't ideal to be using old versions.

A quick test showed that before Material was added, our production vendor bundle was 345kb ungzipped. It is currently 1.1mb, which is not trivial. Of course we added more than just Material since then so we'd need to check it in isolation to see exactly how much of that is it's fault.

[joaogarin]

We can move to material beta2. We can at least try it out and see the bundle difference.. I have seen an issue about this where they mentioned the fix coming in beta4...So I would assume this is a temporary thing. But if the core team suggests going with that. we should probably consider it.

I think beta2 and beta7 are really not so different. The major difference is the support for angular universal (which we dont have right now).

angular/components#4137

Will do some tests on this, and we can always go without material and do custom CSS.

[joaogarin]

I haven't noticed any difference from beta2. But I see that issue quite active and I really assume this will be handled properly before we actually have the app ready..Maybe we want to wait..and keep working in the app probably in the meanwhile this gets updated.

We are really using only 4 or 5 of the dozens of components that are getting bundled, so its quite serious but as soon as the issue is fixed we should see a really significant drop in the bundle size.

I think rolling back to beta.2 from what I tested now doesnt really make any difference..bundle is still 2.3 M AOT..~36%so..its bad!

This is beta.7 but beta2 is not really different

[joaogarin]

as we have discussed at this point the best approach is really to take material out. and go with some custom components as this is just bringing the bundle incredibly big.

I will create a PR For that and link to this issue.

[mrjmd]

Sounds like the module import may be the reason beta2 is still so large, we need to reach deeper with our imports into the individual sub-modules we need still instead of importing MaterialModule.

[mrjmd]

angular/components#4137 seems to be the main issue to track. But I also found these two related issues in CLI (angular/angular-cli#2901) and Webpack (webpack/webpack#2899) that make me a little concerned that there may be a larger problem with tree shaking ts exports.

[mrjmd]

This does look like it is solved by adding the new --build-optimizer flag, however that is causing an unrelated runtime error in our app currently.

So closing this is blocked by #60.