On angular 2 what happens on build when I import only one module from a big library?

Question

When using angular 2, I would need a specific module from another library, lets suppose I need only the tabs from angular material 2.

If I use import MdTabsModule not MaterialModule.

I see when I serve that I get a huge file more than 1Mb.

At the end, the build only will use the module for the tabs or it will import all the library and make the build huge?

What is the best way to create a build that uses only the used modules not the entire external library in order to have a smaller size?

Answer 1

It depends on compilation process simple build will inherit all modules, if you compile with AOT it'll not use the whole module for build just your imported and used components will be in and if you rollup then it will remove all components and functions etc which are written but never used.

For AOT and rollup read here https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

If you are using angular/cli it have builtin these functionalities and angular2-webpack-starter as well they have bunch of more features as well you can read in above link. Your development serving build size will be big but the final production build will be less sizes.

Answer 2

Depends entirely on how you build it. Angular-cli do tree-shaking and will use much less code in production, more info about it here.

Bundling