入门webpack(九)tree shaking

本文主要介绍AST，DCE,着重介绍tree shaking以及如何在webpack中使用treeshaking.

AST

抽象语法树（Abstract Syntax Tree）也称为AST语法树，指的是源代码语法所对应的树状结构。也就是说，对于一种具体编程语言下的源代码，通过构建语法树的形式将源代码中的语句映射到树中的每一个节点上。
可以通过在线演示AST来看相关demo，从在线演示可以看到，输入一段JavaScript程序，会对应生成AST。这个语法树最顶层是Program body。

DCE

DCE( dead code elimination),无用代码清除，这里的无用代码指对程序运行结果不产生影响的代码，删除这些代码不该变程序运行结果，并带来更多的益处

• 减少程序的体积
• 避免执行不必要的操作，减少程序运行的时间
• 便于将来对程序架构进行优化

dead code主要包括以下两方面

• 程序中没有没执行的代码
• 那些导致dead variables （只written不再read）的代码

我们下面着重要介绍的tree shaking只是DCE的一种方式。
Dead code elimination。

Tree Shaking

如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？

webpack2版本开始引入tree shaking 概念，简单来说，tree shaking在打包时可以忽略哪些没有被用到的代码。
webpack中tree shaking主要分为两个方面，

• JS tree shaking： JS文件中定义的多个方法或者变量没有全部使用。
• CSS tree shaking： 样式通过css选择器没有匹配到相应的DOM节点。

使用场景

• 常规优化
• 使用第三方库的某个功能

使用tree shaking对JS进行优化

tree-shaking-demo

在util.js文件中定义了三个函数，其中只有function a() { return 'this is a'} 被使用，

//webpack.config.js
var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')   //引入插件

new webpack.optimize.UglifyJsPlugin() //使用插件

在打包后的app.bundle.js中可以看到只有function a被打包了。

对第三方插件或者库进行优化
在app.js中引入jquery的ajax方法，首先不使用插件进行打包，打包后可以发现app.bundle.js将整个jquery都打包进去了，大小为272kb，现在使用插件进行tree shaking，可以看到app.bundle.js文件为88.5kb，将jquery库中没有用到的方法或功能没有打包，大大减小了文件的体积。

demo

---

CSS tree-shaking

purifycss-webpack（options）

options 
     paths：glob.sync([ ])    //glob多路径

npm install glob-all --save-dev
npm install purifycss-webpack --save-dev

引用
var PurifyCSS = require('purifycss-webpack')
使用
new webpack.optimize.UglifyJsPlugin()