使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

渲染阻止資源(render-blocking resources)是浏覽器必須下載下傳、解析和執行才能顯示頁面的外部

JavaScript

或 CSS 檔案。 目标是僅運作正确顯示頁面所需的核心 CSS 和 JavaScript 代碼。

打開 coverage 标簽頁：

結果顯示，

webpack

 生成的 vendor.js 檔案，有多達 40% 的代碼并沒有在 SAP Spartacus UI 首頁加載的時候被執行：