Tree-Shaking (副作用)

Tree-Shaking (副作用)

接着上个帖子提出的疑问，我们深入研究一下为什么没有剔除foo函数。

其实这里涉及到了Tree-Shaking中的第二个关键点—副作用。顾名思义，即一个函数的调用，可能对其他地方造成修改，那么在打包的过程中我们就不能将其剔除。这个时候又要有人说，这个foo函数仅仅时对对象的值进行了获取obj.foo,没有其他的修改。我们再一步深入，如果这个obj对象是一个通过Proxy代理的对象，读取它的属性就会触发该属性的get夹子，那在get夹子中会不会有造成其他变量的改变呢？我们无从获取，只有程序真正的运行我们才能知道，因此，只能将其保留在打包的文件中。

Javascript本身时动态语言，因此想要通过静态的方法去分析哪些代码为dead code是很有难度的。

小知识点引入

由于静态分析Javascript代码是很困难的，所以像rollup.js这类构建工具都会提供一个机制，让用户可以明确的告诉工具，哪些代码是不会产生副作用的，在打包的时候可以将其视为 dead code移除。

import {foo} from './utils'
/*#__PURE__*/ foo() 

注意注释代码 /*#__PURE__*/ ，其作用就是告诉 rollup.js，对于foo 函数的调用不会产生副作用，你可以放心地对其进行 Tree-Shaking，此时再次执行构建命令并查看 bundle.js 文件，就会发现它的内容是空的，这说明Tree-Shaking 生效