Tree-shaking for production build is not working properly

[thomasgazzoni]

Bug, feature request, or proposal:

The production bundle size is not shrinking

What is the expected behavior?

Base on the new package structure the production bundle (ng build --prod) should not have included all the Material Components Module

What is the current behavior?

Base on the change log now we should create our own Custom MaterialModule, in my case I have this one:

import { NgModule } from '@angular/core';
import {
    MdCardModule,
    MdChipsModule,
    MdToolbarModule,
    MdButtonModule,
    MdSidenavModule,
    MdRippleModule,
    MdIconModule,
    MdListModule,
    MdProgressSpinnerModule,
} from '@angular/material';

@NgModule({
    imports: [
        MdCardModule,
        MdChipsModule,
        MdToolbarModule,
        MdButtonModule,
        MdSidenavModule,
        MdRippleModule,
        MdIconModule,
        MdListModule,
        MdProgressSpinnerModule,
    ],
    declarations: [

    ],
    providers: [

    ],
    exports: [
        MdCardModule,
        MdChipsModule,
        MdToolbarModule,
        MdButtonModule,
        MdSidenavModule,
        MdRippleModule,
        MdIconModule,
        MdListModule,
        MdProgressSpinnerModule,
    ]
})
export class CustomMaterialModule { }

that is imported in the AppModule.

Even if I remove all the module and import only, for example, MdButtonModule, the size of material library in the production vendor.js still 308Kb

Which versions of Angular, Material, OS, browsers are affected?

@angular/cli: 1.0.0
node: 7.9.0
os: linux x64
@angular/animations: 4.0.1
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/material: 2.0.0-beta.3
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Is there anything else we should know?

This is the vendor sourcemap generated by source-map-explorer

[devversion]

Yeah I experienced the same issue when testing Material with Webpack 2.

I've been talking to some people about this and it looks like this happens due to missing @__PURE__ annotations in the FESM bundles on IIFEs.

[jelbourn]

Yep, just spent a while talking about this with the rest of the Angular core team. The gist is that the new packing structure doesn't work out of the box with how webpack tries to eliminate dead code. We're working on a solution and will publish a beta.4 as soon as we have a good approach.

[dahaupt]

Do we even have to import the single Modules into our CustomMaterialModule? I just exported them and everything seems to work fine.

My CustomMaterialModule:

@NgModule({
  exports: [
    MdButtonModule, MdInputModule, MdSelectModule, MdTabsModule, MdMenuModule, MdIconModule, MdTooltipModule, MdCardModule,
    MdCheckboxModule, MdSidenavModule, MdDialogModule, MdToolbarModule, MdSnackBarModule, MdProgressSpinnerModule, MdListModule
  ]
})
export class CustomMaterialModule {
}

[kuncevic]

Just created a custom material module thinking to reduce the bundle size

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MdDialogModule,
  MdToolbarModule,
  MdInputModule,
  MdMenuModule,
  MdIconModule,
  MdSlideToggleModule,
  MdSliderModule,
  MdSelectModule,
  MdRadioModule,
  MdCheckboxModule,
  MdButtonModule,
  MdButtonToggleModule,
  MdSidenavModule,
  MdListModule,
  MdTooltipModule

} from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ],
  exports: [
    CommonModule,
    MdDialogModule,
    MdToolbarModule,
    MdInputModule,
    MdMenuModule,
    MdIconModule,
    MdSlideToggleModule,
    MdSliderModule,
    MdSelectModule,
    MdRadioModule,
    MdCheckboxModule,
    MdButtonModule,
    MdButtonToggleModule,
    MdSidenavModule,
    MdListModule,
    MdTooltipModule
  ]
})
export class CustomMaterialModule { }

Didn't work still getting same material size 741.28 kb. So currently no difference if I am importing my custom module or MaterialModule

Looking forward to bata.4 handling that case.

[fknop]

Has this issue been fixed with beta.4 ?

[karolmie1]

@fknop I've noticed some decrease in size, but not enough.

[kuncevic]

@fknop @karolmie1 for me it is just got increased:

was:
741.2k kb
60.03 gziped
now
850.19 kb
69.11 kb gziped
And I am just importing my custom module #4137 (comment)

[paulogr]

Love to see that working!

[jelbourn]

We're working on it (experiment 1, experiment 2), but getting it to "just work" with existing tooling is somewhat tricky and we're still working out the approach.