Tree shaking is a term commonly used in the JavaScript context for dead-code elimination, or more precisely, live-code import. It relies on ES2015 module import/export for the static structure of its module system. The name and concept have been popularized by the ES2015 module bundler rollup.
webpack 2 comes with a built-in support for ES2015 modules (alias harmony modules) as well as unused module export detection.
Consider a maths.js library file exporting two functions, square
and cube
:
// This function isn't used anywhere export function square(x) { return x * x; } // This function gets included export function cube(x) { return x * x * x; }
In our main.js we are selectively importing cube
:
import {cube} from './maths.js'; console.log(cube(5)); // 125
Running node_modules/.bin/webpack main.js dist.js
and inspecting dist.js
reveals that square
is not being exported (see the "unused harmony export square" comment):
/* ... webpackBootstrap ... */ /******/ ([ /* 0 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* unused harmony export square */ /* harmony export (immutable) */ __webpack_exports__["a"] = cube; // This function isn't used anywhere function square(x) { return x * x; } // This function gets included function cube(x) { return x * x * x; } /***/ }), /* 1 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; Object.defineProperty(__webpack_exports__, "__esModule", { value: true }); /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__maths_js__ = __webpack_require__(0); console.log(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__maths_js__["a" /* cube */])(5)); // 125 /***/ })
When running a production build, node_modules/.bin/webpack --optimize-minimize main.js dist.min.js
, only the minimized version of cube
but not square
remains in the build:
/* ... */ function(e,t,n){"use strict";function r(e){return e*e*e}t.a=r} /* ... */ function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n(0);console.log(n.i(r.a)(5))}
© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/guides/tree-shaking/