Webpack 打包優化之速度篇

在前文 webpack 打包優化之體積篇中，對如何減小webpack打包體積，做了些**；當然，那些法子對於打包速度的提公升，也是大有裨益。然而，打包速度之於開發體驗和及時構建，相當重要；所以有必要對其做更為深入的研究，以便完善工作流，這就是本文存在的緣由。

在使用實際專案開發中，為了提公升開發效率，很明顯你會使用很多成熟第三方庫；即便自己寫的**，模組間相互引用，為了方便也會使用相對路勁，或者別名(alias)；這中間如果能使得webpack更快尋找到目標，將對打包速度產生很是積極的影響。於此，我們需要做的即：減小檔案搜尋範圍，從而提公升速度；實現這一點，可以有如下兩法：

webpack的resolve.modules配置模組庫（即 node_modules）所在的位置，在 js 裡出現import 'vue'這樣不是相對、也不是絕對路徑的寫法時，會去 node_modules 目錄下找。但是預設的配置，會採用向上遞迴搜尋的方式去尋找，但通常專案目錄裡只有乙個 node_modules，且是在專案根目錄，為了減少搜尋範圍，可以直接寫明node_modules的全路徑；同樣，對於別名(alias)的配置，亦當如此：

123

4567

891011

1213

1415

1617

1819

2021

function resolve (dir) 
module.exports = 
},...
}

需要額外補充一點的是，這是 webpack2.* 以上的寫法。在 1.* 版本中，使用的是resolve.root，如今已經被棄用為resolve.modules；同時被棄用的還有resolve.fallback、resolve.modulesdirectories。

webpack的裝載機(loaders)，允許每個子項都可以有以下屬性：

test：必須滿足的條件（正規表示式，不要加引號，匹配要處理的檔案）

exclude：不能滿足的條件（排除不處理的目錄）

include：匯入的檔案將由引導程式轉換的路徑或檔案陣列（把要處理的目錄包括進來）

loader：一串「！」分隔的裝載機（2.0版本以上，」-loader」不可以省略）

loaders：作為字串的裝載器陣列

對於include，更精確指定要處理的目錄，這可以減少不必要的遍歷，從而減少效能損失。同樣，對於已經明確知道的，不需要處理的目錄，則應該予以排除，從而進一步提公升效能。假設你有乙個第三方元件的引用，它肯定位於node_modules，通常它將有乙個 src 和乙個 dist 目錄。如果配置webpack來排除 node_modules，那麼它將從 dist 已經編譯的目錄中獲取檔案。否則會再次編譯它們。故而，合理的設定 include & exclude，將會極大地提公升webpack打包優化速度，比如像這樣：

123

4567

891011

1213

1415

1617

1819

2021

2223

2425

2627

2829

3031

3233

module: ,
],loaders: [,}
]}

webpack預設提供的uglifyjs外掛程式，由於採用單執行緒壓縮，速度頗慢；推薦採用 webpack-parallel-uglify-plugin 外掛程式，她可以並行執行 uglifyjs 外掛程式，更加充分而合理的使用cpu資源，這可以大大減少的構建時間；當然，該外掛程式應用於生產環境而非開發環境，其做法如下，

123456

new webpack.optimize.uglifyjsplugin(,
sourcemap: true
})

替換如上自帶的uglifyjsplugin寫法為如下配置即可：

123

4567

891011

var paralleluglifyplugin = require('webpack-parallel-uglify-plugin');
new paralleluglifyplugin(,
compress: }})

當然也有其他同型別的外掛程式，比如：webpack-uglify-parallel，但根據自己實踐效果來看，並沒有webpack-parallel-uglify-plugin表現的那麼卓越，有興趣的朋友，可以更全面的做下對比，擇優選用。需要額外說明的是，webpack-parallel-uglify-plugin外掛程式的運用，會相對uglifyjsplugin打出的包，看起來略大那麼一丟丟(其實可以忽略不計)；如果在你使用時也是如此，那麼在打包速度跟包體積之間，你應該有自己的抉擇。

123

4567

891011

1213

1415

1617

1819

2021

babel-loader is slow! 所以不僅要使用exclude、include，盡可能準確的指定要轉化內容的範疇，而且要充分利用快取，進一步提公升效能。babel-loader提供了cachedirectory特定選項（預設false）：設定時，給定的目錄將用於快取載入器的結果。

未來的webpack構建將嘗試從快取中讀取，以避免在每次執行時執行潛在昂貴的babel重新編譯過程。如果值為空（loader: 『babel-loader?cachedirectory』）或true（loader: babel-loader?cachedirectory=true），node_modules/.cache/babel-loader 則 node_modules 在任何根目錄中找不到任何資料夾時，引導程式將使用預設快取目錄或回退到預設的os臨時檔案目錄。實際使用中，效果顯著；配置示例如下：

123

4567

rules: [
,... ...
]

如果你確定乙個模組中，沒有其它新的依賴，就可以配置這項，webpack將不再掃瞄這個檔案中的依賴，這對於比較大型類庫，將能促進效能表現，具體可以參見以下配置：

123

4567

module: 
}

在前文 webpack 打包優化之體積篇中提到，引入dllplugin和dllreferenceplugin來提前構建一些第三方庫，來優化webpack打包。而在生產環境時，就需要將提前構建好的包，同步到dist中；這裡拷貝靜態檔案，你可以使用copy-webpack-plugin外掛程式：把指定資料夾下的檔案複製到指定的目錄；其配置如下：

123

4567

891011

1213

var copywebpackplugin = require('copy-webpack-plugin')
plugins: [
...// copy custom static assets
new copywebpackplugin()]

當然，這種工作，實現的法子很多，比如可以借助shelljs，可以參見這裡的實現 vue-boilerplate-template。

於深圳.南山 @17-08-10 last modify: @17-08-13

Webpack 打包優化之速度篇

webpack 打包速度優化

Webpack 打包優化之體積篇

提高webpack打包速度

Webpack 打包優化之速度篇

webpack 打包速度優化

Webpack 打包優化之體積篇

提高webpack打包速度

相關推薦