ホームページ > 記事 > ウェブフロントエンド > Vue が CDN を使用して最初の画面の読み込みを最適化する方法
Vue が CDN を使用して最初の画面の読み込みを最適化する方法
- php中世界最好的语言オリジナル
- 2018-04-11 13:49:163492ブラウズ
今回は、Vue が CDN を使用して最初の画面の読み込みを最適化する方法を説明します。Vue が CDN を使用して最初の画面の読み込みを最適化するための 注意点とは何ですか。実際のケースを見てみましょう。
Vue プロジェクトでは、プロジェクトに導入されたすべての js および css ファイルは、コンパイル中に Vendor.js にパッケージ化されます。ブラウザーは、ファイルのロード後にのみ最初の画面の表示を開始できます。多くのライブラリを導入すると、vendor.js ファイルのサイズが非常に大きくなり、最初に開くエクスペリエンスに影響します。 解決策は、によって参照される外部 js ファイルと css ファイルを分離し、vendor.js にコンパイルしないことです。このようにして、ブラウザーは複数のスレッドを使用して、vendor.js を非同期的にコンパイルできます。そして外部ファイル.jsなどが読み込まれ、最初の開封を高速化するという目的を達成します。 外部ライブラリ ファイルは、CDN リソースまたはその他のサーバー リソースを使用できます。
次に、vue、vuex、および vue-router の導入を例として、処理フローを説明します。
1. リソースの紹介 Index.html で、
bootstrap2. 構成を追加します bulid/webpack.base.conf.js ファイルで、次のように外部を追加し、参照される外部モジュールをインポートします。
注:
形式は 'aaa' : 'bbb' です。ここで、aaa はインポートされるリソースの名前を表し、bbb は外部参照用にモジュールによって提供される名前を表します。この名前は、対応するライブラリによってカスタマイズされます。たとえば、vue は Vue、vue-router は VueRouter です。
3. 元の引用符を削除します
次のようなインポートを削除します: module.exports = {
entry: {
app: './src/main.js'
},
externals:{
'vue': 'Vue',
'vue-router': 'VueRouter',
'vuex':'Vuex'
}
Vue.use(XXX) を削除します (例:
// import Vue from 'vue' // import Router from 'vue-router'
)
Test
npm ビルドを再実行すると、vendor.js のサイズが減少していることがわかります。開発者モードのネットワーク ツールを使用すると、vue.js、vuex.js、vendor.js などのファイルがそれぞれ 1 つのスレッドによって読み込まれていることがわかります。また、CDN を使用しているため、読み込み速度は独自のサーバーよりも高速です。 この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
環境ごとに Vue プロジェクトをパッケージ化する方法 モバイル側の自動ビルド rem メソッドの詳細な説明ウェブパック
以上がVue が CDN を使用して最初の画面の読み込みを最適化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。