web-dev-qa-db-ja.com

読み込みシーケンスに起因するAngular2の初期ページ読み込みが遅い

seed からangle2プロジェクトを作成し、最初のページにいくつかのangularコンポーネントを追加しました。それらのいくつかは画像をロードします-これは比較的遅いですが、問題は:

  1. 私は大きなバンドル(〜1mb)を持っていますが、現在は 主題に関するガイド に従って、それを小さくするために取り組んでいます。
  2. 初期ロードはほんの数回のリクエストを行い、バンドルをロードし(通常〜3秒)、Angularアプリケーションからbootstrap(〜1.4秒)まで待機します。その後、すべてのコンポーネントとそのリソース(フォント、画像など)のロードを開始します。リクエストは次のようになります。

enter image description here

バンドルサイズを小さくした後でも、リクエストを行わずにアプリケーションが1.5秒間ブートストラップし、再びコンポーネントのリソースがロードされるまで〜1秒待機することを恐れています。私は約3秒以上のロード時間につながると思います。私のアプリは比較的単純なので、これは受け入れられないことがわかりました。

Q1:コンポーネントリソースをより早くロードし、コンポーネントのロード時にそれらを参照する方法はありますか?

Q2:アプリケーションを高速化する方法はありますかbootstrap=

私も他の提案を受け入れています:)

編集:

シードとともに提供されるAoTコンパイルを使用しており、app.jsファイルのサイズを小さくする手順を実行しました。問題は、ダウンロードされたapp.jsの最後と最初のコンポーネントのリソース呼び出しの間のgapに残っています。 enter image description here

更新(2016-12-19):

(今のところ)私がしたことはサーバー上のみです:

  • HTTP2サポートを有効にして、大幅な速度向上を実現しました。
  • JSのサイズを5倍以上削減したGZIPを有効にしました。

これらのサーバー構成は、NGINXとApacheでは簡単なため、試してみる価値があります。

現在、サイトの読み込みはずっと速くなっていますが、これらの変更では初期の問題は解決しません(問題1および問題2)。したがって、私はあなたが私の場所にいる場合にもあなたが従うことを望むかもしれないいくつかの他のアプローチを探しています:

更新(2018-06-11):

初期負荷を高めるのに役立ったいくつかの資料を次に示します。

私の場合、遅延読み込みが大きな役割を果たします。

15
nyxz

Q2:アプリケーションをbootstrapより高速にし、Ahead of Timeコンパイルを実装することでバンドルサイズを縮小できます。 https://angular.io/docs/ts/latest/cookbook/ aot-compiler.html

聞こえるように、テンプレートはプリコンパイルされ、すべてのスクリプトが事前に生成されるため、初期ロード後の処理時間が短縮されます。また、Angular 2コンパイラはバンドルに含まれていないため、バンドルサイズ自体が大幅に削減されます。

Q1:コンポーネントの遅延読み込みサポートがありますが、それが何を必要とするのかまだ検討していません。他の誰かがその部分に答えてくれるかもしれません。

4
silentsod

jsの縮小/バンドルも考慮して、サーバー側でgzip圧縮を有効にすると、ロード時間が短縮されます。

0
RamiReddy P

購入 CloudFlare DNS、ロード時間を50秒から4秒に短縮できました。更新速度を約1秒に下げることもできます。

それのための無料版があり、それは正常に動作します。

0
Arun Prasad E S