Vue での高速化のために CDN を構成して使用する方法

Vue で高速化するために CDN を構成して使用する方法

Vue プロジェクトでは、CDN (コンテンツ配信ネットワーク) を使用すると、Web ページの読み込み速度が効果的に高速化され、ユーザーのパフォーマンスが向上します。経験 。 CDN テクノロジーは、静的リソース ファイルを世界中のさまざまな場所にあるサーバーに分散し、ユーザーが最も近いサーバーからリソースを迅速に取得できるようにし、データ送信時間と遅延を削減します。

以下では、Vue での高速化のために CDN を設定して使用する方法を詳しく紹介します。

まず、信頼できる CDN サービス プロバイダーを見つけてアカウントを登録する必要があります。現在、Qiniu Cloud、Alibaba Cloud、Tencent Cloud など、多くの有名な CDN サービス プロバイダーが市場に出ています。プロジェクトのニーズと財務力に合ったサプライヤーを選択してください。

1. CDN サービスの登録と作成

CDN サービス プロバイダーの Web サイトに登録してログインし、新しいプロジェクトを作成し、プロジェクトのドメイン名を構成します。関連するプロバイダーは、CDN アクセス アドレス (CNAME レコードを構成する必要があります) と高速化されたリソース アクセス アドレスを提供します。

2. Vue プロジェクトの構成

Vue プロジェクトのルート ディレクトリを開き、public/index.html ファイルで次のコードを見つけます:

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

置換:

<link rel="icon" href="CDN访问地址/favicon.ico">

このようにして、Web サイトのアイコン ファイルが CDN 経由で高速化され、読み込まれます。

同様に、public/index.html ファイルで次のコードを見つけます:

<script src="<%= BASE_URL %>js/app.js"></script>

これを次のように置き換えます:

<script src="CDN访问地址/js/app.js"></script>

このようにして、 Vue プロジェクト.js も CDN 経由でロードされます。

3. Vue プロジェクトのパッケージ化

Vue プロジェクトのルート ディレクトリで次のコマンドを実行して、プロジェクトを運用環境用の静的リソース ファイルとしてパッケージ化します。 ##

npm run build

パッケージ化が完了すると、ルート ディレクトリに dist フォルダーが生成され、パッケージ化された静的リソース ファイルが含まれます。

静的リソース ファイルのアップロード

dist フォルダー内のすべてのファイルを CDN サービス プロバイダーのコンソールにアップロードし、これらのファイルを公開します。公開が成功すると、CDN サービス プロバイダーはこれらのファイルへのアクセスを高速化するための URL アドレスを生成します。

リソース アクセス パスの構成

Vue プロジェクトのルート ディレクトリで vue.config.js ファイルを見つけます (見つからない場合は、手動で作成する必要があります)。ファイルに次のコードを追加します。

module.exports = {
  publicPath: 'CDN加速访问URL'
}

「CDN 高速アクセス URL」を CDN 高速アクセスの URL アドレスに置き換えます。

この時点で、CDN の構成と Vue プロジェクトの使用が完了しました。

CDN リソースは世界中のノード サーバーにキャッシュされるため、ユーザーが Web サイトにアクセスすると、ユーザーに最も近いノード サーバーからリソースが読み込まれるため、リソース要求時間が大幅に短縮され、Web が改善されます。ページの読み込み速度。

CDN を構成する前に、HTTP リクエストの削減、静的リソース ファイルの圧縮とマージ、ブラウザー キャッシュの使用などを含めて、まずプロジェクトのパフォーマンスを最適化する必要があることに注意してください。

つまり、高速化に CDN を使用すると、Vue プロジェクトのパフォーマンスとユーザー エクスペリエンスが向上し、ユーザーのアクセス速度が向上します。上記の内容がお役に立てば幸いです。

以上がVue での高速化のために CDN を構成して使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。