共计 1218 个字符，预计需要花费 4 分钟才能阅读完成。
Tree-Shaking 概念由来已久，今天再来谈一谈，是因为 webpack4 中有了新的优化。简单的介绍下什么是 Tree-Shaking。
代码不会被执行
if(false) {
do something
}
代码只写不读
这样的代码可以称之为 dead code。再举个很简单的列子
a.js 中
export function readCookie(){
do something
}
export function createCookie(){
do something
}
b.js 中
import {readCookie} from ‘./a.js’;
readCookie()
因为 b 中并没有 import createCookie，故而在 webpack 打包的时候会将其标记为 unused harmony
最后在 uglify 阶段被删除掉。
现在是 es6 时代，所以大家都已经养成通过 export 暴露方法，所以没啥好说的。
但一切都是建立没有副作用的基础上的，不了解的可以先看下这篇文你的 Tree-Shaking 并没什么卵用
简单总结下，就是说如果暴露的方法，不是纯函数，可能有副作用（如参数是引用类型），那么在打包构建的过程中就不会被优化掉。举个非常明显的例子。阿里巴巴的 ant-design。
import {DatePicker} from ‘antd’; // 但是这样需要引入 babel-plugin-import 才能按需加载
import DatePicker from ‘antd/lib/DatePicker ‘; babel-plugin-importsg 实际上就是把上面的写法构建成了下面的写法
antd 里面实际上就是 export 所有的组件，但是没有引入的组件，因为副作用，不能删除，所以才有了按需加载的说法。
可随着 webpack4.0 的到来。它已经为我们消除了副作用。亲自测试了下。
采用 import {DatePicker} from ‘antd’ 引入的文件大小为 1.18。采用 import DatePicker from ‘antd/lib/date-picker’; 引入文件大小为 1.23。有点点差别甚至还高了，但不纠结，我们只需要知道就是上面的引入方式根本就不会比下面的所谓的按需引入方式大。。而且我并没有引入 babel-plugin-import。
即便根据文件大小，可能还有朋友持怀疑态度。那我还去打包后的代码里面截图下。
我搜索了 Breadcrumb 这个组件，但是没有搜索到。随后我 import {DatePicker, Breadcrumb} from ‘antd’; 进来这个组件，并打包。
可以看见 import 之后，能够搜索到了。并且文件大小由 1.18 升到了 1.19
好了。webpack4 赶紧用起来。因为最近才接触 ant-design。所以没有在 webpack 低版本的时候打包过 ant-design。如果哪位兄弟还没升级的，可以回复下，看看在不按需加载 ant-design 的情况下，大概有多大。
如有错误，欢迎留言指正。