Modules optimization

[ilianiv]

Feature Request

Decrease imported components from Covalent modules by importing only material modules that are necessary but not the whole MaterialModule.forRoot()

Screenshots or link to CodePen/Plunker/JSfiddle

Here is an example. I do not import/use material in my app at all. I import just Covalent steps module and the result is 64KB for Covalent steps and 745KB for material in my bundle.
I understand that steps module uses some material components but I'm pretty sure that input, slider, dialog and many more material components is not used in Covalent steps component.

What is the expected behavior?

Import only necessary material modules (like MdCheckboxModule or MdButtonModule and so on) in Covalent component's modules but not the whole module MaterialModule.forRoot().

What is the motivation / use case for changing the behavior?

Using Covalent component bloats my bundle size with >700K because of including all material components in it.

Which version of Angular and Material, and which browser and OS does this issue affect?

All

[emoralesb05]

There seems to be issues with ng2 and webpack that conflict with the tree shaking of the prod build.

angular/angular-cli#2901
webpack/webpack#2899

This is the reason we didnt care, since one of the aspects of angular and webpack is that it should remove all unused dependencies when building.

[emoralesb05]

There seems to be a loooong discussion regarding how to fix this since its an IIFE issue with the bundlers.. so we might have to just add the wanted modules like you said.