教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

webpack打包體積優(yōu)化方法有哪些？【webpack打包優(yōu)化】

更新時(shí)間:2021年01月15日16時(shí)19分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

webpack打包優(yōu)化可以從以下幾個(gè)方面來(lái)調(diào)整


1)去掉不必要的插件

開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境使用同一個(gè)webpack配置文件，導(dǎo)致生產(chǎn)環(huán)境打包的js文件包含很多沒(méi)必要的插件(如：NoEmitOnErrorsPlugin)

2)提取第三方庫(kù)

第三方庫(kù)和源代碼在一起打包體積會(huì)很大

CommonsChunkPlugin 提取代碼中公共模塊，然后將公共模塊打包到一個(gè)獨(dú)立的文件中，以便在其他的入口和模塊中使用。

3)代碼壓縮

內(nèi)置插件UglifyPlugin,加入這個(gè)插件編譯速度會(huì)變慢，所以一般只在生產(chǎn)環(huán)境啟用

4)代碼分割(webpack的code split配合router)

·webpack的code spliting特性可以將代碼庫(kù)分割成按需加載的塊(chunks)

·AMD/commmonJS指定不同的方法去做代碼按需加載，他們支持代碼分割并充當(dāng)分割點(diǎn)

·不支持es6的模塊系統(tǒng)

5)設(shè)置緩存

對(duì)于靜態(tài)文件，第一次獲取之后，文件內(nèi)容沒(méi)有改變的話直接讀取緩存，但是如果緩存時(shí)間過(guò)長(zhǎng)文件要更新的話可以打包后的文件名加入hash值。


猜你喜歡：

Window對(duì)象是什么?

Javascript基礎(chǔ)入門(mén)視頻教程

什么是Sass?Sass的優(yōu)勢(shì)有哪些?

什么是jQuery? jQuer能做什么?

傳智web前端培訓(xùn)班

0 分享到：
和我們?cè)诰€交談！