Angular7の遅いページ読み込み

2020-08-02 javascript angular angular7 angular7-router

私に渡されたAngular7アプリがあります。最初の充実したペイントとインタラクティブになるまでの時間は約6秒です。 https://www.google-analytics.com/collectおよびhttps://fonts.gstatic.com/s/opensans API呼び出しで約4秒間停止(保留)しているようです。これは、Googleフォントに関連していることがわかりました。 。しかし、これはストールの原因ではないかもしれません。遅延読み込みモジュールを使用して、バンドルを小さくしようとしました。現在のところ、styles.css 465B、runtime.js 1.1kB、polyfills.js 36kB、styles.js 10kB、vendor.js 583kB、main.js 142kBです。バンドルのサイズは問題ないようですが、ユーザーがホームページを表示する前に、ブラウザー(クロム)が6秒間停止します。誰かアドバイスはありますか?

私もSSRを調べましたが、distのコンテンツを使用してAWS S3でサービスを提供していることを考えると、セットアップは非常に複雑に思われます。私は次のもので構築しています:

ng build --outputHashing=all --prod

助けてください。 SSRを試す前に、他に改善できることがないことを確認したいと思います。ありがとうございました!

Answers

まず第一に、パフォーマンスのアップグレードとバグの修正が行われるため、Angularのバージョンを最新にアップデートしてみることができます。それが私がSSRの前にやっていたことです。それでも、より良いユーザーエクスペリエンスを望む場合、SSRは「必須」です。バンドルのサイズを考えると、それほど大きくありません。私のアプリはあなたのサイズと比べて3倍のサイズで、読み込みが高速です。私が言ったように、私はサーバー(SSR)でレンダリングし、今のところv9を使用しています。しかし、コードサンプルなしで質問に答えることは非常に困難です。

乾杯!

コードを少し最適化して、ビルド時にAOT compilation modeを使用することができます。

私は良い記事を見つけました。これを調べて、コードを改善して読み込み時間を短縮する方法を正確に理解できます。 https://www.dotnettricks.com/learn/angular/tips-to-optimize-your-angular-application

Related