提高webpack打包速度

2021-10-24 21:15:41 字數 3107 閱讀 9096

隨時公升級webpack及其相關管理工具的版本,包括npm,node,yarn等。

每個版本都會有優化,同時webpack建立在node環境之上,node的公升級也會有一定的效率提公升

同樣安裝較新的npm和yarn工具,可以提高相互依賴的模組間的解析速度

loader的解析和處理較為耗時的,有可能的話我們可以使用exclude和include欄位來配置loader忽略與僅應用的檔案。

例如我們可以配置exclude來讓babel-loader不去處理node_modules資料夾下的內容,或者只處理src目錄下內容:

]

}

上述兩種方式可以減少loader涉入,降低執行頻率提高打包速度

之前筆記中上面我們使用了乙個外掛程式進行css的壓縮,但是實際上在開發環境下是不需要壓縮的,可以不需要這個外掛程式,可以提高開發過程中的打包速度。

此外盡量使用webpack官網推薦的外掛程式和使用方式,盡量不要使用第三方和自己建立的不可靠的外掛程式,有可能存在***

resolve這個引數之前沒怎麼提到過,但是有效的配置它可以簡化我們的import寫法。

有時候我們在react中可以看到這樣的引入:

import *** from './child/child'
這裡其實是需要resolve配置才能載入到./child/child.js上的:

resolve:
這樣寫之後webpack打包時會先去目錄下找js檔案,找不到再找jsx檔案,然後才會報錯。

此外他還可以根據from的目錄,來預設挑選一些檔案(根據檔名):

resolve:
此時webpack會先嘗試尋找index檔案,不存在再去找child檔案

最後我們resolve還支援任意字串去對映乙個模組,相當於給模組起個別名。

例如我們希望import乙個來自/a/b/c/child檔案,我們可以如下配置resolve來起乙個路徑別名:

resolve:

}

// import child from './a/b/c/child'

// 可以改寫為

import child from 'child';

是不是很方便?同時若路徑也變動,只需要修改resolve配置項就行,不需要每乙個from都進行修改

但是這種配置多了會存在效能問題,無論是extension還是mainfiles都建議不要配置太多,否則存在額外查詢耗時

不知道你們是否還記得前述筆記我們通過splitchunks實現**分割把node_modules下面的檔案打包到了vendors檔案中。

但是其實上述打包過程中這些不變的第三方模組每一次都會跟著業務**重新打包,如果可以復用這些的話是不是就可以提高打包速度?

這裡我們新建乙個webpack.dll.js配置檔案,用它來對第三方模組進行針對性打包(我們希望把3個工具庫打包到dll目錄下面):

...

module.exports=,

output:

}

然後配置乙個script來執行:

"build:dll":"webpack --config ./build/webpack.dll.js"
最後在dll目錄下會生成vendros.dll.js檔案

打包好的dll如何使用呢,首先我們在dll的config檔案中通過乙個全域性變數將其暴露出來:

output:
接著我們就可以通過vendors變數來引用

然後可使用add-asset-html-webpack-plugin(記得安裝)幫助我們在html檔案上增加一些靜態資源:

plugins:[

...,

new addassethtmlwebpackplugin()

]

通過以上操作針對第三方模組就可以進行單獨的打包與引用,不需要重複打包

但是目前還有乙個問題,我們只是把打包好了庫的js檔案並能夠引用,**裡面import的仍然是node_modules,並沒有真正用到打包的js檔案。

這裡就需要用到標題的外掛程式dllplugin了,它可以做乙個對映:

plugins:[

new webpack.dllplugin()

]

之後打包的時候會生成了manifest對映檔案,結合全域性變數和對映檔案來對源**進行分析,如果符合就可以進行對映。

然開啟common的配置檔案,加乙個:

webpack.dllreferenceplugin()
使用dll外掛程式,打包時候如果發現第三方模組在manifest.json時就不會在去node_modules裡面打包了。

總結一下:

最後補充一下你也可以給dll的配置檔案設定多個entry下的字段來進行拆分打包,例如:

entry:

...

這樣的話addasset外掛程式和dllreference外掛程式都要多配置乙份。

這裡我們其實可以把外掛程式的配置內容寫到乙個陣列中,通過node工具來動態生成plugin:

const files = fs.readdirsync(path.resolve(__dirname,'../dll'))

files.foreach(file =>)

}if(/.*\.manifest.json/.test(file)))

}})

有時候我們寫的**經常會import一些沒有用到的模組,如果沒有配置tree-shaking就會有很多冗餘**。

所以程式設計時候注意去掉沒有使用的包,或者通過tree-shaking去掉

也可以通過splitchunksplugin進行拆分,把大檔案拆成幾個小檔案,提高打包速度

根據不同環境進行合適的sourcemap打包,可以回頭複習下相關筆記

借助一些打包分析工具可以分析打包情況,例如哪個模組打包慢,通過流程分析發現問題,進行優化

例如開發環境下mode的配置,一些壓縮外掛程式的使用等等,需要具體根據環境區分配置

webpack 打包速度優化

const path require path const webpack require webpakc module.exports output plugins new webpack.dllplugin 混淆壓縮 new webpack.optimize.uglifyjsplugin 第三步...

Webpack 打包優化之速度篇

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

webpack打包快取 webpack打包效能分析

webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮,速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式,這可以有效減少構建時間,當然,該外掛程式應用於生產環境而非開發環境,配置如下 var paralleluglifypl...