seed からangle2プロジェクトを作成し、最初のページにいくつかのangularコンポーネントを追加しました。それらのいくつかは画像をロードします-これは比較的遅いですが、問題は:
バンドルサイズを小さくした後でも、リクエストを行わずにアプリケーションが1.5秒間ブートストラップし、再びコンポーネントのリソースがロードされるまで〜1秒待機することを恐れています。私は約3秒以上のロード時間につながると思います。私のアプリは比較的単純なので、これは受け入れられないことがわかりました。
Q1:コンポーネントリソースをより早くロードし、コンポーネントのロード時にそれらを参照する方法はありますか?
Q2:アプリケーションを高速化する方法はありますかbootstrap=
私も他の提案を受け入れています:)
編集:
シードとともに提供されるAoTコンパイルを使用しており、app.js
ファイルのサイズを小さくする手順を実行しました。問題は、ダウンロードされたapp.js
の最後と最初のコンポーネントのリソース呼び出しの間のgapに残っています。
(今のところ)私がしたことはサーバー上のみです:
これらのサーバー構成は、NGINXとApacheでは簡単なため、試してみる価値があります。
現在、サイトの読み込みはずっと速くなっていますが、これらの変更では初期の問題は解決しません(問題1および問題2)。したがって、私はあなたが私の場所にいる場合にもあなたが従うことを望むかもしれないいくつかの他のアプローチを探しています:
初期負荷を高めるのに役立ったいくつかの資料を次に示します。
私の場合、遅延読み込みが大きな役割を果たします。
Q2:アプリケーションをbootstrapより高速にし、Ahead of Timeコンパイルを実装することでバンドルサイズを縮小できます。 https://angular.io/docs/ts/latest/cookbook/ aot-compiler.html
聞こえるように、テンプレートはプリコンパイルされ、すべてのスクリプトが事前に生成されるため、初期ロード後の処理時間が短縮されます。また、Angular 2コンパイラはバンドルに含まれていないため、バンドルサイズ自体が大幅に削減されます。
Q1:コンポーネントの遅延読み込みサポートがありますが、それが何を必要とするのかまだ検討していません。他の誰かがその部分に答えてくれるかもしれません。
jsの縮小/バンドルも考慮して、サーバー側でgzip圧縮を有効にすると、ロード時間が短縮されます。
購入 CloudFlare DNS、ロード時間を50秒から4秒に短縮できました。更新速度を約1秒に下げることもできます。
それのための無料版があり、それは正常に動作します。