角度2最初のロードの進行度

角2のバンドルサイズを下げて、サイズを〜300kb（角2 + jquery +ブートストラップ+いくつかの他の小さなサードパーティライブラリ）に縮小したところ、 Browserify + Rollup + Minify + GZIPを使用していますが、このサイズであっても、バンドルをダウンロードするのにまだ時間がかかります。また、reflectとzone.jsの初期ローディング時間が考慮されます。つまり、最大で4-5遅いデバイス（携帯電話）でサイトをロードする秒数。角度2最初のロードの進行度

これは避けられないことですが（少なくとも今のところ）、download + reflect/zone.jsの初期化のパーセンテージの観点から初期ロードのロード進捗状況を表示する方法はありますか？

そこに例のほとんどは、このようなものです：

<body> 
    <my-app>Loading...</my-app> 
</body>

働いているとLoading...はスピナーで置き換えることができ、または1つは選ぶかもしれないどんなカスタムテンプレートが、実際の進捗状況を取得する方法があり、どの意味のあるやり方で？

私が探しているのはGmailの読み込み進行状況で、最小/最大であり、不確定なスピナーではない実際の進行状況バーであるため、ユーザーはどれくらいの時間を必要とするかについての指示が可能ですサイトが読み込まれるのを待ちます。私はかなり物事をスピードアップしていた（https://angular.io/docs/ts/latest/cookbook/aot-compiler.html）コンパイル先・オブ・時間NGCを使用して開始している

アップデート（24 10月 - 2016年）

事前に

多くのおかげで、（バンドルのサイズは〜500kbまで圧縮されていますが）、すべてがダウンロードされた後でもWebサイトをロードするには約300msかかります。

理想的には、ダウンロードとロードの両方のプロセスを傍受し、そのステータス（230kb/500kbダウンロード済みまたはモジュールビルド完了の10％など）を調査してから、進行状況バーとステータス実際に何が待っているのかをユーザーに示します。

私が現在持っているのは、プログレスバーの最小CSSをロードして表示してから、onLoadの機能ですべての角度のものを順番にロードしていますが、以前よりもはるかにスムーズですが、ユーザーはインターネット接続とデバイスの機能に応じて、半分から数秒間待機する必要があります。

出典

2016-07-11 kha

良い質問ですが、一般的な解決策（ロールアップを使用している可能性があります。誰かがwebpackなどを使用する可能性があります）は難しいですか？おそらく、それが機能するには、いくつかのヘルプ/ api/hookが必要です。 –

あなたはAOTコンパイルを試しましたか？（スピード最適化のため） –

@redaigbaria私は持っています。それは間違いなく速いですが、2秒間は意味のあるステータスバーが表示されるので、遅いデバイスでは処理が遅くなります。 – kha

私はわからないよあなたはその後、他のすべてのファイルをロードすることになる、あなたのindex.htmlで2番目のスクリプトを追加しようとすることができます/ zone.jsを反映しますが、ダウンロードのために、我々は、この

<body onload="showApp()"> 
    <div class="progress-bar" id="loadingContainer"></div> 
    <my-app style="display: none"><my-app> 
</body> 

showApp() { 
    document.getElementById('loadingContainer').style.display = "none"; 
    document.getElementsByTagName('my-app')[0].style.display = null; 
}

出典

2016-10-23 17:40:06 Eswar

に従うことができます（ index.htmlが現在やっているように）。その後、ファイルのAJAXリクエストがたくさんあり、それらをDOMに追加できます。進捗状況を追跡するには、Content-Lengthヘッダーを含むHTTP HEADリクエストを使用することができます。

出典

2018-02-27 22:17:55

角度2最初のロードの進行度

答えて

関連する問題