Vue のコード分割と遅延読み込みテクニックの詳細な説明

フロントエンド テクノロジの急速な発展に伴い、最新の Web アプリケーションはますます複雑になっています。これらのアプリケーションは、より多くのデータとより複雑なビジネス ロジックを処理する必要があるため、JavaScript アプリケーションはますます大規模になります。これにより、アプリケーションの起動が遅くなり、ユーザー エクスペリエンスが低下する可能性があります。この目的のために、Vue はアプリケーションの最適化に役立ついくつかの高度な機能を提供します。これらの中で最も重要なのは、コード分割と遅延読み込み手法です。

この記事では、Vue のコード分割と遅延読み込みテクニックについて詳しく説明します。コード分​​割とは何か、Vue アプリケーションでコード分割を使用する必要がある理由、およびコード分割の実装方法について説明します。その過程で、遅延読み込み手法とは何か、それが重要な理由、および Vue での使用方法についても説明します。

コード分割

コード分割は、コードを小さな部分に分割し、必要に応じてオンデマンドでロードする手法です。コード分​​割は、特にアプリケーションが大きくなるにつれて、初期ロード時間を短縮し、アクセス速度を向上させるのに役立ちます。

Vue には、動的インポート (Dynamic Import) またはサードパーティ ライブラリの使用という 2 つのコード分割方法が用意されています。

動的インポート ソリューション

動的インポートを使用すると、アプリケーションをより小さなコード ブロックに分割できるため、必要に応じてオンデマンドで読み込むことができます。動的インポートは Webpack で使用する必要があります。 Webpack は、必要なチャンクを個別のファイルにパッケージ化し、ユーザーが要求した場合にのみこれらのチャンクをロードできます。

それでは、簡単な例を見てみましょう。ユーザー情報を表示する User コンポーネントを含む App コンポーネントがあるとします。ユーザー コンポーネントをコード ブロックに分割できます。ユーザーがアプリ コンポーネントにアクセスすると、ユーザー コンポーネントは必要な場合にのみロードされます:

const App = {
  data() {
    return {
      user: null
    }
  },
  methods: {
    async loadUserData() {
      const userModule = await import('./user.js')
      this.user = userModule.default
    }
  },
  template: `
    <div>
      <button @click="loadUserData()">Load User Data</button>
      <div v-if="user">
        <h2 id="user-name">{{ user.name }}</h2>
        <p>{{ user.bio }}</p>
      </div>
    </div>
  `
}

この例では、インポート関数を使用して動的にインポートします。 user.js モジュール。ユーザーが「ユーザーデータのロード」ボタンをクリックすると、モジュールがロードされ、アプリコンポーネントのユーザーデータとして設定されます。ユーザーがボタンをクリックしないと、User コンポーネントはロードされません。

サードパーティ ライブラリ ソリューション

動的インポートに加えて、サードパーティ ライブラリを使用してコード分割を実現することもできます。 Vue では、動的インポートをサポートするために @babel/plugin-syntax-dynamic-import プラグインを使用することをお勧めします。

このプラグインを使用すると、アプリケーションで動的インポート構文を使用できるようになります。例:

const Foo = () => import('./Foo.vue')

このステートメントは Promise を返し、ロードの完了後に ES モジュラー オブジェクトを出力します。

遅延読み込み

遅延読み込みは動的インポートに似ています。違いは、遅延読み込みは、コードを小さなチャンクに分割し、必要な場合にのみロードするオンデマンド読み込みの方法であることです。これにより、初期ロード時間が短縮され、アクセス速度が向上します。

Vue での遅延読み込みは、webpack および ES モジュールを使用して実装できます。これを達成するための 2 つの方法を以下に示します。

vue-router による遅延読み込み

Vue ルーターは、コンポーネントを非同期コンポーネントとして定義することで遅延読み込みを実装できます。非同期コンポーネントは Promise を返し、ロードが完了すると Vue コンポーネントが出力されます。

非同期コンポーネントを使用してユーザー コンポーネントをロードする例を次に示します。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: () => import('./components/User.vue')
    }
  ]
})

この例では、ルーター構成で非同期コンポーネントを使用します。ユーザーが「/user/:id」パスにアクセスすると、User コンポーネントが非同期でロードされます。

webpack による遅延読み込み

Vue アプリケーション内のコンポーネントはすべて、非同期コンポーネントとして定義できます。 Webpack は、非同期コンポーネントを別のファイルにパッケージ化し、ユーザーが要求したときにそれらをロードします。

Webpack で遅延読み込みを使用してユーザー コンポーネントを読み込む例を次に示します。

const User = () => import(/* webpackChunkName: "user" */ './User.vue')

この例では、ユーザー コンポーネントを作成し、それを非同期コンポーネントとして定義します。 Webpack は、ユーザー コンポーネントを「user.chunk.js」という名前の別のファイルにパッケージ化します。

最後に、Vue Router または Webpack を使用してコード分割と遅延読み込みを実現し、それによってアプリケーションの読み込み速度を高速化し、ユーザー エクスペリエンスを最適化します。上記のヒントを使用して、コードを小さな部分に分割し、オンデマンドでロードするだけです。

以上がVue のコード分割と遅延読み込みテクニックの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。