angularjs - 消除首屏内容中的渲染阻塞 JavaScript 和 CSS(Angular JS Controller )

Question

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

我认为实际上不可能做到这一点，因为当我将“async”作为属性放在 <script> 上时，angular 会抛出一个注入(inject)器模块错误。 .

我也曾考虑制作一个大型 Controller ，但效果并不理想。

该站点的链接是 https://coastalreign.com ，下面是 Controller 的代码:

<!-- 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>

提前感谢您提供专业知识!

Answer 1

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