在 Angular 6 中，在脚本标签中使用 defer答案

【问题标题】：In angular 6 use defer in script tag在 Angular 6 中，在脚本标签中使用 defer
【发布时间】：2019-08-03 20:04:19
【问题描述】：

我们的一些脚本包含在 index.html 中，一些存在于 scripts 标签下的 angular.json 文件中。为了提高页面速度，我添加了延迟标签并重新排序了脚本以正确执行。

index.html:(在body标签下)

    <body>
           <script type="text/javascript" src="app/assets/js/jquery.min.js"></script>
            <script type="text/javascript" src="app/assets/js/jquery-3.1.1.min.js"></script>
            <script type="text/javascript" src="app/assets/js/pixel-admin.min.js"></script>
            <script type="text/javascript" src="app/assets/js/jquery.slimscroll.min.js" defer></script>
            <script type="text/javascript" src="app/assets/js/select2.full.min.js" defer></script>
            <script type="text/javascript" src="app/assets/js/bootstrap.min.js" defer></script>
            <script type="text/javascript" src="app/assets/js/bootstrap-tabdrop.min.js" defer></script> 
        <app-root>
                <div class="page-loader" id="loader" style="display:block;">
                    <img alt="page-loader" src="app/assets/images/ajax-loader.gif" />
                </div>
            </app-root>
</body>

angular.json：（在脚本标签下）：

"scripts": [
          "src/app/assets/js/persist-all-min.js",
          "src/app/assets/js/persist-min.js",
          "src/app/assets/plugins/dropzone/dropzone.js",
          "src/app/assets/js/loader.js",
          "node_modules/datatables.net/js/jquery.dataTables.js"
          ]

使用上述 index.html 设置，系统工作正常，但根据 Gtmetrix 网站，页面速度降为 D(68%)。

如果我将延迟放在 jquery 或像素管理 js 文件上，则系统表现不佳。但页面速度提高到 B (53%)。
在 Angular 中保留这些脚本的最佳做法或位置是什么？
我可以在 angular.json 脚本中包含 defer 标记吗？
是否可以在任何 Angular 项目中使用的所有脚本中包含 defer 标签？如果可能的话，我该如何实现呢？

谢谢。

【问题讨论】：

Why won't AngularJS work with multiple defer scripts?的可能重复
请注意angular 6不是angular js

标签： angular angular6

【解决方案1】：

我从existing answer 了解到，您不能在 Angular 中使用 defer。

如果您考虑一下，这绝对是有道理的，因为延迟脚本下载可能会使应用程序引导失败。

我能想到的唯一快速解决方案是压缩脚本包。请参阅此answer。这将加快您的应用程序下载速度，并且可能对您的应用程序完全透明，由 Web 服务器和浏览器处理。

没有真正回答你的问题，但希望这会有所帮助。

【讨论】：

它现在使用 defer - 我不确定它何时开始，但我生成的文件现在肯定包含 <script src="/main.467cd4d1ec654176e48e.js" defer>。我实际上是使用服务器推送通过 HTTP/2 推送我的主文件以获得更快的下载 - 但延迟基本上意味着浏览器可以开始并行解释它们，并且可以按任何顺序添加它们。