webpack性能榨汁機

最近對項目的本地開發環境進行了打包速度優化，原有項目，網上能搜到的優化方案基本都加了，在16年低配mac pro 上打包時間爲25秒多，但我發現細節作一些調整可能大大下降打包時間，最終優化到7秒多

dll

原有項目是線上和本地公用一套dll配置，由於antd這類ui庫須要按需加載因此不能放到dll中，這時能夠單獨寫一個dll配置，將全部第三方庫添加到dll中。

這時由於.babelrc中添加了babel-plugin-import插件會致使優化不生效，因此須要對開發環境單獨配置babel

options的babelrc設置爲false，而後重寫一份babel配置，必定不要添加「import」插件

一個新問題，由於沒有import插件，致使全部antd組件樣式丟失。這時我在index-template.html中加入一行註釋<!-- local-style -->，在本地打包時將其替換爲antd相應版本在cdn上的css文件

緩存

cache-loader專治花裏胡哨！雖然你能在webpack的配置裏找到n種緩存設置，但我發現cache-loader能夠替代其它選項，它會在你的項目中建立一個 .cache-loader的文件夾，裏面存放緩存文件，由於是直接寫入硬盤，因此第一次打包的時候會多消耗幾秒

babel-loader & 多線程

上面的圖中能夠看到我將babel-loader升級到8+，新的preset和plugin都有了命名上的變化。preset-env是用來替代之前201X的，經過targets能夠指定目標代碼（編譯後代碼）的版本，由於是本地開發，能夠指定到chrome的高版本，這樣不少新語法都不須要轉換，能夠節省一點時間（打包速度在10秒如下以後減一秒都是10%的提高啊！）
不過這個方案要慎重使用，由於會形成線上本地環境不統一，難保不出現什麼神奇的bug

拔掉HappyPack提高性能

在測試的過程當中我發現一個神奇的事情，就是HappyPack反倒會下降打包時間，我通過反覆測試，彷佛babel-loader8+自帶了多線程優化，因此HappyPack已經沒用了（反而由於線程通訊形成了資源浪費）。babel-loader8+的cpu使用率以及打包時間和babel-loader6+加HappyPack是相差很少的，但我在google上搜索時並無看到有人說起此事，官網也沒看到有個說明（管他那麼多呢，能提高速度就行啦！）

後續計劃

這個項目是兩我的迭代一年份的代碼量，按照上面的配置大部分項目應該均可以優化到10秒左右的速度(看項目大小，20秒如下應該都是正常的)，還有一些小的優化細節對性能影響不大因此忽略掉了。目前webpack仍是3+版本，由於4的一些變化擔憂影響過大，暫時沒升級，升級以後應該還會有一些小提速

這7秒還不是最終的速度，我估計5秒應該沒啥問題，後面再想優化就須要腦洞大開了