Webpack 2 中一些常見的優(yōu)化措施

Webpack 2中一些常見的優(yōu)化措施
分離第三方依賴
在開發(fā)環(huán)境下, 通常會采取 HMR 模式來提高開發(fā)效率. 但一般情況下, 我們只會更改自身的業(yè)務(wù)文件, 不會去更改第三方的依賴, 但 webpack 在 rebuild 的時(shí)候, 依舊會 build 所有的依賴. 因而, 為減少 rebuild 的時(shí)間, 我們可以分離第三方依賴, 在項(xiàng)目啟動之前, 將其單獨(dú)打包和引入.

多進(jìn)程構(gòu)建
Webpack的構(gòu)建過程是單進(jìn)程的，利用HappyPack可以讓loader對文件進(jìn)行多進(jìn)程處理，以此加快rebuild速度

提取公共的依賴模塊
無論是單頁還是多頁應(yīng)用，在生產(chǎn)環(huán)境下，通常都會利用CommonsChunkPlugin插件來提供公共的依賴模塊。但是這種方式會導(dǎo)致兩個(gè)問題：1.業(yè)務(wù)越復(fù)雜，第三方依賴會越多，vendor包會越大；2.沒有隔離業(yè)務(wù)路由組件，所有的路由都可能會去加載vendor，但并不是所有的路由組件都會依賴node_module下的所有模塊。所以我們應(yīng)該分析業(yè)務(wù)依賴和路由，盡可能將所有組件的公共依賴提取出來。

文件分離
文件分離主要是將圖片和CSS從js中分離。圖片和CSS都是Webpack需要構(gòu)建的資源，通過某種配置，圖片可以以base64的方式混淆在js文件中，這會增加最終的bundle文件的大小。在生產(chǎn)環(huán)境下，可以考慮將圖片和css從js中分離。

在生產(chǎn)環(huán)境下，通過自定義插件，將圖片的本地引用替換為CDN的鏈接
在生產(chǎn)環(huán)境下，通過ExtractTextPlugin來提取CSS

資源混淆和壓縮
Webpack提供的UgligyJS插件由于采用單線程壓縮，速度比較慢，可以使用Prarllel插件進(jìn)行優(yōu)化

Gzip壓縮
在生產(chǎn)環(huán)境下，如果想進(jìn)一步減少bundle文件的大小，可以使用Gzip壓縮

按需加載
在單頁應(yīng)用中，一個(gè)應(yīng)用可能會對應(yīng)很多路由，每個(gè)路由都會對應(yīng)一個(gè)組件；如果將這些組件全部放入一個(gè)bundle文件中，會導(dǎo)致最終的bundle文件比較大，因而，我們需要利用Webpack的Code Splitting功能，將代碼進(jìn)行分割，實(shí)現(xiàn)路由的按需加載。

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