antd項目各類webpack打包方案

前言

項目後臺使用antd的組件，一直感受很好很強大。無奈總體打包的話太大，光是antd的js就有990k(3.1.1)，因此着手優化打包後的大小。

使用官方推薦的babel-plugin-import插件

基本上前期組件使用少的狀況下，這個插件完美解決了問題。這個插件實際上是優化了寫法，將本應該

import Button from 'antd/lib/button';
import 'antd/lib/button/style'; // 或者 antd/lib/button/style/css 加載 css 文件
複製代碼

優化成了

import { Button } from 'antd';
複製代碼

本質上是單獨引入了Button組件，打包的時候固然只會將Button組件打進去。

模板初始狀況

1. 使用CommonsChunkPlugin插件將react,,react-dom,react-router-dom包單獨導出成vendor.js。

2. 使用babel-plugin-import插件按需引入antd組件。

3. 項目初始包含兩個頁面，使用HashRouter：主頁(Home.js)->app.js和使用bundle-loader異步加載的列表頁(List.js)->app-list.js

   import ListC from 'bundle-loader?lazy&name=app-list!./List';
   const List = Bundle(ListC)
   ...
   <Route path={`${match.url}/list`} component={List} />
   複製代碼

4. 模板初始時沒有使用任何ui組件，build後各資源大小以下：

   app.js->15k
    app-list->1.5k
    vendor.js->150k(包含react,react-dom,react-router-dom)
   複製代碼

使用antd組件配合異步加載(以Button組件爲例，List和Home裏均使用了Button)

1. 只在List組件裏使用Button組件

   app.js->15k
    app-list->99k
    vendor.js->150k
   複製代碼

2. 只在Home組件裏使用Button組件

   app.js->113k
    app-list->1.5k
    vendor.js->150k
   複製代碼

3. Home和List組件都使用Button組件

   app.js->113k
    app-list->1.63k
    vendor.js->150k
   複製代碼

結論：能夠看出antd配合異步加載Button組件不會重複打包，若是Home和List組件都使用Button組件，只在app.js裏打包了Button組件

使用commonChunk將antd打入vendor，同時開啓antd按需引入(以Button組件爲例，List和Home裏均使用了Button)

app.js->94k
app-list->1.64k
vendor.js->1.38M !!!
複製代碼

結論：也就是說完整的antd被打入vendor，並且按需引用Button組件的時候又打包了一次

使用commonChunk將antd打入vendor，同時關閉antd按需引入:

app.js->15.2k
app-list->1.61k
vendor.js->1.38M !!!
複製代碼

結論：完整的antd被打入vendor，引用Button的時候雖然沒有重複打包，可是咱們強烈須要按需引入，畢竟antd 990k大。

開啓dll打包(react,react-dom,react-router-dom)，開啓CommonsChunkPlugin插件(react,react-dom,react-router-dom)，開啓antd按需引用

app.js->113k
app-list->1.61k
vendor.js->1.6k
common-1.0.0.js->161k
複製代碼

結論：DllPlugin插件其實與CommonsChunkPlugin做用差很少，區別是CommonsChunkPlugin每次從新打包打出的vendor.js都會改變，而DllPlugin插件打出的common.js是不變的。若是兩個插件同時使用而且打包的庫也相同(react,react-dom,react-router-dom)，那麼commonChunk打出的vendor內容基本上會全到common.js裏。antd按需引用的組件沒有被重複打包,此種狀況也就是說能夠省掉commonChunk組件打react,react-dom,react-router-dom的步驟了。

增長多入口(app.js app2.js),關閉commonChunk插件，開啓dll,開啓antd按需引用

app.js->114k(使用Button組件)
app2.js->4.88k(未使用Button組件)
app-list->1.63k(使用Button組件)
app-list2->105k(使用Button組件)
common-1.0.0.js->161k
複製代碼

結論：dll插件能夠達到commonChunk的做用，而後用此腳手架爲模板新開一個項目，發現common-1.0.0.js在另外一個項目中也通用，直到dll插件中打的庫發生改變(react,react-dom,react-router-dom)

使用webpack的externals屬性，將react,react-dom,react-router-dom經過script引入，不使用antd任何組件，不使用commonChunk和dll.

app.js->12.4k(不使用Button組件)
複製代碼

使用webpack的externals屬性，將react,react-dom,react-router-dom經過script引入，使用antd Button組件

app.js->115.k(使用Button組件)
app-list->1.63k(使用Button組件)
複製代碼

使用webpack的externals屬性，將react,react-dom,react-router-dom,antd經過script引入，使用antd Button組件

app.js->16.6k(使用Button組件)
app-list->1.61k(使用Button組件)
複製代碼

結論：此種方法成功把antd剝離出去了，可是html裏須要引入antd.min.js和antd.min.css和moment.min.js！！！，moment.min.js必須放在antd以前，不然datepicker組件會報錯。同時，.babelrc文件裏須要去掉babel-plugin-import的使用，若是不去掉，app.js會有115k，也就是說antd的Button組件仍是會被打進了app.js裏。

綜上：

1. 使用AutoDllPlugin插件替代webpack自帶的dllPlugin插件更加方便。
2. 使用AutoDllPlugin與commonChunk插件均可以，若是不要求多項目公用基礎js的話。
3. 使用extarnals沒法使用按需加載。
4. commonChunk+antd按需引入+頁面按需加載使用最方便。
5. 使用頁面按需加載時，爲防止組件被多個頁面重複打包，可將組件放到根組件上。例如：app-list與app-list頁面均使用Button,但根組件app.js沒有使用，那麼app-list和app-list都會把Button打進各自的js裏，打包時間將會延長，可將Button在app.js裏使用下，這樣app-list和app-list都不會在打Button了。

項目地址