Unused down-levelled ES2015 classes are not tree shaken away

[kumaresan-subramani]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x] build
- [ ] serve

Description

I have created an angular application and checked main bundle whether tree-shaking is working or not using bundle-analyzer.

But i found all .js extension files are included.

🔬 Minimal Reproduction

1. Download sample form below link - click here

2. Run below commands :

npm i

npm run start - To generate build

npm run bundle-report - To check bundle files in online

🔥 Exception or Error

In below, i have not enabled pdf-export functionality in my application. In source level,i have done proper work for module injection but in below you can see pdfexport related js files are added.

Note: But pdf-export module not get added in main.bunlde.js file

marked files are not used but still getting added

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

 


Angular CLI: 8.0.1
Node: 10.16.0
OS: win32 x64
Angular: 8.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

 

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.6
@angular-devkit/build-angular     0.800.6
@angular-devkit/build-optimizer   0.800.6
@angular-devkit/build-webpack     0.800.6
@angular-devkit/core              8.0.6
@angular-devkit/schematics        8.0.1 (cli-only)
@angular/cli                      8.0.1
@ngtools/webpack                  8.0.6
@schematics/angular               8.0.1
@schematics/update                0.800.1
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?

I thought, while tree-shaking it includes all imported files.

[kumaresan-subramani]

I have tried this mishoo/UglifyJS#2279 (comment)

But no solution

[FDIM]

Someone can correct me if I am wrong, but I am fairly sure that you need to set module type to esnext/es2015 in ts config. In the zip you've linked, module is set to es5.

See: https://webpack.js.org/guides/tree-shaking/

[kumaresan-subramani]

Hi @FDIM ,

I have set modules as es2015 but still i am facing same error which is my depedent packages are all get included even i have not used those.

is this reason for my issue - #14577

[kumaresan-subramani]

webpack/webpack#2899

I thought this should be root cause - microsoft/TypeScript#13721

[kumaresan-subramani]

@alan-agius4 , Can you please see this?

[alan-agius4]

Hi I had a look at this is being retained because of ES5 classes are not being wrapped in an IIFE which is making code non tree-shakable.

The issue seems to happen when downlevelling from ES2015 to ES5 which was being done in ng-packagr version 1.5 which you are using to build your libraries. Downlevelling was removed in version 4.

This most likely is also caused by the removal of the class-fold transformer from the build-optimizer pipeline.