Tree-Shaking 机制快速掌握

写在前面

最近在读霍老师的《Vue.js设计与实现》，感觉收获很多，由于霍老师是官方Vue维护成员，会从很通俗易懂的角度去讲Vue的实现细节。而不是按照源码死讲解，很不错，推荐给大伙!

直奔主题

Tree-Shaking 的本质其实就是消除无用代码也就是dead code，减小打包后文件，不太清楚dead code概念的不用担心，下面会讲到。Tree-Shaking是打包构建工具常用的优化手段。在我们日常的开发最常使用的，可能就是ESM的使用，会触发默认的Tree-Shaking机制并对无效代码进行处理。

//utils.js
const str = "Hello Word";
export function fun1(){
    console.log(str);
}
export function fun2(){
    console.log(str);
}
//index.js
import { fun2 } from 'utils.js'

这里的fun1并不会被打包到最后生成 build 文件，证明fun1满足了dead code的条件，从而触发了Tree-Shaking机制。

dead code 条件

1.代码不会被执行，不可到达

2.代码执行的结果不会被用到

3.代码只会影响死变量（只写不读）

这里有一个例外 就是js由于是动态类型的语言 很难从纯编译下解析到当前是否是dead code 如：

//utils.js
function fun1(){
    console.log(str);
}
fun1.prototype.run = function(){
    console.log("run");
}
Array.prototype.stop = function(){
    console.log("stop");
}
export const fun1;

虽然没有被调用，但是在打包后生成的build 文件中依旧会包含这段代码，是因为无法静态解析这段代码是否真正无用，如果删除掉了utils.js 会导致Array原型上方法也失效。所以，这就引出了另一个很重要的概念就是，副作用，如果一个 函数调用会产生副作用，那么就不能将其移除。什么是副作用？简单 地说，副作用就是，当调用函数的时候会对外部产生影响

当我们遇到打包工具无法静态解析的代码，可以通过打包工具的另一个机制去做手动告知

import {fun1} from './utils'
/*#__PURE__*/ fun1()

这里的/*#__PURE__*/ 就是告知打包工具 这段代码的调用不会产生副作用，你随便删，设置过完后再次重新打包就会发现，Array 原型上声明stop 就不包含在内了！

知道了这些，那我们日常应该如何利用Tree-Shaking机制呢？

如在我们的代码中，封装根据开发环境，设置动态api、不同调试log。可以通过打包工具的预构建常量，配合判断，如果环境不是测试环境，会被检测为dead code从而移出构建最终的构建文件中。实现优化打包体积，并且不会影响我们开发的环境。

//webpack.config.js
new webpack.DefinePlugin({
 __DEV_OPTIONS_: JSON.stringify(true)
})
//index.js
if(__DEV_OPTIONS_){
    //初始化开发环境下的相关配置
    initLog();
    setApi();
}

最后

以上就是本篇文章的全部内容了！学习思路来自《Vue.js设计与实现》分享给大家！

更多关于Tree-Shaking 机制的资料请关注脚本之家其它相关文章！

最新评论