webpack4-Tree-Shaking优化

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 '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的状况下，大概有多大。

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