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 リソースを追加します:
<body> <p id="app"></p> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script> </body>
2. bulid/webpack.base.conf.js に構成
を追加しますファイル内で、次のように外部を追加し、参照される外部モジュールをインポートします:
module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}注:
形式は 'aaa' : 'bbb' です。ここで、aaa はインポートされるリソースの名前を表します。 bbb は、このモジュールによって外部参照用に提供される名前は、対応するライブラリによってカスタマイズされます。たとえば、vue は Vue、vue-router は VueRouter です。 3. 元の参照を削除します
インポートを削除します (例: // import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)
)。
テスト
npm ビルドを再実行すると、vendor.js のサイズが減少していることがわかります。開発者モードのネットワーク ツールを使用すると、vue.js、vuex.js、vendor.js などのファイルがそれぞれ 1 つのスレッドによって読み込まれていることがわかります。また、CDN を使用しているため、読み込み速度は独自のサーバーよりも高速です。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
Vue でキャッシュを使用する方法JSON を使用してサーバーにデータを送信する詳細なステップバイステップの説明
以上がCDN は最初の画面の読み込み速度を最適化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7465
15
1376
52
77
11
18
19
詳細な解釈: なぜ Laravel はカタツムリのように遅いのでしょうか?
Mar 07, 2024 am 09:54 AM
Laravel は人気のある PHP 開発フレームワークですが、カタツムリのように遅いと批判されることがあります。 Laravel の速度が満足できない原因は一体何でしょうか?この記事では、Laravel がカタツムリのように遅い理由をさまざまな側面から詳細に説明し、読者がこの問題をより深く理解できるように、具体的なコード例と組み合わせて説明します。 1. ORM クエリのパフォーマンスの問題 Laravel では、ORM (オブジェクト リレーショナル マッピング) は非常に強力な機能です。
Golang の GC 最適化戦略に関するディスカッション
Mar 06, 2024 pm 02:39 PM
Golang のガベージ コレクション (GC) は、開発者の間で常に話題になっています。高速プログラミング言語として、Golang の組み込みガベージ コレクターはメモリを適切に管理できますが、プログラムのサイズが大きくなるにつれて、パフォーマンスの問題が発生することがあります。この記事では、Golang の GC 最適化戦略を検討し、いくつかの具体的なコード例を示します。 Golang のガベージ コレクション Golang のガベージ コレクターは同時マークスイープ (concurrentmark-s) に基づいています。
C++ プログラムの最適化: 時間の複雑さを軽減する手法
Jun 01, 2024 am 11:19 AM
時間計算量は、入力のサイズに対するアルゴリズムの実行時間を測定します。 C++ プログラムの時間の複雑さを軽減するためのヒントには、適切なコンテナー (ベクター、リストなど) を選択して、データのストレージと管理を最適化することが含まれます。クイックソートなどの効率的なアルゴリズムを利用して計算時間を短縮します。複数の操作を排除して二重カウントを削減します。条件分岐を使用して、不必要な計算を回避します。二分探索などのより高速なアルゴリズムを使用して線形探索を最適化します。
Laravelのパフォーマンスボトルネックを解読：最適化テクニックを完全公開！
Mar 06, 2024 pm 02:33 PM
Laravelのパフォーマンスボトルネックを解読：最適化テクニックを完全公開！ Laravel は人気のある PHP フレームワークとして、開発者に豊富な機能と便利な開発エクスペリエンスを提供します。ただし、プロジェクトのサイズが大きくなり、訪問数が増加すると、パフォーマンスのボトルネックという課題に直面する可能性があります。この記事では、開発者が潜在的なパフォーマンスの問題を発見して解決できるように、Laravel のパフォーマンス最適化テクニックについて詳しく説明します。 1. Eloquent の遅延読み込みを使用したデータベース クエリの最適化 Eloquent を使用してデータベースにクエリを実行する場合は、次のことを避けてください。
Laravel パフォーマンスのボトルネックが明らかに: 最適化ソリューションが明らかに!
Mar 07, 2024 pm 01:30 PM
Laravel パフォーマンスのボトルネックが明らかに: 最適化ソリューションが明らかに!インターネット技術の発展に伴い、Web サイトやアプリケーションのパフォーマンスの最適化がますます重要になってきています。人気の PHP フレームワークである Laravel は、開発プロセス中にパフォーマンスのボトルネックに直面する可能性があります。この記事では、Laravel アプリケーションが遭遇する可能性のあるパフォーマンスの問題を調査し、開発者がこれらの問題をより適切に解決できるように、いくつかの最適化ソリューションと具体的なコード例を提供します。 1. データベース クエリの最適化 データベース クエリは、Web アプリケーションにおける一般的なパフォーマンスのボトルネックの 1 つです。存在する
キリン9000の性能は？
Mar 22, 2024 pm 03:21 PM
Kirin 9000s は、注目を集めるフラッグシップ携帯電話として、発売以来幅広い話題と注目を集めてきました。 Kirin 9000シリーズの最新フラッグシップチップを搭載しており、そのパフォーマンスは非常に強力です。では、キリン9000の性能はどうなのでしょうか？一緒に調べてみましょう。まず、Kirin 9000s は新しい 5nm プロセスを使用して製造されており、チップのパフォーマンスと消費電力制御が大幅に向上しています。以前の Kirin プロセッサーと比較して、Kirin 9000 はパフォーマンスが大幅に向上しました。大規模なゲームの実行でも、マルチタスクでも、
WIN7システムのスタートアップ項目を最適化する方法
Mar 26, 2024 pm 06:20 PM
1. デスクトップでキーの組み合わせ (win キー + R) を押してファイル名を指定して実行ウィンドウを開き、[regedit] と入力して Enter キーを押して確定します。 2. レジストリ エディターを開いた後、[HKEY_CURRENT_USERSoftwareMicrosoftWindowsCurrentVersionExplorer] をクリックして展開し、ディレクトリに Serialize 項目があるかどうかを確認します。ない場合は、エクスプローラーを右クリックして新しい項目を作成し、Serialize という名前を付けます。 3. 次に、「シリアル化」をクリックし、右側のペインの空白スペースを右クリックして、新しい DWORD (32) ビット値を作成し、「Star」という名前を付けます。
Vivox100s のパラメーター構成が明らかに: プロセッサーのパフォーマンスを最適化するには?
Mar 24, 2024 am 10:27 AM
Vivox100s のパラメーター構成が明らかに: プロセッサーのパフォーマンスを最適化するには?テクノロジーが急速に発展する今日、スマートフォンは私たちの日常生活に欠かせないものとなっています。スマートフォンの重要な部分であるプロセッサのパフォーマンスの最適化は、携帯電話のユーザー エクスペリエンスに直接関係します。注目度の高いスマートフォンとして、Vivox100s のパラメータ構成は多くの注目を集めており、特にプロセッサー性能の最適化はユーザーからの注目を集めています。プロセッサは携帯電話の「頭脳」として、携帯電話の動作速度に直接影響します。
