Angular遅延読み込みモジュールで失敗したチャンクの読み込みを克服する方法
angularアプリに変更を加えると、ビルド時にチャンク名が変更され、古いバージョンがdistフォルダーから削除されます。ユーザーが現在サイトにいて、古いファイルが存在しないため、サイトの別の部分でロードチャンクに失敗したというエラーが表示されます。
私のアプリはangular cliを使用して構築されているため、webpackを使用してパッケージ化されています。
とにかくこれを克服することができます。
この目的のために、更新後数日間は古いチャンクを保持します。私のアプリもミニSPAで構成されているため、移動すると、ページの読み込み中に新しいバージョンを取得する可能性があります。
この質問でゲームに少し遅れていることは承知していますが、展開方法を変更することをお勧めします。
https://immutablewebapps.org/ をご覧ください。基本的な哲学は、ランタイム資産からビルド時間資産を分離することです。これには多くの利点がありますが、最大のものは次のとおりです。
- アセットはルートレベルで分離されているため、キャッシュの問題はありません
- 開発で吟味されたのと同じコードが本番で使用されます
- 問題が発生した場合の消費者向けのホットキャッシュによるインスタントフォールバック
- 作成されたチャンクは、アクティブな展開とアクティブなユーザーの問題を回避するルートによって分離された以前のバージョンに対して維持されます
これは、以下の@dottodotが提供する** PreloadAllModules **の提案を妨げるものでもありません。
プリロードを使用します。このような状況で面倒なことをせずに、遅延読み込みの利点が得られます。すべてのチャンクは、初期ロード時間を遅くすることなく、できるだけ速くユーザーに提供されます。以下は https://vsavkin.com/angular-router-preloading-modules-ba3c75e424cb からの抜粋であり、どのように機能するかを説明しています（図の記事を参照）：
最初に、最初のバンドルをロードします。このバンドルには、アプリケーションに必要なコンポーネントのみが含まれていますbootstrap=アプリケーションです。可能な限り高速です。
次に、bootstrap=この小さなバンドルを使用するアプリケーション。
この時点でアプリケーションが実行されているため、ユーザーはアプリケーションとの対話を開始できます。彼女がそれをしている間、バックグラウンドで、他のモジュールをプリロードします。
最後に、彼女が遅延読み込み可能なモジュールに移動するリンクをクリックすると、ナビゲーションが即座に行われます。
両方の長所を活用しました。最初の読み込み時間は可能な限り短く、その後のナビゲーションは瞬時に行われます。
サーバー側からイベントを送信して、アプリケーションをリロードできます。また、遅延モジュールをバックグラウンドでプリフェッチして、そのモジュールのリクエストを待つのではなく、できるだけ早くプリフェッチするオプションもあります。