CDN最適化の最初の画面読み込み方法の詳細説明

今回は、CDN 最適化の最初の画面読み込み方法について詳しく説明します。CDN の最初の画面読み込みの注意事項は何ですか?実際のケースを見てみましょう。

はじめに

ウェブサイトアプリケーションとして、読み込み速度は非常に重要です。読み込み速度。1 つはオンデマンドでコンポーネントを読み込むなどのプログラムの合理的な配置で、もう 1 つは js、css、その他のリソースの非同期読み込みです。

Vue プロジェクトでは、プロジェクトに導入されたすべての js および css ファイルは、コンパイル中に Vendor.js にパッケージ化されます。ブラウザーは、ファイルのロード後にのみ最初の画面の表示を開始できます。多くのライブラリを導入すると、vendor.js ファイルのサイズが非常に大きくなり、最初に開くエクスペリエンスに影響します。

解決策は、

参照する外部 js ファイルと css ファイルを分離し、vendor.js にコンパイルするのではなく、リソースの形式で参照することで、ブラウザーが複数のスレッドを使用して、vendor.js を非同期的にコンパイルできるようにすることです。 , 初回起動を高速化するという目的を達成するために外部jsなどを読み込んでいます。

外部ライブラリ ファイルは、CDN リソースまたは他のサーバー リソースを使用できます。

以下では、vue、vuex、および vue-router の導入を例として、処理フローを説明します。

1. リソースの紹介

Index.html に、

bootstrap のような CDN リソースを追加します:

2. bulid/webpack.base.conf.js に構成

を追加しますファイル内で、次のように外部を追加し、参照される外部モジュールをインポートします:

注:

形式は 'aaa' : 'bbb' です。ここで、aaa はインポートされるリソースの名前を表します。 bbb は、このモジュールによって外部参照用に提供される名前は、対応するライブラリによってカスタマイズされます。たとえば、vue は Vue、vue-router は VueRouter です。 3. 元の参照を削除します

インポートを削除します (例:

) Vue.use(XXX) を削除します (例:

)。信じられないかもしれませんが、この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue-cli で最初の画面の読み込み時間を短縮する方法

vue はサーバーリクエストの数を削減します

以上がCDN最適化の最初の画面読み込み方法の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。