2017-12-26 9 views
1

で外部JSライブラリ/モジュールをロード。 私はそれをbower( 'angular-ui-tinymce')経由でインストールしました。うまく動作します。は、私はパフォーマンスの面で角度JSでの外部JSファイルをロードに関する質問があるAngularJS

私はこのライブラリをめったに使用していないので、毎回アプリの起動時にロードされています。これはindex.html async/deferのようにロードする方が性能が良いですか? (ブロッキングスクリプトを避けるため)

ユーザーが特定のモジュールを入力したときにのみ外部jsファイルをロードできますか?

ありがとうございました。

+0

あなたのスクリプトリンクにdefer属性を追加するだけでは可能ではないと思います。 – Rachmaninoff

+0

@ラフマニノフ、どうしてですか? https://bitsofco.de/async-vs-defer/ – badigard

+0

このファイルを見てくださいhttps://github.com/pablojim/highcharts-ng/blob/0.0.13/src/lazyload.js – Rachmaninoff

答えて

0

この場合、"パフォーマンス"と言うときは、あなたが想定しているバンドルのサイズを意味しますか?

あなたが考慮する必要があるのは、これが再び道路を登ってくる場合です。 いくつかの個々の要求ではなく、一括して束ねると、一番の依存関係が最もよく提供されます。

この場合ではありませんが、ブートストラップ時に構成する必要のある依存関係を含めていると、非同期にロードできませんでした。

あなたは両方の利点を最大限に活用したい場合は、いつでもバンドルしてアプリをCDNに置くことができます。

+0

ありがとう、@シルバー、私は、バンドルには "必要な" JSファイルだけが含まれ、できるだけ薄くしておくことを意味します。ほとんど使用されず、ダウンロードに多くの時間がかかる他のJSファイルはバックグラウンドでダウンロードされます。ユーザが特定のモジュールを入力したときに、それが必須ではないことが好ましい。そのため、バンドルから大きな外部ライブラリを除外して非同期呼び出しに配置すると、最初の読み込み時間(つまり「パフォーマンス」)が向上するのでしょうか? – badigard

+0

非同期呼び出しでなければ、それはブロッキングスクリプトなので、外部からロードする場合は、非同期にすることをお勧めします。 特定のモジュールにロードされているJSについては、これも実行できます(ただし、世界で最もエレガントなものではありません) どのバンドルツールを使用しているのかよく分かりませんが、webpackにはJSをオンデマンドまたは並行して使用することで、バンドルを小さくしてリソースの負荷優先順位を制御することができます(オンデマンドでモジュールをロードしてください)。 – Silver

+0

大丈夫です。 – badigard

関連する問題