消除首屏内容中的渲染阻塞 JavaScript 和 CSS（Angular JS 控制器）答案

【问题标题】：Eliminate render-blocking JavaScript and CSS in above-the-fold content (Angular JS Controllers)消除首屏内容中的渲染阻塞 JavaScript 和 CSS（Angular JS 控制器）
【发布时间】：2016-07-22 21:54:19
【问题描述】：

我正在尝试使用 MEAN 堆栈应用程序优化我的页面速度。我遇到了应该消除渲染阻塞的 Javascript 和 CSS 的问题。我已经到了几乎消除所有东西的地步，除了必须加载的控制器。

我认为实际上不可能做到这一点，因为当我将“async”作为<script> 的属性放置时，angular 会引发注入器模块错误。

我也想制作一个大型控制器，但效果不佳。

该网站的链接是https://coastalreign.com，下面是控制器的代码：

<!-- ANGULAR CUSTOM -->
<script src="js/app.js"></script>
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/ProductCtrl.js"></script>
<script src="js/controllers/ProductsCtrl.js"></script>
<script src="js/controllers/CartCtrl.js"></script>
<script src="js/controllers/TrackOrderCtrl.js"></script>
<script src="js/controllers/CheckoutCtrl.js"></script>
<script src="js/controllers/DesignerCtrl.js"></script>
<script src="js/controllers/SublimationCtrl.js"></script>
<script src="js/controllers/LocationCtrl.js"></script>
<script src="js/controllers/ServiceAreaCtrl.js"></script>
<script src="js/controllers/CategoriesCtrl.js"></script>
<script src="js/services/getCategoryText.js"></script>
<script src="js/controllers/CustomQuoteCtrl.js"></script>
<script src="js/controllers/GradContestCtrl.js"></script>
<script src="js/controllers/four04Ctrl.js"></script>
<script src="js/controllers/popularGroupingCtrl.js"></script>

提前感谢您的专业知识！

【问题讨论】：

Remove render-blocking JavaScript的可能重复

标签： angularjs seo mean-stack

【解决方案1】：

问题在于请求的数量。我会捆绑 JS 文件（应用程序 + 供应商文件）并缩小它们。您可以使用 Chrome - 开发者工具 - 审核来检查性能提示

【讨论】：

【解决方案2】：

您可以使用 gulp-concat 来减少亚历山大的回答所建议的请求数量。然后你可以使用 gulp-minify 来减小文件的大小。如果您想放置异步选项，您将遇到一些额外的问题，因为您可能需要渲染依赖于角度的 HTML

【讨论】：