如何消除 angular-cli 站点中的渲染阻塞？答案

【问题标题】：how to eliminate the render blocking in angular-cli site?如何消除 angular-cli 站点中的渲染阻塞？
【发布时间】：2017-10-29 07:16:18
【问题描述】：

运行ng build --prod 后，我可以进入新创建的 dist 文件夹中的index.html 文件，并将async 属性添加到捆绑的脚本标签中，以防止它们被阻塞。这有助于提高网站速度，但偶尔会导致网站崩溃。 angular-cli.json 中是否有一个选项可以在构建过程中以更好的方式为我添加这个？我通过谷歌测试我的网站来运行我的网站，我唯一需要修复的是在首屏内容中消除渲染阻止 JavaScript 和 css

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

消除首屏内容中的渲染阻塞 JavaScript 和 CSS

您的网页有 4 个阻塞脚本资源和 1 个阻塞 CSS 资源。这会导致呈现页面的延迟。如果不等待以下资源加载，则无法呈现页面上的任何首屏内容。尝试延迟或异步加载阻塞资源，或直接在html 中内联这些资源的关键部分。移除阻止渲染的 JavaScript：

【问题讨论】：

@arvil 请提供答案

标签： css html javascript angular

【解决方案1】：

恐怕目前无法使用 CLI。有关该主题的讨论，请参阅 https://github.com/angular/angular-cli/issues/3323。

【讨论】：

正确，目前尚未添加到 CLI 中。我自己所做的是将 async 属性添加到仅第一个脚本元素出现。这很好用并且满足页面速度。我正在考虑制作一个点亮的 nodejs 脚本，我可以在 ng 构建过程之后运行它以使其自动化。
你能详细说明一下吗..并提供一些对我有用的示例代码..请因为我要解决这个问题
同意，如果你有这样的例子，那就太好了。
@DARKGuy 如果您使用 CLI 8.2，则无需解决方法。脚本被添加到 index.html 并带有 defer 属性。在“现代”构建的情况下，默认情况下会添加带有 type="module" 的脚本。
从 8.2.0 版本开始，defer 属性会自动添加到经典脚本（模块脚本默认为 defer）。 github.com/angular/angular-cli/issues/…