Vue の読み込み最適化戦略とは何ですか?

Vue 読み込みの最適化戦略: 1. ルートの遅延読み込み; 2. オンデマンドでのコンポーネントの読み込み; 3. CDN 高速化戦略の使用; 4. [compression-webpack-plugin] を使用してファイルを gzip 形式にパッケージ化します。

[関連記事の推奨事項: vue.js]

vue 読み込みの最適化戦略:

方法 1. ルートの遅延読み込み

最初の画面の読み込みが遅い理由は、単純に、単一ページのアプリケーションがルートを読み込む必要があるためです。ルーティング テーブル上のページ全体とルーティング 遅延読み込みは、この問題を解決するためにここにあります。異なるルートに対応するコンポーネントを異なるコード ブロックに分割し、ルートにアクセスするときに対応するコンポーネントをロードできれば、より効率的になります。以下は、Vue ルーティングの遅延ロードの具体的な例です。方法は非常に簡単なので、詳しく説明したくない場合は、この形式に従ってルートを紹介するだけで十分です。ルーティングの遅延読み込みに興味がある場合は、「vue-router routing Lazyloading」

#方法 2、コンポーネントのオンデマンド読み込み## を参照してください。 ## コンポーネントをオンデマンドでロードする必要があるのはなぜですか?理由も非常に単純で、コンポーネントライブラリの中には豊富なコンポーネントが含まれているものがあるため、それを直接導入すると必然的に全く使わないコンポーネントが導入されてしまうからです。この方法では、パッケージが比較的大きくなり、見た目も非常にプロフェッショナルではなくなります。したがって、オンデマンドで導入する必要があります。 iview コンポーネント ライブラリを例として、オンデマンド導入プロセスについて学びましょう。

1. まず、オンデマンド読み込みツール babel-plugin-import を導入します

babel-plugin-import は babel で、インポート中にインポートの書き込みをオンデマンド インポートに自動的に変換します。コンパイルプロセスです。

npm install babel-plugin-import --save-dev

2. プロジェクトのルート ディレクトリに .babelrc ファイルを作成し、オンデマンド コンテンツの読み込みを設定します

{
  "plugins": [["import", {
    "libraryName": "iview",
    "libraryDirectory": "src/components"
  }]]
}

3. プロジェクトが main.js に読み込む必要があるコンポーネントを設定します

以下は iview の例です

# ここで、グローバルに登録されたコンポーネントは vue プロトタイプにハングする必要があることに注意してください。 Notice コンポーネントを使用する必要がある場合は、

Vue.prototype.$Notice = Notice;

が必要です。このようにして、iview コンポーネントを通常どおり使用できます。

方法 3. CDN アクセラレーション戦略を使用する

Vue プロジェクトでは、プロジェクトに導入されたすべての js および css ファイルは、コンパイル中に Vendor.js にパッケージ化されます。その場合、vendor.js ファイルのサイズが非常に大きくなり、最初に開くエクスペリエンスに影響します。解決策は、参照される外部の js ファイルと css ファイルを分離し、vendor.js にコンパイルしないことです。代わりに、これらはリソースの形式で参照されます。このようにして、ブラウザは複数のスレッドを使用して、vendor.js と外部の css ファイルを非同期にコンパイルできます。 js などを読み込んで、最初のオープニングを高速化するという目的を達成します。外部ライブラリ ファイルは CDN リソースを使用できます。 CDN の構成において、vue cli3.x と vue cli2.x の間にはいくつかの違いがあります。vue cli がアップグレードされた後、コード構造は大幅に変更され、構成ファイルは vue.config.js ファイルに統合されました。以下では、例として amap、axios、qs を使用して、cdn を使用してリソースをロードする方法を説明します。

1. 関連する cdn リソースをindex.htmlに導入します

2. 外部を構成します

vue cli3.x 構成 Webpack は次のとおりです。 vue.config.js の configureWebpack で

#設定後、グローバル Amap、axios、Qs を通常どおり使用できます

メソッド 4.ファイルを gzip 形式にパッケージ化するための Compression-webpack-plugin

Compression-webpack-plugin の依存関係により、npm がビルドを実行するときに .gz ファイルが生成されます。後でプロジェクトがアクセスするファイルは、この .gz ファイルです。通常のプロジェクトのパッケージ化ボリュームは半分以下に減ります。奇妙ではありませんか?

さらに話しましょうこの依存関係の使用プロセスについて。

1.npm は

npm install compression-webpack-plugin  --save-dev

2.vue を導入します。 cli3.x は vue.config.js で Webpack を設定します。

3.nginx はgzip モードを有効にする

フロント エンドは前の手順で構成されており、nginx が連携して gzip モードを有効にします。これは比較的簡単です。nginx について少し理解している限り、いくつかのコードを構成します。 nginx.conf の http

4. 設定が成功したかどうかを確認する

この手順は非常に簡単で、Content-Encoding が正しく設定されているかどうかを確認するだけです。チャンククラスファイルのレスポンスヘッダーは gzip です。

関連する無料学習の推奨事項: JavaScript (ビデオ)

以上がVue の読み込み最適化戦略とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。