前言
react+webpack4搭建前端項目分為三個章節(jié)。鏈接如下笼踩。目的是實現(xiàn)從零搭建一個react后臺管理系統(tǒng)
1亡嫌、react+webpack4搭建前端項目（一）基礎(chǔ)項目搭建
2掘而、react+webpack4搭建前端項目（二）react全家桶的使用
3于购、react+webpack4搭建前端項目（三）打包優(yōu)化
webpack配置的講解
4、react+webpack4.x搭建前端項目（四）配置抽取和區(qū)分環(huán)境
5斑胜、react+webpack4.x搭建前端項目（五）多頁面配置
6嫌吠、react+webpack4.x多模塊打包配置
這里小編推薦一個福利居兆，更多精彩內(nèi)容請點擊鏈接，點擊這里
這是第三章泥栖，webpack打包優(yōu)化
本編文章接著前兩篇文章（1、react+webpack4搭建前端項目（一） 2魏割、react+webpack4搭建前端項目（二）react全家桶的使用）項目的基礎(chǔ)上進行webpack打包優(yōu)化钢颂。廢話不多說啦！擼起袖子開始干遭垛！
主要從以下幾個方面進行：
react路由的異步加載-
css處理- 使用
mini-css-extract-plugin把css從bundle包中抽取 - 使用
optimize-css-assets-webpack-plugin壓縮css代碼 - 使用
postcss-loader操灿，autoprefixer對瀏覽器兼容性的css代碼加前綴
- 使用
-
js的處理- 使用
uglifyjs-webpack-plugin代碼壓縮 - 拆包趾盐，
js的bundle包的提取（拆包）
- 使用
前言
注意antd版本"antd": "^3.8.3",救鲤，高版本的antd官方把圖標庫也構(gòu)建到release包，所以導(dǎo)致打包變得很大斥扛，僅僅icon圖標庫就有幾百KB丹锹，請看下圖队他。如果遇到這個問題峻村，請降低antd的使用版本到3.8.3以前
下邊打包優(yōu)化的基礎(chǔ)代碼請點擊 源碼1.0.3粘昨。有不熟悉的同學(xué)可以看一下，下載該版本1.0.3芭析，在項目根目錄執(zhí)行 npm run dev吞瞪；同時切換到mock目錄，執(zhí)行 npm run dev芍秆，打開http://localhost:8081即可看到效果
主要實現(xiàn)的功能如下圖：
簡歷管理的查詢妖啥，刪除，修改：
用戶模塊的查詢蒿偎，修改：
用戶模塊的添加：
首先我們看一下沒有優(yōu)化前的js包大小诉位，執(zhí)行npm run build
這時候打包出的文件只有三個
index.html模板文件
reset.min.css是從靜態(tài)目錄copy進去的
app.1a9adec2b6012290869f.js是我們利用webpack打包生成的菜枷。這里邊包括項目中的所有js代碼，css代碼以及圖片data資源
工欲善其事必先利其器椿息，我們先安裝兩個非常有用的webpack插件
npm install -D clean-webpack-plugin webpack-bundle-analyzer
- clean-webpack-plugin 在打包的時候會刪除之前的打包目錄
- webpack-bundle-analyzer 在打包結(jié)束的時候坷衍，會啟動啟動一個服務(wù)在瀏覽器查看打包的大小和包含的內(nèi)容等
修改webpack.prod.config.js条舔，在plugins屬性下添加
new CleanWebpackPlugin(),
new BundleAnalyzerPlugin(),
開始打包優(yōu)化
路由的異步加載
我們知道想文件的異步加載需要使用import("xxx")孟抗，或者require.ensure這種方法適用webapck1.x 2.x钻心。所以這里采用import("xxx")铅协。
在vue中實現(xiàn)路由的異步加載很簡單，通過()=>import("xxx")就可以狐史，那么在react中我們也可以這樣異步加載
我們這里實現(xiàn)路由的異步加載借助react-loadable插件
詳細使用請點擊 react-loadable使用方法
1骏全、首頁編寫一個loadable.js實現(xiàn)異步加載組件
import Loadable from 'react-loadable';
const LoadableComponent = (component) => Loadable({
loader: component,
loading: ()=>null,
});
export default LoadableComponent;
2、修改路由組件的加載方式
