本文介绍了如何消除angular-cli站点中的渲染阻塞?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

after running ng build --prod I can go into my index.html file in the newly created dist folder and add the async attribute to the bundled script tags to keep them from being blocking. this helps with website speed but sporadically crashes the site. is there an option in the angular-cli.json that would add this for me during the build in a better way?i ran my site through google's test my website and the only thing i have left to fix is Eliminate render-blocking JavaScript and css in above-the-fold content

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

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

Eliminate render-blocking JavaScript and CSS in above-the-fold content

您的页面有4个阻止脚本资源和1个阻止CSS资源.这会导致呈现页面的延迟.如果不等待以下资源加载,则无法呈现页面上的首屏内容.尝试延迟或异步加载阻止资源,或直接在 html .删除阻止渲染的JavaScript:

Your page has 4 blocking script resources and 1 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the html. Remove render-blocking JavaScript:

推荐答案

恐怕到目前为止,使用CLI还是不可能的.参见 https://github.com/angular/angular-cli/issues/3323对该主题进行讨论.

I'm afraid its not possible with the CLI as of now. See https://github.com/angular/angular-cli/issues/3323 for a discussion on the topic.

这篇关于如何消除angular-cli站点中的渲染阻塞?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-13 20:56