Last active
October 2, 2017 18:47
-
-
Save johnstew/f533d63a3f5af27b8a43dc0583b53fbc to your computer and use it in GitHub Desktop.
Webpack v2 Tree Shaking and UglifyJS Dead Code Elimination Analysis
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { render } from './script1'; | |
render(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** 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)(); | |
} ]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Script1 { | |
static render() { | |
console.log('render called'); | |
} | |
static init() { | |
console.log('init called'); | |
} | |
} | |
export const render = Script1.render; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}) | |
] | |
}; |
@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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@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?