Search code examples
angularng-zorro-antd

Will angular-cli removes unused modules even if it is imported in app.module and not use it?

I need little clarification in angular cli's dead code elimination/tree shaking.

Github

I'm planning to use ngZorro ui library. As per the docs, I need to import NgZorroAntdModule in my app.module file. It contains all the components it offers. Now if I use only some of them, will angular cli still bundle all the components in my final prod build.

I tried importing the module I require separately, it works, but still I would like to know if angular cli's tree shaking/dead code elimination removes the unused modules even though it is imported in app.module.

enter image description here

Solution

  • Below is a similar thing which i checked.
    I included below Material Modules in my app.module.ts enter image description here But i am only using mat-raised-button which is a part of MatButtonModule in my code.
    This is what i got in my main bundle when i analysed using source-map-explorer enter image description here

    Though i included Menu, Toolbar, Icon and FormField Modules in my app.module.ts, since i am not using them in the code they aren't included in webpack bundle.

    This is the build configuration i used -

    ng build --prod --build-optimizer --vendor-chunk --progress --output-hashing=all --stats-json --source-map=true

    You can analyse the bundle once its generated to see the modules that are included in the package using tools like :
    webpack-bundle-analyzer, source-map-explorer.

    • You need to generate the stats.json file and then you can analyse using webpack-bundle-analyzer
    • for source-map-explorer you need to generate the prod build with --source-map=true

    Optimising the build package also depends on the flags you are using for the prod build.
    Refer to Angular Build Documentation for details of the flags you can use.