写在前面
最近在读霍老师的《Vue.js设计与实现》，感觉收获很多，由于霍老师是 官方 Vue 维护成员，会从很通俗易懂的角度去讲 Vue 的实现 细节 。而不是按照 源 码死 讲解 ，很不错，推荐给大伙!
直奔主题
Tree -s haking 的本质其实就是消除无用代码也就是 dead code ，减小打包后文件，不太清楚 dead code 概念的 不用 担心，下面会讲到。 Tree-Shaking 是打包构建工具常用的优化 手段 。在我们日常的开发最常使用的，可能就是 ESM 的使用，会触发默认的 Tree-Shaking 机制并对无效代码进行处理。
//utils.js
const str = "Hello Word";
export function fu n1 (){
console. LOG (str);
}
e xp ort 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. PR ototy PE .run = function(){
console.log("run");
}
Array.prototype.stop = function(){
console.log("stop");
}
export const fun1;
虽然没有被调用，但是在打包后生成的 build 文件中依旧会包含这段代码，是因为无法静态解析这段代码是否真正无用，如果删除掉了 utils.js 会导致 Array 原型上方法也失效。所以，这就引出了另一个很 重要 的概念就是， 副作用，如果一个 函数调用 会产生副作用，那么就不能将其移除。什么是副作用？ 简单 地说，副作用就是，当调用函数的时候会对外部产生影响
当我们遇到打包工具无法静态解析的代码，可以通过打包工具的另一个机制去做手动告知
import {fun1} f rom './utils'
/* # __PURE__*/ fun1()
这里的 /*#__PURE__*/ 就是告知打包工具 这段代码的调用不会产生副作用，你随便删 ，设置过完后再次重新打包就会发现， Array 原型上声明 stop 就不包含在内了！
知道 了这些，那我们日常 应该 如何 利用 Tree-Shaking 机制呢？
如在我们的代码中，封装根据开发环境， 设置动态api 、 不同调试log 。可以通过打包工具的预构建常量，配合判断，如果环境不是测试环境，会被检测为 dead code 从而移出构建最终的构建文件中。实现优化打包体积，并且不会影响我们开发的环境。
//webpack. config .js
new webpack. define Plu gin ({
__DEV_OPTIONS_: JSON.stringify(true)
})
//index.js
if(__DEV_OPTIONS_){
//初始化开发环境下的相关配置
in IT Log();
setApi();
}
最后
以上就是本篇 文章 的全部内容了！学习思路来自《Vue.js设计与实现》分享给大家！
更多关于Tree-Shaking 机制的资料请关注其它相关文章！
@H_130_ 126 @ 您可能感兴趣的文章: tree shaking功能及使用原理详细解析 JS 加载性能Tree Shaking优化详解 tree shaking对打包体积优化及作用 浅谈Webpack4 Tree Shaking 终极优化指南 webpack的tree shaking的实现方法 @L_ 777 _11@总结
以上是 为你收集整理的 Tree-Shaking 机制快速掌握 全部内容，希望文章能够帮你解决 Tree-Shaking 机制快速掌握 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Tree-Shaking 机制快速掌握的详细内容...