vue框架中的Three-Shaking

前端领域中 这个概念（Three-Shaking）由 rollup.js而普及 简单来说就是 消除那些永远不被执行的代码。

介绍

之前我们提到的 常量 DEV 能够在生产环境中不包含打印警告信息的代码。从而使得框架自身的代码量不随警告信息的增加而增加。 我们知道 vue.js内建了许多组件 例如过渡 如果我们项目中根本就没用到这个组件，那么它的代码需要包含在最终的构建资源中吗？答案是不需要的。如何做到这点这就得提到 Three-Shaking

想要实现 Three-Shaking 必须满足一个条件 即模块必须是ESM（ES Module）,因为它依赖ESM的静态结构。

安装

npm install rollup -D

使用示例

然后再 1.js创建两个函数导出去 然后再 2.js引用其中一个函数 并执行它 最后 npx rollup 2.js -f esm -o 3.js 这个代码的意思是 2.js为入口输出ESM输出的文件叫做 3.js 可以看到 3.js里并没有包含 app这个函数，由于我们没有使用 app这个函数，因此他们删除了。 但是仔细发现 add这个函数只是读取 对象的值，貌似也没什么必要，那么为什么没被删除呢？ 这就设计到另一个词了 副作用 如果一个函数调用会产生副作用 那么就不能被移除 副作用的意思是 调用函数本身会对外部产生影响。只是读取对象也会产生影响，如果obj对象是用 proxy代理创建的代理对象，那么当我们读取的时候就会触发 proxy代理 里的get函数 而到底产不产生副作用，只有代码运行时才能知道.

---

因为静态分级js代码很困难，所以像rollup.js都会提供一个机制，让我们明确的告诉rollup.js 放心吧 这段代码不会产生副作用你可以移除它 只需在 前面写上 /#PURE/ 是两个__PURE__ 一共有4个_ _ _ _
/#PURE/ 它的意思就是告诉 rollup,js 这个函数不会产生副作用 可以移除 上面的截图就是效果 3.js里为空

编写框架的时候需要合理使用 /#PURE/ 注释 在vue3.js的源码里大量使用了这个注释，这个注释在 webpack以及其他压缩工具都能识别它

这样不会对代码造成太大的心智负担，因为通常产生副作用的代码都是模块内的顶级调用 对于函数调用只要 bar没被调用那么foo自然不会被调用也就不会产生副作用。改注释在别的语句也能用，不仅仅是函数。

顶级调用

foo()  // 顶级调用
function bar(){
    foo()  // 函数内调用
}