Webpack 2 中一些常見的優化措施

Webpack 2中一些常見的優化措施

分離第三方依賴

在開發環境下, 一般會採起 HMR 模式來提升開發效率. 但通常狀況下, 咱們只會更改自身的業務文件, 不會去更改第三方的依賴, 但 webpack 在 rebuild 的時候, 依舊會 build 全部的依賴. 於是, 爲減小 rebuild 的時間, 咱們能夠分離第三方依賴, 在項目啓動以前, 將其單獨打包和引入.

多進程構建

Webpack的構建過程是單進程的，利用HappyPack可讓loader對文件進行多進程處理，以此加快rebuild速度

提取公共的依賴模塊

不管是單頁仍是多頁應用，在生產環境下，一般都會利用CommonsChunkPlugin插件來提供公共的依賴模塊。可是這種方式會致使兩個問題：1.業務越複雜，第三方依賴會越多，vendor包會越大；2.沒有隔離業務路由組件，全部的路由均可能會去加載vendor，但並非全部的路由組件都會依賴node_module下的全部模塊。因此咱們應該分析業務依賴和路由，儘量將全部組件的公共依賴提取出來。

文件分離

文件分離主要是將圖片和CSS從js中分離。圖片和CSS都是Webpack須要構建的資源，經過某種配置，圖片能夠以base64的方式混淆在js文件中，這會增長最終的bundle文件的大小。在生產環境下，能夠考慮將圖片和css從js中分離。

• 在生產環境下，經過自定義插件，將圖片的本地引用替換爲CDN的連接

• 在生產環境下，經過ExtractTextPlugin來提取CSS

資源混淆和壓縮

Webpack提供的UgligyJS插件因爲採用單線程壓縮，速度比較慢，可使用Prarllel插件進行優化

Gzip壓縮

在生產環境下，若是想進一步減小bundle文件的大小，可使用Gzip壓縮

按需加載

在單頁應用中，一個應用可能會對應不少路由，每一個路由都會對應一個組件；若是將這些組件所有放入一個bundle文件中，會致使最終的bundle文件比較大，於是，咱們須要利用Webpack的Code Splitting功能，將代碼進行分割，實現路由的按需加載。

參考文章：https://github.com/dwqs/blog/...