webpack4TreeShaking优化

Tree-Shaking概念由来已久，今天再来谈一谈，是因为webpack4中有了新的优化。
简单的介绍下什么是Tree-Shaking。

1. 代码不会被执行

if(false) {
do something
}

1. 代码只写不读

这样的代码可以称之为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 &＃8216;antd&＃8217; 引入的文件大小为1.18。
采用 import DatePicker from &＃8216;antd/lib/date-picker&＃8217;; 引入文件大小为1.23。有点点差别甚至还高了，但不纠结，我们只需要知道就是上面的引入方式根本就不会比下面的所谓的按需引入方式大。。而且我并没有引入babel-plugin-import。

即便根据文件大小，可能还有朋友持怀疑态度。那我还去打包后的代码里面截图下。

我搜索了Breadcrumb这个组件，但是没有搜索到。随后我import {DatePicker, Breadcrumb } from &＃8216;antd&＃8217;;进来这个组件，并打包。

可以看见import之后，能够搜索到了。并且文件大小由1.18升到了1.19

好了。webpack4赶紧用起来。因为最近才接触ant-design。所以没有在webpack低版本的时候打包过ant-design。如果哪位兄弟还没升级的，可以回复下，看看在不按需加载ant-design的情况下，大概有多大。

如有错误，欢迎留言指正。