Webpack v2 Tree Shaking and UglifyJS Dead Code Elimination Analysis

index.js

import { render } from './script1';

render();

output.bundle.js

/** webpack stuff... **/
([ /* 0 */
/***/
function(e, r, n) {
    "use strict";
    function _classCallCheck(e, r) {
        if (!(e instanceof r)) throw new TypeError("Cannot call a class as a function");
    }
    Object.defineProperty(r, "__esModule", {
        value: !0
    });
    var _ = function() {
        function defineProperties(e, r) {
            for (var n = 0; n < r.length; n++) {
                var _ = r[n];
                _.enumerable = _.enumerable || !1, _.configurable = !0, "value" in _ && (_.writable = !0), 
                Object.defineProperty(e, _.key, _);
            }
        }
        return function(e, r, n) {
            return r && defineProperties(e.prototype, r), n && defineProperties(e, n), e;
        };
    }(), t = function() {
        function Script1() {
            _classCallCheck(this, Script1);
        }
        return _(Script1, null, [ {
            key: "render",
            value: function() {
                console.log("render called");
            }
        }, {
            key: "init",
            value: function() {
                console.log("init called");
            }
        } ]), Script1;
    }();
    r.render = t.render;
}, /* 1 */
/***/
function(e, r, n) {
    "use strict";
    var _ = n(0);
    (0, _.render)();
} ]);

script1.js

class Script1 {

  static render() {
    console.log('render called');
  }

  static init() {
    console.log('init called');
  }
}

export const render = Script1.render;

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    filename: 'index.bundle.js',
    path: path.resolve(__dirname, 'build')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ["es2015", { "modules": false }]
              ]
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      beautify: true,
      mangle: {
       screw_ie8: true,
       keep_fnames: true
      },
      compress: {
       screw_ie8: true,
       dead_code: true,
       unused: true
     },
     comments: true
   })
  ]
};

Okay so I'm trying to understand the difference here and what is responsible for what.

Tree shaking is the matter of loading in only the dependencies I explicitly import into various parts of my app.

Dead code elimination is the process of removing any code that is not being used or referenced within my app.

They are both are attacking the same problem but doing so in reverse ways.

In the example I have above. I have a script1.js file and in it I have created a class with some static methods.

Then I go ahead and only export the method I want to use in my index.js file.

I then run webpack and get the bundled output you see above.

What I don't understand is why is it bringing over my init function when I am only exporting/importing the render method and only calling the render method?

With that being said I thought that this is where UglifyJS comes in with dead code elimination so I added that to my webpack config and tested it but still see init being added to the bundle even though its not be used at all.

Am I doing something wrong here or is this what is expected for the output?

@johnstew I've faced with the same situation and I don't understand why functions that are not imported to anywhere are still in bundle. Did you understand how does it work?

@johnstew oh, actually I have another case, and it's working now. But I assume that init function is not removed because Webpack is able to remove only unused local variables and unused imports. It can't remove unsued class methods.