渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。
打开 coverage 标签页:
![](https://img.haomeiwen.com/i2085791/bef2bc5d8f94e99f.png)
点击下图这个图标,会以 instrumenting 模式重新加载应用:
![](https://img.haomeiwen.com/i2085791/dbcef5ecb4d1e757.png)
结果显示,webpack 生成的 vendor.js 文件,有多达 40% 的代码并没有在 SAP Spartacus UI 首页加载的时候被执行:
![](https://img.haomeiwen.com/i2085791/cefc8779d2bde7f0.png)
前面有红色横条的代码,说明 home page 加载时没有被执行:
![](https://img.haomeiwen.com/i2085791/fb93770c32cb3052.png)
我们可以做个实验,如果 vendor.js 根本不加载,结果会如何?
点击这个 more options:
![](https://img.haomeiwen.com/i2085791/fdc19cdfcf06eb3d.png)
选择显示“Network request blocking”标签页:
![](https://img.haomeiwen.com/i2085791/64580fcd5e7ed2ac.png)
勾上“Enable network request blocking”的勾,添加 vendor.js:
![](https://img.haomeiwen.com/i2085791/1d3c5e314dbd2460.png)
重新刷新,这个 vendor.js 的加载果然被浏览器阻止了:
![](https://img.haomeiwen.com/i2085791/37801ef9f8644718.png)
SAP 电商云的 UI 首页也无法正常被加载了:
![](https://img.haomeiwen.com/i2085791/8f06069fd9474a6c.png)
更多Jerry的原创文章,尽在:"汪子熙":
![](https://img.haomeiwen.com/i2085791/97c4752c0e619c44.png)
网友评论