Tree Shaking
什么是Tree Shaking
Tree-shaking （树摇）最早是由Rollup实现，是一种采用删除不需要的额外代码的方式优化代码体积的技术。
其本质是借助ES module的静态分析能力来消除无用代码的。
ES6中的模块是通过静态方式引用的，可以使用Tree Shaking而使用require的CommonJS模块规范，则是动态加载的，不适用Tree Shaking。因为没法在代码实际运用前来确定哪些模块是否被需要。
基本原理概述
利用ES6模块特性：
- 只能作为模块顶层的语句出现
- import的模块名只能是字符串常量
- import binding 是 immutable的，引入的模块不能再进行修改
代码删除： - uglify：判断程序流，判断变量是否被使用和引用，进而删除代码
实现原理可以简单的概况：
- ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
- 静态分析程序流，判断那些模块和变量未被使用或者引用，进而删除对应代码
副作用-sideEffects
Tree Shaking 失效的最主要的原因是函数存在副作用。首先理解下函数副作用，当我们调用某个函数时，该函数除了返回值之外，还产生附加的影响，例如修改全局变量，函数外的变量或修改参数等，称为存在副作用。
webpack 提供了 sideEffects 这个配置，我们在 package.json 中将这个配置设置为 false，意思就是 webpack 认为所有文件都是没有副作用的.
对于正常的应用类项目来说，配置 sideEffects 会有一个风险点，就是样式文件的引入会被忽略，我们需要申明样式类文件是有副作用的。
"sideEffects": [
"*.css"
]
使用
- 使用import export
- 确保没有编译器将您的 ES2015 模块语法转换为 CommonJS 的,因为babel默认编译为CommonJS
- 在项目的 package.json 文件中，添加 "sideEffects" 属性。
- 使用
mode为"production"的配置项以启用更多优化项，包括压缩代码与 tree shaking。
参考
webpack-tree shaking 文档
聊聊 Webpack4 的 Tree Shaking
浅析 Tree Shaking
Tree-Shaking的工作原理
Tree-Shaking性能优化实践 - 原理篇
