如何消除 angular-cli 站点中的渲染块 js 和 css？答案

【问题标题】：how to eliminate the render block js and css in angular-cli site?如何消除 angular-cli 站点中的渲染块 js 和 css？
【发布时间】：2017-06-20 04:14:36
【问题描述】：

运行 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： enter image description here

【问题讨论】：

how to eliminate the render blocking in angular-cli site?的可能重复

标签： angular-cli

【解决方案1】：

问题是您仅在加载脚本后才呈现“首屏”页面内容。这意味着如果不等待资源加载，则无法呈现页面。

要解决此问题，您应该在服务器端呈现页面内容，并内联所有必要的 CSS，以在 head 部分呈现上述折叠内容。

然后，您可以将 Angular 应用安装到现有的内容容器上，并逐步增强网站。

【讨论】：