简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

CDN最適化の最初の画面読み込み方法の詳細説明

php中世界最好的语言
リリース： 2018-05-02 15:47:03
オリジナル
2532 人が閲覧しました

今回は、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)
ログイン後にコピー
)。信じられないかもしれませんが、この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue-cli で最初の画面の読み込み時間を短縮する方法

vue はサーバーリクエストの数を削減します

以上がCDN最適化の最初の画面読み込み方法の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
負荷 方法 詳しい説明
ソース：php.cn
前の記事：Vuejs プロジェクトのパッケージ化と最初の画面読み込みの最適化 次の記事：Angularの一方向データフローの使用方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
width プロパティを追加してコンテンツを左に移動します。 ボディに余白を設けました。 main {left margin: 200px; right margin: 200px; textalignment: center} テキストを1...
から 2024-04-06 22:01:35
0
3
816
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
MySQL SQLクエリを使用して別のテーブルのフィールドの合計を計算する 次のようなスキーマがあります。 属性「user_id」と「username」を持つユーザーテーブルと、属性「customer_id」（user_idのFK）と「finalPrice...
から 2024-04-06 19:39:29
0
1
441
customer_name 列から名を取得する方法 selectsubstring(custommer_name,1,instr(custommer_name,''))asfirst_namefromsales.customers;...
から 2024-04-06 17:43:30
0
2
433
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！