如何消除 Angular CLI 网站中的渲染阻塞？

Question

在运行ng build --prod之后，我可以进入新创建的dist文件夹中的index.html文件，并将async属性添加到绑定的脚本标签中，以防止它们被阻止。这有助于网站速度，但会间歇性地使网站崩溃。在angular-cli.json中是否有选项可以更好地在构建期间为我添加呢？

我通过谷歌的测试我的网站，唯一剩下要修复的是消除渲染阻塞的JavaScript和css在上方折叠内容中。

下面是我从https://developers.google.com/speed/pagespeed/insights/得到的更具体的结果。

您的页面有4个阻塞脚本资源和1个阻塞CSS资源，这会延迟页面的渲染。在等待以下资源加载完毕之前，无法呈现页面上的任何以上折叠内容。尝试推迟或异步加载阻塞资源，或直接内联这些资源的关键部分到html中。删除渲染阻塞JavaScript：

- Always Learn

---

@arvil请提供答案。 - Always Learn

Answer 1

目前来看，使用CLI无法实现此功能。请参考https://github.com/angular/angular-cli/issues/3323，了解有关此主题的讨论。

- tobi-or-not-tobi

---

正确，目前它还没有被添加到CLI中。我自己所做的是仅将async属性添加到第一个脚本元素出现。这很好地工作并满足了页面速度要求。我正在考虑编写一个小型的Node.js脚本，在ng构建过程之后运行以实现自动化。 - tobi-or-not-tobi

能否请您详细说明一下，并提供一些示例代码，这对我会很有帮助。因为我正在疯狂地尝试解决这个问题。 - Always Learn

同意，如果你有这方面的例子那就太好了。 - James Nurse

@DARKGuy 如果您使用CLI 8.2，则无需解决方法。脚本将使用defer属性添加到index.html中。在“现代”构建的情况下，脚本将使用type="module"添加，这些脚本默认情况下是延迟加载的。 - tobi-or-not-tobi

从 8.2.0 版本开始，经典脚本会自动添加延迟属性（模块脚本默认为延迟）https://github.com/angular/angular-cli/issues/3323#issuecomment-530374329 - Takatalvi