「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」
前言
本篇文章将稍微来介绍一下什么是 Tree shaking 以及在 rollup 中是如何进行 Tree shaking 的，并且还会例举一个 rollup 插件 -- rollup-plugin-replace 是如何通过替换静态变量来开启一些环境开关的。
什么是 Tree shaking
在我们 JavaScript 项目达到一定体积的时候，将代码分成一个个模块将会有利于我们进行代码管理。但是在最后使用的时候，会出现实际上完全没有使用到的代码。
Tree shaking 是通过消除无用代码来优化代码体积的一种方法
比如我们来看一段代码：
const HELLO = "hello";
if (HELLO) {
console.log(HELLO);
} else {
console.warn("HELLO is nodefind");
}
很明显因为变量 HELLO 是一个常量，所以代码中的 else 分支是绝对不会运行的，那么在进行 Tree shaking 之后它会变成这样：
const HELLO = "hello";
{
console.log(HELLO);
}
不只是代码中定死的逻辑分支，也可能是项目当中定义了，却没有调用的方法，或者写了，却没有引入的模块，这些都算是无用代码，那么在 Tree shaking 时候就可以去掉这些无用代码，起到减少项目体积的作用。
rollup 中的 Tree shaking
在 rollup 打包的过程当中，会自动帮我们去做一个 Tree shaking，我们用 rollup 打包一下上面的例子：
可以看到，打包过后的代码当中，rollup 自动去帮我们做了一个 Tree shaking。
但是在 rollup 的 Tree shaking中，会存在这一些副作用，比如使用了原型链、给window加了属性、立即执行函数引用了外部变量等一些你觉得没有副作用的经过bable其它的打包一下，就有可能会产生副作用，会打入一些无用的代码进入包中。
vue 中的示例
这是在 Vue3 中出现的一段代码，我们的关注点应该放在 __DEV__ 这个常量上面，代码并不难理解，在 __DEV__ 为 true 的时候，就会在使用不当的时候传出警告来警示用户需要注意的地方。
这样就是 Tree shaking 在开发过程中的一种使用方式，我们可以吧一些生成过程才会触发的警告通过一个开关来开启，这样会方便我们去调试代码，然后在使用的时候就关闭掉这个开关，这样控制台当中就不会输出过多的警告。
rollup-plugin-replace 实现环境开关
接下去我们将使用 rollup 的 rollup-plugin-replace 插件来实现一个类似于上面 Vue 的环境开关，首先我们要来安装一下插件：
npm install --save-dev rollup-plugin-replace
然后将它添加到配置文件的插件中去，并且我们也设定一个 __DEV__ 来作为区分环境的变量：
接着我们就来写一段代码，看一下定义了环境开关开启和关闭会生成什么样不同的代码。
我们简单的定义了，在 __DEV__ 开启的时候传参错误会输出警告来提示用户错误出现的情况，然后使用的时候如果这个错误是无伤大雅的，那么可以关闭掉这个开关，这样就不会输出警告了。
总结
在我们封装自己的组件库或者插件的时候，可以灵活的去使用开关来改变在不同的环境下输出不同的结果，这样可以给开发者带来一个良好的使用体验，及时的查找到错误发生的地方，提高开发的效率。
