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性能优化实践 - 原理篇