Tree Shaking
Tree shaking 是一个术语，通常用来描述移除 JavaScript 上下文中无用代码这个过程，或者更准确的说是按需引用代码，它依赖于 ES2015 模块系统中 import/export 的静态结构特性。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
webpack 2 原生支持 ES6 模块 (别名 harmony modules) ，并能检测出未使用的模块输出。
示例
举一个 maths.js 库例子，它输出两个方法 square 和 cube：
// 这个函数没有被其他地方引用过
export function square(x) {
return x * x;
}
// 这个函数被引用了
export function cube(x) {
return x * x * x;
}
在 main.js 中我们只引用 cube 方法：
import {cube} from './maths.js';
console.log(cube(5)); // 125
运行 node_modules/.bin/webpack main.js dist.js 并检查 dist.js 可发现 square 没有被输出:
/* ... webpackBootstrap ... */
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* unused harmony export square */
/* harmony export (immutable) */ __webpack_exports__["a"] = cube;
// 这个函数没有被其他地方引用过
function square(x) {
return x * x;
}
// 这个函数被引用了
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
/***/ })
当执行一次生产环境构建 node_modules/.bin/webpack --optimize-minimize main.js dist.min.js 后，打包出来的代码只包含 cube 方法，并没有 square 方法：
/* ... */
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))}