webpack中tree-shaking技术介绍

以前介绍过webpack3的新特性，里面提到webpack2支持了ES6的import和export，不须要将ES6的模块先转成CommonJS模块，而后再进行打包处理。正基于此，webpack2引入了tree-shaking技术，可以在模块的层面上作到打包后的代码只包含被引用并被执行的模块，而不被引用或不被执行的模块被删除掉，以起到减包的效果。

webpack的tree-shaking案例

下面结合实际代码来解释webpack2是如何实现tree-shaking的，示例代码可到github进行下载。

示例代码结构如图：src中index.js为入口文件，module.js是测试的模块文件，dist中是产出的文件。

根据webpack官网的提示，webpack支持tree-shaking，须要修改配置文件，指定babel处理js文件时不要将ES6模块转成CommonJS模块，具体作法就是：

在.babelrc设置babel-preset-es2015的modules为fasle，表示不对ES6模块进行处理。

// .babelrc文件
{
  "presets": [
    ["es2015", { "modules": false }] 
  ],
  "comments": false
}

在webpack.config.js中设置babel-preset-es2015的modules为fasle，表示不对ES6模块进行处理。　　

// webpack.config.js
...
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        ["es2015", { "modules": false }]
                    ]
                }
            }
        ]
...　　

而后在module.js文件中建立三个模块sayHello，sayBye，sayHi，并在index.js引用sayHello，sayHi；

// module.js
export const sayHello = name => `Hello ${name}!`;
export const sayBye = name => `Bye ${name}!`;
export const sayHi = name => `Hi ${name}!`;

　　 

// index.js
import { sayHello } from './module';
import { sayHi } from './module';
const element = document.createElement('h1');
element.innerHTML = sayHello('World') + sayHi('my friend');
document.body.appendChild(element);

　　

而后在当前目录执行 webpack 命令后，产出bundle.js的代码以下

 

/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return sayHello; });
/* unused harmony export sayBye */
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return sayHi; });


var sayHello = function sayHello(name) {
  return "Hello " + name + "!";
};
var sayBye = function sayBye(name) {
  return "Bye " + name + "!";
};

var sayHi = function sayHi(name) {
  return "Hi " + name + "!";
};

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__module__ = __webpack_require__(0);



var element = document.createElement('h1');
element.innerHTML = Object(__WEBPACK_IMPORTED_MODULE_0__module__["a" /* sayHello */])('World') + Object(__WEBPACK_IMPORTED_MODULE_0__module__["b" /* sayHi */])(' to meet you');
document.body.appendChild(element);

/***/ })

　　

从上面能够知道，sayBye模块被打上了unused harmony export标签，sayHello和sayHi被设置为__webpack_exports__的属性，在入口文件中经过读取__webpack_exports__的属性取出。

bundle.js文件虽然对多余的模块进行了标记，可是并无删除，这是由于webpack尚未执行压缩混淆操做，能够经过webpack -p命令对产出进行压缩处理，这时候会把打了unused harmony export 标签的模块删除掉。

webpack的tree-shaking的局限性

（1）只能是静态声明和引用的ES6模块，不能是动态引入和声明的；

在打包阶段对冗余代码进行删除，就须要webpack须要在打包阶段肯定模块文件的内部结构，而ES模块的引用和输出必须出如今文件结构的第一级（'import' and 'export' may only appear at the top level），不然会报错。

// webpack编译时会报错
if (condition) {
  import module1 from './module1';
} else {
  import module2 from './module2';
}

　　

而CommonJS模块支持动态结构的，因此不能对CommonJS模块进行tree-shaking处理。

（2）只能处理模块级别，不能处理函数级别的冗余；

 由于webpack的tree-shaking是基于模块间的依赖关系，因此并不能对模块内部自身的无用代码进行删除。

（3）只能处理JS相关冗余代码，不能处理CSS冗余代码。

目前webpack只对JS文件的依赖进行了处理，CSS的冗余并无给出很好的工具。最近听了一个讲座，提到了webpack-css-treeshaking-plugin，该插件基于AST对CSS冗余代码进行了很好的处理。