亲宝软件园·资讯

展开

Tree-Shaking 机制快速掌握

JS心法 人气:0

写在前面

最近在读霍老师的《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 机制的资料请关注其它相关文章!

加载全部内容

相关教程
猜你喜欢
用户评论