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 机制的资料请关注其它相关文章!
加载全部内容