CDN を使用してプロジェクトの読み込み速度を最適化する方法-jsチュートリアル-php.cn

CDN を使用してプロジェクトの読み込み速度を最適化する方法

php中世界最好的语言

リリース： 2018-06-12 10:46:58

オリジナル

2410 人が閲覧しました

今回は、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 に、ブートストラップなどの 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(XXX) を削除します (例:

// Vue.use(Router)

ログイン後にコピー

)。

テスト

npm ビルドを再実行すると、vendor.js のサイズが減少していることがわかります。開発者モードのネットワークツールを使用すると、vue.js、vuex.js、vendor.js などのファイルがそれぞれ 1 つのスレッドによって読み込まれていることがわかります。また、CDN を使用しているため、読み込み速度は独自のサーバーよりも高速です。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

React はページコードを分割し、オンデマンドでロードします

Angular2 で Dom を使用する場合の注意点は何ですか

以上がCDN を使用してプロジェクトの読み込み速度を最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。