Tree Shaking

Tree Shaking

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.

Example

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))}

Further Reading

• Tree shaking with webpack 2, TypeScript and Babel
• Tree-shaking with webpack 2 and Babel 6
• webpack 2 Tree Shaking Configuration