简说tree-shaking

tree-shaking是前端领域一个比较常见的词了，在项目中有什么用呢？这个之前一直没搞明白，通过翻阅众多博文，自己在项目中试验了一下，弄清其大致流程，这里就做了个简单记录。

先看一段代码

// app.jsexport function A(a, b) {return a + b
}export function B(a, b) {return a + b
}// index.jsimport {A} from '/app.js'A(1, 2)// 当index.js引用了app.js的A函数，如果tree-shaking起了作用，B函数是不会被打包进最后的bundle的。

然鹅，在webpack的官网有一句话： rlies on the structure of ES2015 modules syntax , i.e.import an export,翻译一下就是tree-shaking依赖ES6的模块输入输出语法，如果你的模块引入方式是require等，tree-shaking是不会起作用的。

在开发打包中，我们常用的是babel, webpack,uglifyJs这三样神器，而tree-shaking就是在第一步起作用的，在webpack对js文件处理的过程中，先是babel-loader去处理js文件，处理过后，webpack进行打包处理，最后由ugligyJs进行代码压缩。babel的配置文件中有一项配置很关键，就是preset:

{"presets": [["env", {"modules": false  //关键点}],"stage-2","react"]
}

在这个配置里面env的options中有一个modules: false,这个是指示babel如何去处理import和export的关键，默认处理成require形式，如果加上此option,那么babel就不会把import转变成requier形式，为webpack进行tree-shaking创造了条件。

综上所述，简单来说tree-shaking就是删除项目中无用的代码，压缩项目体积。

webpack对文件tree-shaking的过程如下：

在认定某块无用后，会在处理过后写下一段注释，uglifyJs会根据这段注释去删除代码


function(module, exports, __webpack_require__) {/* harmony export */ exports["foo"] = foo;/* unused harmony export bar */;function foo() {return 'foo';}function bar() {return 'bar';}
}

在tree-shaking学习的过程中，可以对class进行tree-shaking，是比较有意思的，找了一个demo,支持tree-shaking:

1.首先使用loader去处理，实验阶段的代码，编译成es代码，这样webpack内部的编译器才能正确识别代码。


module: {
rules: [{test: /\.js$/,use: [{loader: 'babel-loader',options: {presets: ['babel-preset-stage-2', 'babel-preset-react']}},'eslint-loader'],exclude: /node_modules/}
]
}

2.通过webpack打包，并对代码进行tree-shaking,在打包完成的bundle后，和输出的文件之前，对最后的bundle进行兼容性处理。

plugins: [new UglifyJSPlugin(),  //  uglify要在babelPugin的前面new BabelPlugin({  //在这个插件内部进行最后bundle的兼容性处理test: /\.js$/,babelOptions: {presets: [env]}}),new webpack.DefinePlugin({'process.env.NODE_ENV': JSON.stringify('production')}),new HtmlWebpackPlugin({template: 'index.html'}),]

最后总结步骤：

1.先编译实验性质代码为标准代码，会涉及到babel-preset-stage-x插件

2.webpack打包代码并进行tree-shaking识别

3.uglifyjs进行代码压缩，并根据webpack标识删除多余代码

4.对最后的代码进行兼容性处理涉及到babel-preset-env插件

第三方类库的tree-shaking

在研究了许多第三方类库后，基本得出的结论是，tree-shaking是不能对大部分的第三方类库进行的。