Tree-shaking for production build is not working properly

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

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.

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.

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 {
}

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.

Has this issue been fixed with beta.4 ?

@fknop

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

@fknop

@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)

Love to see that working!

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.

Any updates on a timeline for this by chance?

@IgorMinar

@IgorMinar and @kara are actively working on it.

We still see material.es5.js + 19 modules in our project

"@angular/material": "^2.0.0-beta.12",

Any ideas what we can do to get rid of this or how to debug whats going on?

@CardzMania

@CardzMania just avoid importing modules from @angular/material:

Before:

import {MatButtonModule} from '@angular/material';

After:

import {MatButtonModule} from '@angular/material/button';

Ohhh, thanks for the quick reply, let me try that. Must have missed it in the comments :(

Great, that worked! Had a hiccup along the way and noting here for others, just changing modules is not enough. Do remember to change all imports also:

Before:
import { MatDialogRef } from '@angular/material';

After
import { MatDialogRef } from '@angular/material/dialog';

Search for from '@angular/material' and just get rid of it!

Can confirm this
Viewings from the webpack-bundle-analyzer
Before

After

Has this been fixed ? Because I am importing from @angular/material and the tree shaking is working properly :

@Lakston

Hi,

@Lakston, you can see all the modules but tree shaking should strip out all unused modules.

If I want to make the tree shaking work as expected I have to import the sub-modules like this import { MatDialogModule } from '@angular/material/dialog';

Isn't anyway to make it work with importing @angular/material?

@oliveti

@oliveti I agree with @Lakston
here are two of my projects. The first one uses imports from @angular/material the second one uses imports only from specific submodules like @angular/material/dialog.
Note the second one imports more modules -> it's bigger.

both contains only those modules imported in my custom material.module.ts which means the tree-shaking must be working ok in both of them.
Correct me if I'm wrong.

versions:

@angular/material: 5.0.0
@angular: 5.1.0
@angular/cli: 1.6.0

Any update on this?

Looks bad

@oliveti

@oliveti I agree with @Lakston
here are two of my projects. The first one uses imports from @angular/material the second one uses imports only from specific submodules like @angular/material/dialog.
Note the second one imports more modules -> it's bigger.

both contains only those modules imported in my custom material.module.ts which means the tree-shaking must be working ok in both of them.
Correct me if I'm wrong.

versions:
@angular/material: 5.0.0
@angular: 5.1.0
@angular/cli: 1.6.0

I think that the treeshaked prod bundle should not contain typings.
At least not such big files. My bundle size is 55kb gzipped, about 20kb of it are typings.
Please correct me If I am wrong.

I am using the '@angular/material' - import. Because the intelisense of current Web Storm version suggest it.

Why is this issue closed? I still get a bundle size of 1.53mb unzipped. With the following dependencies:

"@angular/material": "^7.0.4",
"@angular/core": "^7.0.4",
"@angular-devkit/build-angular": "^0.10.6",
"@angular/cli": "^7.0.6",

This is issue has been closed last year because we switched to the Angular package format that should have fixed this. If you are still seeing an issue in regards to tree-shaking, please open a new issue and maybe also use source-map-explorer, so that we can see what's going on in your application.

Navigation Menu

Repository navigation

Tree-shaking for production build is not working properly #4137

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

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

Is there anything else we should know?

29 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Tree-shaking for production build is not working properly #4137

Description

Bug, feature request, or proposal:

What is the expected behavior?

What is the current behavior?

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

Is there anything else we should know?

Activity

devversion commented on Apr 18, 2017

jelbourn commented on Apr 18, 2017

dahaupt commented on Apr 18, 2017

kuncevic commented on May 3, 2017

fknop commented on May 13, 2017

karolmie1 commented on May 13, 2017

kuncevic commented on May 15, 2017

paulogr commented on May 15, 2017

jelbourn commented on May 15, 2017

fetters5 commented on Jun 2, 2017

jelbourn commented on Jun 2, 2017

29 remaining items

CardzMania commented on Oct 13, 2017

aitboudad commented on Oct 13, 2017

CardzMania commented on Oct 13, 2017

CardzMania commented on Oct 13, 2017

daniele-pecora commented on Oct 15, 2017

Lakston commented on Dec 12, 2017

oliveti commented on Dec 12, 2017

GeorgeKnap commented on Dec 12, 2017

shifatul-i commented on Aug 21, 2018

tom94zoe commented on Nov 8, 2018

danielsuter commented on Nov 24, 2018

devversion commented on Nov 24, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions