目前項目的webpack情況如下：
react+react-route+babel+eslint+webpack，在webpack-dev環(huán)境下使用sourcemap的打包
在沒有優(yōu)化之前
整體打包數(shù)據(jù)如下：
- 第一次打包時間43698ms
- rebuild小包12.12.js的時間為15949ms
-
具體打包圖片可以如下所示：
image.png
主要的問題：
- 第三方依賴全部存在app.js文件中，
- 在rebuild的過程中， app.js和12.12.js都重新打包，但是我們只是改動了12.12.js的代碼，
優(yōu)化第一步
- 將第三方插件單獨打包出來，將webpack的清單（manifest，存在于app.js中，隨著每次打包的hash值會發(fā)生變化，導(dǎo)致app.js重復(fù)打包）單獨打包出來
整體打包數(shù)據(jù)如下：
- 第一次打包時間54517ms
- rebuild小包12.12.js的時間為14212ms
-
具體打包圖片可以如下所示
image.png
存在的問題：
在rebuild的過程中，12.12.js還是包含了第三方的依賴庫。
優(yōu)化第二步
- 將12.12.js中的node_modules模塊單獨取出來（如下45.45.js模塊）
整體打包數(shù)據(jù)如下：
- 第一次打包時間49162ms
- rebuild小包12.12.js的時間為4483ms
-
具體打包圖片可以如下所示
image.png
如何進一步進行優(yōu)化呢？
對于目前rebuild的還是存在4-5秒，那么就分析一下，到底還能不能再 進行優(yōu)化呢？要解答這個問題，就需要分析一下，具體這個4-5秒的時間都花在了哪里。
首先，將soucemap功能關(guān)閉，發(fā)現(xiàn)rebuild的時間為：3032ms，所以這里面有
1秒鐘的時間花在了soucemap中去了其次，將eslint檢查代碼的功能關(guān)閉，發(fā)現(xiàn)rebuild的時間為：1530ms，所以這里面有
1.5秒的時間花在了eslint中去了將熱切換模塊功能關(guān)閉，發(fā)現(xiàn)rebuild的時間為：1233ms，所以這里面有
0.3秒的時間花在了hot-reload當中去了在所剩下的1233ms中，還有react-hot-loader，babel-loader，css-loader，sass-loader，postcss-loader等loader的解析，熱切換模塊功能的運行，所以所花的時間不算很多
再次進行優(yōu)化
- 將soucemap功能改變：將devtool: source-map改為devtool:cheap-module-eval-source-map
- 將eslint-loader設(shè)置：cache:true
最后的rebuild時間大概維持在2~3s左右。
