Asyncコンポーネントを使用したVueアプリのパフォーマンスを最適化する

キーテイクアウト

• 非同期コンポーネントとWebpackのコードスプリッティ機能をVUEアプリケーションで使用して、アプリの初期レンダリング後にページの部分をロードして、初期負荷時間を短縮し、アプリのパフォーマンスを改善できます。
vueは、要求された（vue）コンポーネントを含む約束を返す機能のようなインポート形式である動的なインポートに対応し、式を使用してモジュールをロードできるようにします。
• 非同期コンポーネントは条件付きでロードでき、実際に必要なときにのみロードできます。これは、ユーザーが特定のアクションを実行するときに真であるようにパラメーターを設定することで実現できます。
非同期コンポーネントがロードに時間がかかった場合やロードに失敗した場合のロードおよび/またはエラーコンポーネントを定義することができます。これは、ロードアニメーションまたはエラーメッセージを表示するのに役立ちます。
• ゼロからvue.jsを学びたいですか？ SitePoint Premiumで基礎、プロジェクト、ヒント、ツールなどをカバーするVue Booksのコレクション全体を入手してください。今すぐ1か月あたりわずか14.99ドルで参加してください
単一ページのアプリケーションは、初期負荷が遅いために少しの妨げを警官にすることがあります。これは、伝統的に、サーバーがクライアントに大量のJavaScriptを送信するためです。これは、画面に何かが表示される前にダウンロードして解析する必要があります。ご想像のとおり、アプリのサイズが大きくなるにつれて、これはますます問題になる可能性があります。

幸いなことに、Vue CLI（フードの下でWebpackを使用する）を使用してVueアプリケーションを構築するとき、これに対抗するために多くの手段があります。この記事では、アプリの最初のレンダリング後にページの一部にロードするために、非同期コンポーネントとWebpackのコードスプリット機能の両方を使用する方法を示します。これにより、初期の負荷時間を最小限に抑え、アプリに味わいの感触を与えます。 このチュートリアルに従うには、vue.jsとオプションのnode.js.

の基本的な理解が必要です。 Asyncコンポーネント

非同期コンポーネントの作成に飛び込む前に、コンポーネントを通常どのようにロードするかを見てみましょう。これを行うには、非常にシンプルなメッセージコンポーネントを使用します：

コンポーネントを作成したので、app.vueファイルにロードして表示します。コンポーネントをインポートしてコンポーネントオプションに追加できるように、テンプレートで使用できます。

しかし、今何が起こりますか？メッセージコンポーネントは、アプリケーションがロードされるたびにロードされるため、最初のロードに含まれています。

これは、単純なアプリにとって大きな問題のように聞こえないかもしれませんが、ウェブストアのようなより複雑なものを考慮してください。ユーザーがバスケットにアイテムを追加してからチェックアウトしたいので、選択したアイテムのすべての詳細が記載されたボックスをレンダリングするチェックアウトボタンをクリックします。上記の方法を使用して、このチェックアウトボックスは最初のバンドルに含まれますが、ユーザーがチェックアウトボタンをクリックしたときにのみコンポーネントが必要です。ユーザーがチェックアウトボタンをクリックせずにウェブサイトをナビゲートする可能性もあります。つまり、この潜在的に使用されていないコンポーネントのロードにリソースを無駄にすることは意味がありません。

アプリケーションの効率を向上させるために、怠zyなロードとコード分割技術の両方を組み合わせることができます。

怠zyなロードは、コンポーネントの初期負荷を遅らせることです。 Medium.comのようなサイトで怠zyなロードが動作しているのを見ることができます。このサイトでは、画像が必要になる直前に画像がロードされています。読者が途中で記事をスキップする可能性があるため、特定の投稿のすべての画像をロードするリソースを無駄にする必要がないため、これは便利です。

コード分割機能Webpackが提供すると、コードをさまざまなバンドルに分割でき、その後、オンデマンドまたは後の時点で並行してロードできます。特定のコードを必要または使用した場合にのみロードするために使用できます。

動的輸入

幸いなことに、Vueはこのシナリオにダイナミックインポートと呼ばれるものを使用して対応しています。この機能では、要求された（VUE）コンポーネントを含む約束を返す新しい機能のようなインポート形式を導入します。インポートは文字列を受信する関数であるため、式を使用してモジュールをロードするなどの強力なことを行うことができます。 動的インポートは、バージョン61以来Chromeで利用可能です。それらの詳細については、Google開発者のWebサイトをご覧ください。

コード分割は、動的インポート構文を理解し、動的にインポートされたモジュールごとに個別のファイルを作成するWebpack、ロールアップ、または小包などのバンドラーによって処理されます。これは、後でコンソールのネットワークタブで表示されます。しかし、最初に、静的なインポートと動的なインポートの違いを見てみましょう。

次に、この知識をメッセージコンポーネントに適用しましょう。このようなapp.vueコンポーネントを取得します。

ご覧のとおり、Import（）関数はコンポーネントを返す約束を解決します。つまり、コンポーネントを非同期的にロードしました。 DevToolsのネットワークタブを見てみると、非同期コンポーネントを含む0.JSというファイルに気付くでしょう。

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

Asyncコンポーネントの条件付き読み込み

非同期コンポーネントがハンドルを握ったので、本当に必要なときにのみロードすることで、本当に彼らの力を収穫しましょう。この記事の前のセクションでは、ユーザーがチェックアウトボタンにヒットしたときにのみロードされるチェックアウトボックスのユースケースについて説明しました。それを構築しましょう。

プロジェクトのセットアップ

vue cliがインストールされていない場合は、今すぐ取得する必要があります。

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

次に、CLIを使用して新しいプロジェクトを作成し、プロンプトが表示されたときにデフォルトのプリセットを選択します。

プロジェクトディレクトリに変更してから、Ant-Design-Vueライブラリをインストールします。これをスタイリングに使用します。

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span>Message
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

次に、src/main.js：

にAnt Design Libraryをインポートします

<span>// static import
</span><span>import <span>Message</span> from "./Message";
</span>
<span>// dynamic import
</span><span>import("./Message").then(<span>Message</span> => {
</span>  <span>// Message module is available here...
</span><span>});
</span>

最後に、SRC/comomeNents、checkout.vueおよびitems.vueで2つの新しいコンポーネントを作成します：

<span><!-- App.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><div</span>></span>
</span>    <span><span><span><message</span>></span><span><span></message</span>></span>
</span>  <span><span><span></div</span>></span>
</span><span><span><span></template</span>></span>
</span>
<span><span><span><script</span>></span><span>
</span></span><span><span><span>import <span>Message</span> from "./Message";
</span></span></span><span><span><span>export default {
</span></span></span><span><span>  <span>components: {
</span></span></span><span><span>    <span><span>Message</span>: () => import("./Message")
</span></span></span><span><span>  <span>}
</span></span></span><span><span><span>};
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

ストアビューを作成します

<span>npm i -g @vue/cli
</span>

src/app.vueを開いて、そこのコードを次のものに置き換えます。

ここでは何も起こっていません。私たちがしているのは、メッセージを表示し、コンポーネントをレンダリングすることだけです。 次に、src/components/items.vueを開き、次のコードを追加します

このファイルには、現在の購入されたアイテムの量が記載されたショッピングカートアイコンを表示しています。アイテム自体は、データプロパティとして宣言されたアイテムアレイから引き出されます。アイテムの

購入

vue create my-store

ボタンをクリックすると、additemメソッドが呼び出されます。これにより、問題のアイテムがショッピングリストアレイにプッシュされます。次に、これによりカートの合計が増加します また、

ページに

チェックアウト

ボタンを追加しました。これは、物事が面白くなり始める場所です。

<span>cd my-store
</span><span>npm i ant-design-vue
</span>

ユーザーがこのボタンをクリックすると、パラメーターショーを真に設定します。この真の値は、非同期コンポーネントを条件付きでロードする目的で非常に重要です。

数行以下では、v-ifステートメントを見つけることができます。これは、ショーがtrueに設定されている場合にのみ

のコンテンツを表示します。この

タグには、チェックアウトコンポーネントが含まれています。これは、ユーザーがチェックアウトボタンを押したときにのみ読み込みたいです。 チェックアウトコンポーネントは、<script>セクションのコンポーネントオプションに非同期にロードされます。ここでのクールなことは、V-Bindステートメントを介してコンポーネントに引数を渡すことさえできるということです。ご覧のとおり、条件付きの非同期コンポーネントを作成するのは比較的簡単です：</script> のチェックアウトコンポーネントのコードをすばやく追加しましょう ここで、ショッピングリストとして受け取った小道具をループし、画面に出力しています。 NPM Run Serverコマンドを使用してアプリを実行できます。次に、http：// localhost：8080/に移動します。すべてが計画に従っていた場合、以下の画像に示されているものが表示されるはずです。

<span>import 'ant-design-vue/dist/antd.css'
</span>

ネットワークタブでストアの周りをクリックしてみてください。チェックアウトコンポーネントがチェックアウトボタンをクリックしたときにのみロードされることを確認してください。

githubでこのデモのコードも見つけることができます。

負荷とエラーのコンポーネントを備えた

非同期

Asyncコンポーネントがロードに時間がかかるか、ロードに失敗したときに、負荷および/またはエラーコンポーネントを定義することも可能です。読み込みアニメーションを表示すると便利ですが、これを再びアプリケーションを遅くすることに留意してください。非同期コンポーネントは、ロードするのに小さくて速い必要があります。例を次に示します：

<span><!-- Message.vue -->
</span><span><span><span><template</span>></span>
</span>  <span><span><span><h1</span>></span>New message!<span><span></h1</span>></span>
</span><span><span><span></template</span>></span>
</span>

結論

非同期コンポーネントの作成と実装は非常に簡単であり、標準開発ルーチンの一部である必要があります。 UXの観点から見ると、ユーザーの注意を維持するために、可能な限り初期負荷時間を短縮することが重要です。このチュートリアルが、コンポーネントの負荷を遅らせる（怠zyな負荷）条件を非同期にロードし、条件を適用するのに役立つことを願っています。

vue asyncコンポーネントに関するよくある質問

vue asyncコンポーネントは、開発者がコンポーネントを非同期にロードできるようにするVue.jsの強力な機能です。これは、コンポーネントが必要なときにのみロードされることを意味し、アプリケーションのパフォーマンスを大幅に改善できます。これは、すべてのコンポーネントを一度にロードすることでアプリケーションを遅くすることができる大規模なアプリケーションにとって特に有益です。コンポーネントを非同期にロードすることにより、アプリケーションが迅速かつ応答性の高いままであることを確認し、ユーザーエクスペリエンスを向上させることができます。あなたのアプリケーションは比較的簡単です。 Vue.comPonentメソッドを使用して、工場関数の約束を返すことができます。約束はコンポーネント定義で解決する必要があります。基本的な例は次のとおりです。

vue.component（ 'async-example'、function（resolve、拒否）{settimeout（function（）{//コンポーネント定義を渡してコールバックを解決する

Resolve（{ template： '

i a async！

'

}、

}、1000）
}）
この例では、コンポーネント1秒の遅延の後に非同期にロードされています。

VUEルーターでvue Asyncコンポーネントを使用できますか？実際、Vue Routerには、コンポーネントの分割と非同期負荷のサポートが組み込まれています。ルートを定義するとき、コンポーネントを直接提供する代わりに、コンポーネントに解決する約束を返す関数を提供できます。これにより、コンポーネントが必要な場合にのみコンポーネントを読み込むことができ、アプリケーションのパフォーマンスが向上します。Vue Asyncコンポーネントと通常のVueコンポーネントの主な違いは、それらのロード方法です。通常のVUEコンポーネントは同期的にロードされます。つまり、アプリケーションが開始されるとすぐにロードされます。一方、Vue Asyncコンポーネントは非同期にロードされます。つまり、必要な場合にのみロードされます。これにより、特に多くのコンポーネントを備えた大規模なアプリケーションの場合、アプリケーションのパフォーマンスが大幅に向上します。

Vue Asyncコンポーネントを使用する場合、エラーを処理するにはどうすればよいですか？ Vue.comPonentメソッドに2番目の関数を提供することによるエラー。この関数は、約束が拒否された場合に呼び出されます。例は次のとおりです。

vue.component（ 'async-example'、function（resolve、拒否）{settimeout（function（）{
//コンポーネント定義を渡すコールバック Resolve（{テンプレート： '

私はasync！

'
}、1000）
}、function（理由）{コンソール。エラー（理由）}）
この例では、約束が拒否された場合、エラーはコンソールにログに記録されます。 🎜>はい、Vuexを使用してVue Asyncコンポーネントを使用できます。 VuexはVue.jsの州管理ライブラリであり、Vue Asyncコンポーネントでうまく機能します。通常のコンポーネントと同じように、アクションを派遣し、非同期コンポーネントから突然変異を犯すことができます。 。 Vue Test UtilsやJestなどのライブラリを使用して、コンポーネントのユニットテストを作成できます。ただし、非同期コンポーネントは非同期にロードされているため、アサーションを実行する前にコンポーネントがロードされるのを待つためにテストで非同期/待つ必要がある場合があります。 >
はい、Vue CLIを使用してVue Asyncコンポーネントを使用できます。 Vue CLIは、足場VUE.JSプロジェクトのコマンドラインツールであり、非同期コンポーネントのサポートが組み込まれています。 vue.componentメソッドを使用して、Vue CLIプロジェクトで非同期コンポーネントを定義できます。

Vue Asyncコンポーネントのパフォーマンスを最適化するにはどうすればよいですか？ Vue Asyncコンポーネント。 1つの方法は、コード分割を使用することです。これにより、コードをオンデマンドでロードできる小さなチャンクに分割できます。別の方法は、レイジーロードを使用することです。これにより、コンポーネントが必要な場合にのみロードできます。また、ブラウザがアイドル状態であるときに、プリフェッチとプリロードをバックグラウンドにロードすることもできます。

以上がAsyncコンポーネントを使用したVueアプリのパフォーマンスを最適化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。