English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. 現在の位置
  2. ホームページ
  3. 経験記録
  4. 本文

Vue.jsでwebpackを用いて複数のコンポーネントを統合して按需読み込みを実現する方法

前書き

モバイルデバイスのアップグレードやネットワーク速度の向上とともに、ユーザーはwebアプリケーションに対する要求が高くなっています。機能の追加によってもたらされる最も直接的な結果は、リソースファイルが大きくなることです。非常に大きなクライアントコードを維持するために、コードを構造化するためのモジュール化の概念が提案されました。webpackはモジュール化パッケージツールとして、reactの普及とともに人気を博しています。

Vueを使用してプロジェクトを開発する場合、その単一ファイルコンポーネントの機能を使用するには、webpackまたはbrowserifyを使用してパッケージ化する必要があります。大規模なアプリケーションでは、読み込み速度を向上させるために、webpackのcode split機能を使用して分割パッケージ化し、小さなモジュールを生成して必要に応じてロードすることができます。これはVueドキュメントおよびvue-router ドキュメントにはすべて紹介されています：Async Components、Lazy Loading。

webpackのcode splitは、webpackのrequire.ensure特別な構文を使用したり、AMDスタイルのコールバックを使用したりできます。-require 语法、AMDスタイルのコールバック-require 语法として -

グローバルで Async Component を登録する：

let myAsyncComponent = resolve => {
 require(['./my-async-component], resolve)
}
Vue.component('async-webpack-example', myAsyncComponent)

ローカルで Async Component を登録する、単一ファイルコンポーネントの script ブロック内容：

let myAsyncComponent = resolve => {
 require(['./my-async-component], resolve)
}
// Vue インスタンスの拡張オプション、他のオプションは省略
export default {
 components: {
 'async-webpack-example': myAsyncComponent
 }
}

vue-router で、異なるルートのコンポーネントのアシストロードを実現するために、ルートマッピングで同じ方法を使用してルート項の component 属性を設定することができます。

ここでの myAsyncComponent は、必要なときに Vue または vue-router が定義するコンポーネントオプションを解析するための resolve コールバック関数です（はい、Vue と vue-router には異なる解析コンポーネントオプションの関数が2つあります）をパラメータとして callback-require 関数（resolve コールバック関数の引数はコンポーネントオプションです）、このようにして、パッケージ化スクリプトを実行する際に、my-async-component.vue ファイルは単独でパッケージ化されて1つのファイルにされ、そのコンポーネントが使用される際にのみ読み込まれます。

非同期読み込みのコンポーネントが多い場合、多くの単一ファイルが生成されます。フロントエンドのパフォーマンスに関して、各ファイルが小さくなる一方で、多くのネットワーク接続の確立と閉じるコストが増える可能性があります。したがって、フロントエンドの最適化の実践では、ファイルの数と単一ファイルのサイズのバランスを取ることが通常必要です。

この記事では、複数のコンポーネントを1つのファイルに統合パッケージ化する方法について説明します。一方で、コードブロックの数を減らすことができますし、統合パッケージ化されたこれらのコンポーネントが複数の場所で繰り返し使用される場合（例えば UIに関連するコンポーネント）、Vueのキャッシュメカニズムにより、後続のコンポーネントの読み込み速度が向上します。さらに、これらの一般的なコンポーネントが長期間変更されない場合（例えば UIに関連するコンポーネント）、パッケージ化されたファイルも長期間変更されず、ブラウザのキャッシュ機能を最大限に活用して、フロントエンドの読み込み速度の最適化を実現できます。

まずは效果图を示します、vue-router の SPA アプリケーションでは、ルートの ComponentA、ComponentB、ComponentC などの3つのコンポーネントを1つのファイルに統合パッケージ化します。ページを初めて読み込んだとき、開発者ツールの Network パネルから見ると、この時点では ComponentA、ComponentB、ComponentC の3つのコンポーネントを含む 0.a ファイルが読み込まれていません。5a1bae6addad442ac82.js ファイルが、Page A リンクをクリックしたときに読み込まれ、その後 Page B、Page C リンクをクリックしたときにはファイルが再読み込まれません。

まずは vue-cli コマンドラインツールを使用して webpack プロジェクトテンプレートを作成し、vue-router のプロジェクト、その src/components フォルダーに CommonComponents フォルダーを作成し、そのフォルダーの中に ComponentA、ComponentB、ComponentC の3つのコンポーネントを作成します。

同時に CommonComponents フォルダーを作成し、index.js というファイルを作成します、その内容は以下の通りです：

exports.ComponentA = require('./ComponentA')
exports.ComponentB = require('./
exports.ComponentC = require('.'),/ComponentC')

这样，我们只需要使用 webpack 的 require.ensure 特殊语法或者使用 AMD 风格的 callback-require 语法异步加载 CommonComponents 目录下的 index.js，在使用 webpack 进行打包时，就可以实现将 ComponentA、ComponentB、ComponentC 这三个组件合并打包。以 AMD 风格的 callback-require 语法为例示范如下，这里的 callback 回调函数的形式没有任何特殊要求。

require(['component/CommonComponents
 // CommonComponentsで何かしたいことを実行してください
})

component/CommonComponents モジュールが正常に読み込まれた場合、ここのコールバック関数の CommonComponents パラメータは、ComponentA、ComponentB、ComponentC という 3 つのコンポーネントオプションを含むオブジェクトになります。

非同期解析コンポーネントを定義する際には、resolve => {require(['./my-async-component'], resolve)}，もしルート設定ファイルに ComponentA コンポーネントのルート項目を追加する必要がある場合、どのようなファクトリーファンクションを定義するべきですか？ここでの resolve は、コンポーネントオプションを解析するコールバック関数であり、引数は取得したコンポーネントオプションです。先ほどのコードの CommonComponents は、いくつかのコンポーネントオプションを含むオブジェクトです。したがって、CommonComponents のサブ属性を resolve コールバックに引数として使用することができます。getCommonComponent 関数を書き、コンポーネント名に応じて取得するコンポーネントオプションのファクトリーファンクションを返すようにします。

let getCommonComponent = componentName => resolve => require(['components/CommonComponents'], components => resolve(components[componentName]))

コンポーネントテンプレートやルートマッピングなど、特定のコンポーネントを使用する場所では、getCommonComponent('ComponentA') などの関数呼び出しを使用してコンポーネントの設定を行うことができます。ルートマッピングでの使用例は以下の通りです：

routes: [
 {
 path: '/',
 name: 'Hello',
 component: Hello
 },
 {
 path: '/a',
 name: 'A',
 component: getCommonComponent('ComponentA')
 },
 {
 path: '/b',
 name: 'B',
 component: getCommonComponent('ComponentB')
 },
 {
 path: '/c',
 name: 'C',
 component: getCommonComponent('ComponentC')
 }
]

最終的なパッケージ化されたファイルリストは以下の通りです。その中の 0.a5a1bae6addad442ac82.js には ComponentA、ComponentB、ComponentC の 3 つのコンポーネントが含まれています。

まとめ

これでこの記事のすべての内容が終わりました。この記事の内容が皆様の学習や仕事に役立つことを願っています。疑問がある場合は、コメントを残してください。皆様の呐喊教程へのサポートに感謝します。

声明：この記事の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、このサイトは所有権を有しておらず、人工的に編集されていません。著作権侵害の疑いがある場合は、メールで notice#w までお知らせください。3codebox.com（メールを送信する際に、#を@に置き換えてください。告発を行い、関連する証拠を提供してください。一旦確認がついたら、このサイトは即座に侵害疑いのコンテンツを削除します。）

基本教程
おすすめ