Introduction

There’s a big different between

import {MatDialogModule} from '@angular/material'

and

import {MatDialogModule} from '@angular/material/dialog'

Let’s get started

Recently I decided to dig into the output of my dummies projects to get a better understanding of what’s being made under the hood in angular app bundling. To accomplish this task i created this project where I attempted to produce different bundle using different import styles in order to see how could this impact in my angular >= 2 apps.

For reference I’m running the tests on the following environment

`Angular CLI: 6.1.5
 Node: 8.9.3
 OS: darwin x64
 Angular: 6.1.6
 ... animations, common, compiler, compiler-cli, core, forms
 ... http, language-service, platform-browser
 ... platform-browser-dynamic, router
 
 Package                           Version
 -----------------------------------------------------------
 @angular-devkit/architect         0.7.5
 @angular-devkit/build-angular     0.7.5
 @angular-devkit/build-optimizer   0.7.5
 @angular-devkit/build-webpack     0.7.5
 @angular-devkit/core              0.7.5
 @angular-devkit/schematics        0.7.5
 @angular/cdk                      6.4.7
 @angular/cli                      6.1.5
 @angular/material                 6.4.7
 @ngtools/webpack                  6.1.5
 @schematics/angular               0.7.5
 @schematics/update                0.7.5
 rxjs                              6.3.1
 typescript                        2.7.2
 webpack                           4.9.2`

Let’s say you just installed @angular/material in order to use their amazing dialog module.
You would install @angular/material with a simple NPM install and load the module from @angular/material.
This couldn’t be worst for you…

Here’s why:

• The default CLI app is around 6.5MB without any extra code (source maps included)
  I didn’t try to delete all the source so I don’t know the exact project size.
• If your build using root imports after importing your dialog module it will be +/- 16.4MB
  I didn’t try to delete all the source trees but the directory would loose around 5MB for sure.
• Updating my imports to specific modules and building the app using `ng build` my output dir was +/- 8.2MB
  After deleting all the source files we get a project with 4MB
• Doing the same to the previous project but this time using a production build with AOT (ahead of time) (which also runs an code optimiser) `ng build –prod` our bundle went from 4Mb to only 382.4KB

Amazing isn’t it?

If you found this topic interesting check our this article where you will see the same topics applied to rxjs lib.