ホームページ > 記事 > ウェブフロントエンド > CDN は最初の画面の読み込み速度を最適化します
CDN は最初の画面の読み込み速度を最適化します
- php中世界最好的语言オリジナル
- 2018-04-20 14:59:301756ブラウズ
今回は、最初の画面の読み込み速度を最適化するための 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(XXX) を削除します (例:
// Vue.use(Router)
)。
テスト
npm ビルドを再実行すると、vendor.js のサイズが減少していることがわかります。開発者モードのネットワーク ツールを使用すると、vue.js、vuex.js、vendor.js などのファイルがそれぞれ 1 つのスレッドによって読み込まれていることがわかります。また、CDN を使用しているため、読み込み速度は独自のサーバーよりも高速です。 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
Vue でキャッシュを使用する方法JSON を使用してサーバーにデータを送信する詳細なステップバイステップの説明
以上がCDN は最初の画面の読み込み速度を最適化しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。