Webpack Tree Shaking 中 sideEffec

参考: Webpack 4 tree shaking 终极优化指南

tree shaking的意思是，webpack在打包的时候将会剔除掉被没有被使用到的代码达到减小报体积，缩短http时间，起到一定效果的页面优化。

引用参考文档里的demo介绍说明，什么时候会进行tree shaking:

// 导入并赋值给 JavaScript 对象，然后在下面的代码中被用到
// 这会被看作"活"代码，不会做 tree-shaking
import Stuff from './stuff';
doSomething(Stuff);

// 导入并赋值给 JavaScript 对象，但在接下来的代码里没有用到
// 这就会被当做"死"代码，会被 tree-shaking
import Stuff from './stuff';
doSomething();

// 导入但没有赋值给 JavaScript 对象，也没有在代码里用到
// 这会被当做"死"代码，会被 tree-shaking
import './stuff';
doSomething();

// 导入整个库，但是没有赋值给 JavaScript 对象，也没有在代码里用到
// 非常奇怪，这竟然被当做"活"代码，因为 Webpack 对库的导入和本地代码导入的处理方式不同。
import 'my-lib';
doSomething();

之前一直不理解 tree shaking 中的 sideEffects 的作用，副作用：按中文习惯，应该理解为不好的内容，应该被剔除的，但总感觉差了那么点意思。

tree shaking 的触发前提是：

• 生产环境：mode = 'production'
• EsModules: import/export

具有副作用的文件不应该做 tree-shaking，因为这将破坏整个应用程序

Webpack 的设计者清楚地认识到不知道哪些文件有副作用的情况下打包代码的风险，因此默认地将所有代码视为有副作用。这可以保护你免于删除必要的文件，但这意味着 Webpack 的默认行为实际上是不进行 tree-shaking。

意思就是：被标明有副作用的代码就不会 tree shaking。