ag-grid is proud to partner with webpack

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))}
Note that the --optimize-minimize flag enables tree shaking by including the UglifyJsPlugin behind the scenes. Alternatively, the UglifyJsPlugin can be included manually in the plugins section of your configuration file. The plugin, combined with webpack's resolving of import and export statements, is what makes tree shaking possible. See the production build guide for more information.

Further Reading


Contributors