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

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

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

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

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

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

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

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

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

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