JSファイルの読み込みパフォーマンス（AngularJS）を改善する方法は？

Question

Webパフォーマンスに問題があります。問題は、ページが読み込まれているときに遅延があることです。

私は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 & deferを追加して、レンダリングによるリソースのダウンロードのブロックを回避します。

Answer 2

あなたは本当にそれほど膨大AngularJSと角用素材であることminified filesを使用することができます。

• angular.jsは1.2メガバイトで、縮小さ160Koです。 Source

• angular-material.jsが1.2MBの場合、290Koです。これを行う Source

あなたは81％することにより、これらのファイルのためのあなたの読み込み時間を改善します。

_{詳細：100 - [450×100 /（+ 1200 1200）〕= 81.25パーセント}

Answer 3

あなたはそのサイズが表示された場合、彼らは他のライブラリよりも大きいです。たぶん、それはより大きなファイルをダウンロードするためにいくつかのサーバー設定することができますか？それは何らかの種類のセグメンテーションである可能性があります。