前言

tree-shaking这个技术应用广泛，不仅仅是在前端，在很多领域都有应用，为什么面试官会常常问你tree-shaking，因为这个涉及到代码优化，写此篇文章之前还是先翻看了之前的一些相关文章，很多都是直接就讲原理了，我认为这对于这个概念本来就不是很清晰的小伙伴会带来降维打击，所以我要写这篇文章，如果你对这个概念还是较为困惑的话可以阅读此文，如果你已精通请略过。

tree-shaking

因为webpack的体量在这儿，我们就以webpack下的tree-shaking展开。先看概念：

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

tree shaking是用于消除js中的dead-code，它依赖了es6的module语法，也就是import和export，这个概念通过基于es module的打包工具rollup的出现而被广为人知。这是来自webpack官方的解释，我们获取了三个点，1.tree shaking是用来消除没用的代码的，2.tree shaking是基于es module语法的，3.另一个打包工具rollup也有tree shaking（因为webpack和rollup的tree shaking的原理不同，咱们这里不深究，你想想为什么构建工具vite会选择rollup作为打包，肯定是有原因的，作为卷王之王的程序员们致力于更快更强，如果你感兴趣为啥rollup打包会比webpack要快你肯定会再去翻阅相关的文章了）。 ok，咱们别扯远了，概念清楚了对吧，第二步该实际操作了，手把手走起： 重点来了，先明确一件事情，打包的概念别混淆了，什么时候需要tree shaking？是生产环境还是开发环境？那必然是生产环境。so，第一步先来把我们的配置文件和打包命令改好吧（红框标注）：

然后咱们该写源码了：

主打一个清晰易懂，a.js文件里导出了俩方法，入口文件里咱们却只引用了sayHi，那么webpack在打包的时候就会认为sayBye是dead-code给你shaking掉（never say goodbye 手动狗头），对吧，讲道理咱们是按照es module书写的代码，咱们打包一下看下生成的代码：

直呼好家伙，真棒嗨，果然给我们把没用的代码shaking掉了。 最后 聊一下side-effects，很多小伙伴可能不清楚副作用的概念，你需要了解pure function（纯函数就是固定输入，固定输出，且不对外部产生影响），我们还是通过代码来简单演示一下，先写一个副作用函数：

我们并没有用到add，但是打包结果依然将其加入，这就是副作用函数，会外部产生影响，webpack无法确认它是否会影响代码的最终执行，所以将其加入了打包。 如果我们在package.json里加入红框这句再次打包:

你会发现最终打包代码中就不会将副作用函数打包进去，意思是默认所有的代码都没有副作用，那么webpack打包的时候便可以放心的将没用的代码shaking掉，一般封装第三方库的时候会用到，我们在平时写代码的时候不需要这样配置。 看到这里相信你对tree-shaking应该有了一个初步的认知，如果想进阶的话可以去阅读其他小伙伴的原理相关的文章，当然了解tree-shaking的重要性对你日常写代码的规范起到了很大的作用，你知道了应该采用什么方式进行导出导入所需的依赖。

尾声

当对一个概念不清晰的时候可以先尝试的去找一些相关的资料翻阅有一个大体的认知，然后直接查阅官方文档，然后运用相关的概念通过demo去实践证实它，之后运用到你的项目中，最后再把它讲出来（学会分享），当别人再问起你相关的概念你就可以通过自己的语言来组织它。