在项目开发中，可能会遇到这样的问题，就是一个方法库，我们只用了其中的一两个方法，但是打包的时候还是会把所有的方法都打包进去了。这明显是不合理的，怎么办呢？
下面给大家介绍webpack的tree shaking就是来解决这些问题的。
先来说说什么是tree shaking？
在webpack中一般有一个入口文件，像一个树一样，入口文件有很多依赖的模块，这些模块就像是树干。而tree shaking则是要把这棵树上多余的，用不到的方法给摇掉，其实就是去除用不到的方法，变量，起到优化的作用，特别是有第三方依赖的时候。
我们先看一个简单的demo。
//A.js
function methosA() {
console.log('this is methosA')
}
function methosB() {
console.log('this is methosB')
}
function methosC() {
console.log('this is methosC')
}
function methosD() {
console.log('this is methosD')
}
function methosE() {
console.log('this is methosE')
}
export {
methosA,
methosB
}
import { methosA } from './methods/A'
if(false) {
console.log('this is need delete code')
}
console.log(methosA())
//webpack.config.js
const path = require('path')
module.exports = {
entry: {
app: path.join(__dirname, 'src/app.js')
},
output: {
filename: '[name].bundle.js',
path: path.join(__dirname, 'dist')
}
}
如果是webpack3的版本，打包之后是会把A.js中的所有文件都打包进去，所以tree-sharking需要借助插件。
如果是webpack4版本，自动会进行压缩和打包。
那么如果有第三方插件怎么办呢？
import { methosA } from './methods/A'
import { chunk } from 'lodash'
console.log(chunk([1,2,3,4,5,6,7],2))
if(false) {
console.log('this is need delete code')
}
console.log(methosA())
比如我引入了lodash这个第三方模块，我们打包看看。
我们只用了一个方法，不可能会有这么大的文件，所以打包是失败的。
我们再加上插件（webpack中的新插件UglifyjsWebpackPlugin）
plugins: [
new UglifyJsPlugin()
]
再次打包也还是不行，这是为什么呢？
这需要讲几句tree-sharking的原理，tree-sharking是静态的去分析代码，而ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。（https://juejin.im/post/5a4dc842518825698e7279a9 一篇介绍tree-shaking原理的文章）
而很多的第三方为了考虑兼容性，代码都是通过babel编译过的语法。所以我们可以找一下这个第三方库的es版本。
import { methosA } from './methods/A'
import { chunk } from 'lodash-es'
console.log(chunk([1,2,3,4,5,6,7],2))
if(false) {
console.log('this is need delete code')
}
console.log(methosA())
再执行以下打包。
注(webpack还有一个插件babel-minify-webpack-plugin，集合了babel和uglify,也可以用来tree-sharking)
下面说说css的tree-shaking
css的tree-shaking也很简单，只要用一个插件(purifycss-webpack)，就能自动帮我们做tree-shaking.
在npm上有明确的用法
这里就不演示了。
网友评论