Tree-Shaking 机制快速掌握

目录

• 写在前面
• 直奔主题
• 最后

写在前面

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

直奔主题

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

//utils.jsconst str = "Hello Word";
export function fun1(){
        console.LOG(str);
}
export function fun2(){
        console.log(str);
}
//index.jsimport {
 fun2 }
     From 'utils.js'

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

dead code 条件

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

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

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

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

//utils.jsfunction 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.jsnew webpack.definePlugin({
 __DEV_OPTIONS_: JSON.stringify(true)}
)//index.jsif(__DEV_OPTIONS_){
        //初始化开发环境下的相关配置    inITLog();
        setApi();
}
    

最后

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

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

• tree shaking功能及使用原理详细解析
• JS 加载性能Tree Shaking优化详解
• tree shaking对打包体积优化及作用
• 浅谈Webpack4 Tree Shaking 终极优化指南
• webpack的tree shaking的实现方法
• webpack4 CSS Tree Shaking的使用

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！