Tree shaking not working - webpack 4 and uglifyjs-webpack-plugin

[gpspake]

I have tried adding UglifyJSPlugin to a webpack 4 project, in accordance with the webpack tree shaking docs, and I'm still seeing dead code and even comments in my bundle which leads me to think that my uglify plugin config isn't being used. I posted this on Stack Overflow a couple of days ago before posting here.

Link to project

The docs state that "in order to take advantage of tree shaking, you must...

• Use ES2015 module syntax (i.e. import and export). done
• Add a "sideEffects" entry to your project's package.json file. done .
• Include a minifier that supports dead code removal (e.g. the UglifyJSPlugin)." done

Still, the unused/unimported leftpad function and comments are being included in my bundle.

All of the config can be seen here. Based on the results I'm seeing, I suspect that this is related to the uglify settings in my webpack config.

To reproduce:

git clone https://github.com/gpspake/es6-todomvc.git
cd es6-todomvc
yarn install
yarn build
# check dist/bundle.js
# comment new UglifyJsPlugin() out in webpack config
yarn build
# check dist/bundle.js - it's identical to the previous bundle

[alexander-akait]

Thanks for issue, dup #206

[alexander-akait]

@gpspake feel free to ping me, if it is not help

[gpspake]

@evilebottnawi, thanks. I read that thread before submitting and I just re-read it hoping to find a solution but I still don't understand why webpack seems to silently ignore UglifyJsPlugin. My project has a minimal configuration and I am not using React so the code is relatively straight forward for this example. I have tried a lot of the suggestions in that thread but, at the end of the day, treeshaking still isn't working. Can you give me any advice about what's causing this to happen and how I might fix it?

[alexander-akait]

@gpspake tomorrow i will investigate

[gpspake]

Hey @evilebottnawi, I see you added needs more info tag. Is there any additional info I can provide?

[alexander-akait]

@gpspake i ping you if something need, in future i think we will use other label aka status: need investigation

[gpspake]

I just want to add one piece of info that I confirmed this morning which is that adding UglifyJsPlugin to my webpack config doesn't have any effect at all. If I comment new UglifyJsPlugin out in my webpack config, I get the exact same output with webpack -p
I don't understand what I'm doing wrong, here. Is it a simple syntax issue? Is it a matter of options that I'm not passing? I'm going to amend my initial comment to suggest commenting UglifyJsPlugin out in webpack config and re-checking the bundle to see that it's exactly the same.

[shivkoirala]

Its happening with me also. Have a simple webpack.config.js and uglify does not get executed irrespective what the environment variable is.

[alexander-akait]

@shivkoirala can you create minimum reproducible test repo?

[shivkoirala]

@evilebottnawi below are details let me know if you need anything more

Typescript version :- 2.7.2
Webpack :- 4.2.0
I tired everything webpack -p , webpack --mode production, changed environment variable of node, changed to ES5 / ES6 . Bundling is happening but not uglify.. If i run uglify individually it works.

var path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: {
        CustomerModule: "./Modules/CustomerModule.ts",
        SupplierModule: "./Modules/SupplierModule.ts",
        Startup: ["./node_modules/core-js/client/shim.min.js",
            "./node_modules/zone.js/dist/zone.js",
            "./node_modules/reflect-metadata/Reflect.js",
            "./Startup.ts"
        ]
    },
    output: {
        path: path.join(__dirname, "dist"),
        publicPath: "/dist/",
        filename: "[name].bundle.js"
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
            rules: [
                {
                    test: /\.ts$/,
                    use: ["awesome-typescript-loader", "angular-router-loader"]
                }
            ]
    }
    , plugins: [new UglifyJSPlugin()]
};

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "noStrictGenericChecks": true,
    "lib": [ "es2016", "dom" ]
  }
}

package.json

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "4.0.0",
    "@angular/compiler": "4.0.0",
    "@angular/core": "4.0.0",
    "@angular/forms": "4.0.0",
    "@angular/http": "4.0.0",
    "@angular/platform-browser": "4.0.0",
    "@angular/platform-browser-dynamic": "4.0.0",
    "@angular/router": "4.0.0",
    "@angular/upgrade": "4.0.0",
    "@types/jquery": "^3.3.1",
    "@types/node": "^9.6.0",
    "angular-in-memory-web-api": "0.3.2",
    "angular-router-loader": "^0.8.2",
    "awesome-typescript-loader": "^4.0.1",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "http-server": "^0.10.0",
    "jquery": "^3.3.1",
    "npm": "^5.8.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.4.1",
    "systemjs": "0.19.27",
    "ts-loader": "^4.1.0",
    "webpack-cli": "^2.0.13",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.42",
    "typescript": "2.7.2",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "webpack": "^4.0.0-beta.3",
    "html-webpack-plugin": "2.14.0"
  }
}

[alexander-akait]

@shivkoirala can you create this as minimum reproducible test repo?

[granttchart]

I'm experiencing what I think is the same issue on this project. Since switching to Webpack 4, production builds are ~400kB larger than Webpack 3 builds with the same codebase.