Vue

写在前面

近期在校霍老师的《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设计与实现》推荐给大家！我就是阿江，下篇文章再会