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的狀況下，大概有多大。

若有錯誤，歡迎留言指正。