Vue プロジェクトで非同期コンポーネントを使用してパフォーマンスを最適化する

JavaScript フレームワークを使用して大規模なアプリケーションを作成する場合は、コンポーネントの構造を考慮することが重要です。コンポーネントの構造を考慮することで、実行時に各コンポーネントが読み込まれてアプリケーションの速度が低下することを回避できます。アプリケーションを構築するときに、不要なデータをユーザーに返したり、全体的にユーザー エクスペリエンスが低下したりすることを回避することもできます。

React や Angular などのフレームワークは、コンポーネント構造を考慮するためにそれぞれ React.lazy() とルーティング モデルを使用します。

この記事では、2 つのデモを実装して、Vue が非同期コンポーネントを使用して、遅延読み込みとコード分割手法を使用してアプリケーションの読み込み時間を短縮する方法を確認します。

Vue でのコンポーネントの作成

Vue がどのように機能するかを理解するために、基本的なコンポーネントを作成することから始めましょう。

ターミナルに移動し、Vue の CLI をインストールし、プロジェクトを作成します。

npm install -g vue/cli
vue create book-project
#choose the default setting when prompted

新しいプロジェクト フォルダーで、helloworld.vue を含むデフォルト ファイルの内容を置き換えましょう。 と app.vue。まずは書籍の寄付ページを作成します。 helloworld.vue の名前を book.vue に変更し、その内容を次の内容に置き換えます:

<!--Book.vue-->
<template>
  <h1>Donate Books</h1>
</template>

次に、App を次の内容に置き換えます。 :

<!--App.vue-->
<template>
  <div>
    <book></book>
  </div>
</template>

<script>
  Import Book from "./components/Book"
  export default {
    components: {
      Book
    }
  }
</script>

<style>
#app {
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

上記のコード ブロックでは、Book コンポーネントが静的にインポートされていることがわかります。これは、アプリケーションがロードされるたびに Book コンポーネントがロードされることを意味します。

次に、ターミナルで npm runserve を実行し、localhost:8080 に移動して、基本コンポーネントを表示します。

#アプリケーションがロードされるたびに

Book コンポーネントをロードしても、重大なパフォーマンス上の問題はないようです。ただし、アプリケーションが大きくなるにつれて、実行時に各コンポーネントをロードするのは面倒になります。

ユーザーはアプリ内のすべての機能を操作するわけではないため、必要な機能のみを提供するのが合理的です。問題は、ユーザーが必要とするものだけをどのようにロードするかということです?

ここで、遅延ロードとコード分割テクニックが役に立ちます。遅延読み込みではコンポーネントの初期読み込みが遅れ、ユーザーがページ上のその場所に移動するまで画像などのリソースが読み込まれなくなります。

コード分割は、もともと webpack によって提供されていた機能です。 Webpack を使用すると、コードを必要な場合にのみ使用するさまざまなパッケージに分割できます。

Vue は、動的インポートと呼ばれる機能を通じてコード分解を実行します。

このインポートでは、webpack (または Parcel などのモジュール バインダー) を使用してコンポーネントを非同期的に読み込みます。その構文は、アロー関数でラップされた Promise で構成されています。

// dynamic import
import("./components/Book").then(Book => {
  // Insert the Book module here
});

これを App.vue コンポーネントに実装してみましょう:

<template>
  <div>
    <book></book>
  </div>
</template>

<script>
export default {
  components: {
    Book: () => import("./components/Book")
  }
};
</script>

上記のコード例では、

import() 関数は Book コンポーネントを返します。これにより、非同期で読み込むことができます。ブラウザ devtools の [ネットワーク] タブを見ると、App.js によって開始された 0.js という名前のファイルがあります。このファイルには、非同期コンポーネントが含まれています:

非同期コンポーネントを使用して Vue アプリケーションを作成する

続けてみましょう基本的な書籍寄付アプリケーションを構築して、非同期コンポーネントを活用する方法を示します。最後に、ユーザーが

Donate ボタンをクリックしたときにのみ Donate コンポーネントが読み込まれるようにします。

まず、ターミナルに移動し、プロジェクト フォルダーに

vue-material をインストールしましょう。アプリケーションにはこのスタイルを使用します:

cd book-project
npm i vue-material

vue-material をアプリケーションにインクルードし、src/main.js: にインポートします。

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'
Vue.use(VueMaterial)
new Vue({
  render: h => h(App),
}).$mount('#app')

次に、前に作成した

Book コンポーネントを構築しましょう。

<!--Book.vue-->
    <template>
     <div id="app">
      <md-card md-with-hover v-for="(book, key) in books" v-bind:key="key">
          <md-ripple>
            <md-card-header>
              <div class="md-title">{{book.name}}</div>
              <div class="md-subhead">{{book.genre}}</div>
            </md-card-header>
            <md-card-actions>
        <md-button type="primary" @click="addBook(key)">Donate to improve {{book.genre}}</md-button>
            </md-card-actions>
          </md-ripple>
        </md-card>
        <div v-if="show">
          <md-card-content>
         <donate v-bind:selectList="selectList"></donate>
          </md-card-content>
    </div>
        <md-button @click="show = true" id="donate">Donate {{selectList.length}} book(s)</md-button>
      </div>  
    </template>
    
    <script>
      export default {
      name: &#39;RegularButtons&#39;,
      methods: {
        addBook (key) {
          if(!this.selectList.includes(key)) {
            this.selectList.push(key);
          }
        }
      },
      components: {
        donate: () => import(&#39;./Donate&#39;)
      },
      data: () => ({
        books: [
          { name: &#39;Using Creatine&#39;, genre: &#39;Workouts&#39; },
          { name: &#39;Learn Parkour&#39;, genre: &#39;Sports&#39; },
          { name: &#39;Snorkelling&#39;, genre: &#39;Diving&#39; },
        ],
        selectList: [],
        show: false
      })
    }
    </script>

上記のコード ブロックでは、書籍リストが Books 配列から取得され、表示されます。ユーザーが各書籍のボタンをクリックすると、

addBook() メソッドが選択した書籍を selectList 配列にプッシュし、寄贈された書籍の総数を表示します。

非同期コンポーネントのロード専用の別のボタンもあります。そのパラメータ

show は true に設定されます。これにより、v-if ステートメントで、選択した書籍の数を含む donate コンポーネントを表示できるようになります。

donate コンポーネントは、

• ノードおよびlaravelプロジェクトの事前レンダリングされたvue.jsアプリケーション
• Vue.js の高度な面接の質問 15 選
• 10 個以上のトップ Vue.js ツールとライブラリ (共有)
• Vue の計算プロパティ、メソッド、ウォッチの違い
• Vue.js で動的コンポーネントを使用する方法