写在前面

近期在校霍老师的《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设计与实现》推荐给大家!我就是阿江,下篇文章再会www.adminjs.CN前端开发

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:Vue