Vue.js设计与实现:框架设计的核心内容

在讲解之前,我首先声明一点,这文章是Vue.js设计与实现部分内容,我推荐大家买这本书,同时也买这本书,这本书是霍春阳编写的,也是框架设计者老大哥推荐的。

框架的大小也是衡量框架的标准之。在实现同祥功能的情况下，当然是用的代码越少越好，这样体积就会越小，最后浏览器加载资源的时间也就越少。这时我们不禁会想，提供越完善的数在信息就意味着我们要端写更多的代码，这不是与控制代码体积相悖吗?没错,所以我们要想办法解决这个问题。
        当我们去看Vue3.js的源码你会发现一个神奇的事情那就是,每一个warn函数的调用都会配合_DEV_常量的检查.

if(__dev__&&!res){

warn:('Failed to mount app:.....')

}

如果我们用console.log进行打印,那肯定是true,但是假设说,我们把dev替换成所谓的false,就永远不会被执行,判断条件永远为假.

通过以上来看,虽然说通过构建工具预定义的常量_DEV_,能够在生产环境中使得框架不包含用于打印框架警告信息的代码,从用户角度来看,这么做这是仍然不够的,我们继续用Vue.js做例子,Vue.js建了很多组件,,例如<Transition>组件,如果我们的项目中根本就没有用到该组件,那么它的代码需要包含在项目最终的构建资源中吗?答案是"当然是不需要",那么如何做到这一点?这就不得不提到本节的主角Tree-Shaking.

什么是Tree-Shaking呢?在前端领域,这个概念因rollup.js而普及.简单地说,Tree-Shaking指的就是消除永远不被执行的代码,也就是排除dead code,现在无论是rollup.js还是webpack,都支持Tree-Shaking.

想要实现Tree-Shaking,必须满足一个条件,模块必须是ESM(ES Module)，因为Tree-Shaking依赖ESM的静态结构,我们以rollup,js为例看看Tree-Shaking如何工作

demo

---------package.json

---------input.js

---------utils.js

首先需要安装rollup.js 

yarn add rollup -D

或者 npm i(install) rollup -D

详情见本书15页

后期我们会继续更新.