首頁技術文章正文

webpack體積怎么優(yōu)化?有哪些方法?

更新時間:2021-01-15 來源:傳智教育 瀏覽量:

1577370495235_學IT就到黑馬程序員.gif

webpack打包優(yōu)化可以從以下幾個方面來調整


1)去掉不必要的插件

開發(fā)環(huán)境和生產環(huán)境使用同一個webpack配置文件,導致生產環(huán)境打包的js文件包含很多沒必要的插件(如:NoEmitOnErrorsPlugin)

2)提取第三方庫

第三方庫和源代碼在一起打包體積會很大

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

3)代碼壓縮

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

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

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

·AMD/commmonJS指定不同的方法去做代碼按需加載,他們支持代碼分割并充當分割點

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

5)設置緩存

對于靜態(tài)文件,第一次獲取之后,文件內容沒有改變的話直接讀取緩存,但是如果緩存時間過長文件要更新的話可以打包后的文件名加入hash值。


猜你喜歡:

VSCode如何調試TS代碼?VSCode斷點調試配置

Ts入門教程:黑馬程序員TypeScript入門教程

前端面試題:兼容性面試題匯總

如何讓圖片垂直居中?兩種方案分享給大家!

黑馬程序員培訓課程



分享到:
在線咨詢 我要報名
和我們在線交談!