webpack5 和webpack4對比


1. 4打包后的文件 0.js,刪除文件緩存容易失效  5.文件指紋,路徑拼接方式,也可以手動配置:optimization(chunkIds,moduleIds)deterministic可以md5加密名字 如果加了,兩層md5    

2.5融合了prepack,預先執行一邊代碼(有一套自己的js解釋器),使代碼變得更小  原理:如果是純函數走替換模型,替換模型能替換掉哪些看起來復雜的函數,+ js解釋器就能做到prepack

相關:vite 原理 : esbuild + koa ,webpack  esbuild-loader 快(取消了prepack webpack5自帶prepack) esbuild沒有prepack

esbuild是用go把js編譯成二進制文件,所以快 ,Go版本的編譯速度比Rust快100倍,運行速度快10%左右(忘記了確切的數字,僅做感性的粗略評估)。

相關 :rollup parcel(swc,基於rust編譯成二進制文件,使用worker進程啟用多核編譯,文件系統緩存) gulp microbundle webpack(prepack) vite(esbuild koa)

相關: entry多了用微前端

1.webpack5 assets 會自由選擇替換url-loader 和file-loader 當然如果配置的話,對應的是assets/resource  發送一個文件導出url  assets/inline 轉化成data uri
assets/source 導出資源的源代碼 對應raw-loader
2.移除了cache-loader,配置cache屬性即可
3.webpack5增加了prepack 功能 
4.去掉了polyfill 遇到過問題,項目啟動不起來需要手動在resolve里配置fallback 或者安裝polyfill
5.增加了模塊聯邦
6.webpack4在編譯上做了優化用了v8-compiler-cache webpack5用了sparkplug
目標是減少Webpack的初始啟動時間和構建時間。該插件采用了多個策略,包括緩存機制,以提高構建性能

v8如何執行一段js 代碼

v8執行過程中既有解釋器Ignition,有編譯器TurboFan

1.將源代碼進行詞法分析、語法分析
2.ast詞義分析轉化為字節碼
3.解釋器Ignition解釋執行ast生成字節碼  字節碼是介於AST和機器碼之間的一種代碼
4.編譯器TurboFan執行字節碼發現熱點代碼會通過轉化為機器碼 

javascript性能優化需要做的三點: 
1.提升單次腳本的執行速度,避免長任務占用主線程,可以使頁面快速響應交互 
2.避免大的內連腳本,解析和編譯都會占用主線程 
3.減少javascript文件大小,提高下載速度

  

  

注意解釋器Ignition執行字節碼,執行過程中發現熱點代碼通過Turbofan編譯器轉換為機器碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM