一:基本概念
1、字面意思是摇树,一句话:项目中没有使用的代码会在打包时候丢掉。分为css的tree shaking和js的tree shaking。
2、使用场景:1)常规优化。2)使用第三方库,但是只使用了部分功能。
二:JS tree shaking
在webpack4中已经移除了UglifyJsPlugin,只需要配置mode
为"production"
,即可显式激活 UglifyjsWebpackPlugin
插件。
下面说的是webpack3.10.0的实现方法:
(1)常规业务的tree shaking
1、webpack.config.js配置
const path = require('path');
var webpack = require('webpack');
module.exports = {
entry:{
app:'./src/app.js'
},
output:{
path:path.resolve(__dirname,'dist'),
publicPath:'./dist/',//设置引入路径在相对路径
filename:'[name].bundle.js',
},
plugins:[
new webpack.optimize.UglifyJsPlugin({
test: /\.js($|\?)/i
})
]
}
2、其他js文件配置
//a.js
import {a} from './common';
a();
//common.js
var a = function(){
console.log('a')
}
var b = function(){
console.log('b')
}
var c = function(){
console.log('c')
}
export {a,b,c}
打包成功后,会发现打包文件只有a函数,删除掉了b和c函数。这就代表JS的tree shaking成功了。
(2)第三方库的tree shaking
js tree shaking
利用的是 es6 的模块系统。而 lodash.js 没有ES6 的写法,直接打包的话,并不会有tree-shaking的效果。所以,安装库对应的模块系统即可。
$ npm i lodash-es --save-dev
// app.js
import { chunk } from "lodash-es";
console.log(chunk([1, 2, 3], 2));
备注:lodash不支持tree shaking,这个比较特殊。面对这种特殊情况,可以安装babel插件转化lodash。
三:css的tree shaking
以去除项目代码中用不到的 CSS 样式,仅保留被使用的样式代码。
// webpack.config.js
const path = require("path");
const PurifyCSS = require("purifycss-webpack");
const glob = require("glob-all");//glob-all
的作用就是帮助 PurifyCSS
进行路径处理,定位要做 Tree Shaking 的路径文件。
let purifyCSS = new PurifyCSS({
paths: glob.sync([
// 要做CSS Tree Shaking的路径文件
path.resolve(__dirname, "./*.html"), // 请注意,我们同样需要对 html 文件进行 tree shaking
path.resolve(__dirname, "./src/*.js")
])
});
四:Tree-Shaking的原理
1、tree-shaking的消除原理是依赖于ES6的模块特性。ES6模块依赖关系是确定的,和运行时的状态无关,可以进行可靠的静态分析。所谓静态分析就是不执行代码,从字面量上对代码进行分析,ES6之前的模块化,比如我们可以动态require一个模块,只有执行后才知道引用的什么模块,这个就不能通过静态分析去做优化。
2、分析程序流,判断哪些变量未被使用、引用,进而删除此代码。
缺点:1)对函数的消除效果比较好,但是对类的消除效果不好。2)只有使用es6的模块依赖才能tree-shaking。
外链:https://zhuanlan.zhihu.com/p/32831172
https://juejin.im/post/5a4dc842518825698e7279a9