如何提高JS文件的加载性能（AngularJS）？

Question

我的网络性能有问题，问题是我在页面加载视图时有延迟。

我检查了Chrome中的开发工具，我发现大部分时间都是angular.js，angular-material.js和angular.material.css。

见下图

我正在添加libs。

  <script src="bower_components/angular/angular.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="bower_components/angular-material-data-table/dist/md-data-table.min.js"></script>
    <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-material/angular-material.js"></script>

是否可以提高负载性能？

Answer 1

检查以下内容以提高性能

• 您正在使用这些库的开发版本。使用minified versions。转到该文件夹​​并找到angular.min.js并包含该文件夹。同样，对于所有库，使用缩小版本。
• 在Web服务器上启用gzip压缩以进一步缩小大小。
• 启用资源缓存（添加缓存标头）以在本地缓存资源，以便下次不会下载。
• 添加async＆amp; defer脚本标记以避免渲染阻止资源下载。

Answer 2

你可以使用对于AngularJS和Angular Material来说体积不大的minified files：

• angular.js为1.2MB，缩小为160Ko。 Source

• angular-material.js为1.2MB，缩小为290Ko。 Source

执行此操作，您将通过 81％来缩短这些文件的加载时间。

_{详情：100 - [450 * 100 /（1200 + 1200）] = 81.25％}

Answer 3

如果你看到它们的大小，它们比其他图书馆更大。也许它可以是一些服务器配置下载更大的文件？它可以是某种分段。