Vue Router を使用してルートの遅延ロードとプリロードを実装するにはどうすればよいですか?-Vue.js-php.cn

Vue Router を使用してルートの遅延ロードとプリロードを実装するにはどうすればよいですか?

王林

リリース： 2023-07-21 20:12:24

オリジナル

2521 人が閲覧しました

Vue Router を使用してルートの遅延読み込みとプリロードを実装するにはどうすればよいですか?

Vue Router は、Vue.js の公式ルーティングマネージャーです。これは、シングルページアプリケーション (SPA) にとって非常に重要なフロントエンドルーティング機能の実装に役立ちます。実際のプロジェクトでは、ページ数の増加や機能のリッチ化に伴い、ルートの遅延ロードやプリロードなどの最適化手法がよく使われます。この記事では、Vue Router を使用してこれら 2 つの機能を実現する方法を紹介します。

1. ルーティングの遅延読み込み
通常の状況では、最初に読み込まれるときにページ全体が読み込まれるように、すべてのページコンポーネントを JavaScript ファイルにパッケージ化する必要があります。ブラウザに。しかし、アプリケーションがますます複雑になると、この JavaScript ファイルのサイズがますます大きくなり、初期読み込み時間が長くなります。この問題を解決するには、ルートの遅延読み込みを使用できます。

遅延読み込みルートの作成
Vue Router を使用してルートを作成する場合、Vue の非同期コンポーネント機能を使用して遅延読み込みを実装できます。たとえば、「Home」という名前のページコンポーネントがあります。次のように遅延読み込みルーティングを定義できます:

const Home = () => import('./views/Home.vue')

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

ログイン後にコピー

Webpack の構成
遅延読み込みルーティングを使用する場合は、次のようにする必要があります。 Webpack のコード分割機能は、非同期コンポーネントを 1 つのファイルにパッケージ化します。構成ファイルでは、次の構成が必要です:

module.exports = {
  // ...
  output: {
    // ...
    chunkFilename: 'js/[name].[chunkhash].js'
  },
  // ...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
}

ログイン後にコピー

この構成の後、webpack は非同期コンポーネントを別のファイルに自動的にパッケージ化し、適切なハッシュ値をファイル名として追加します。。

2. ルーティングのプリロード (Preloading)
ルーティングの遅延ロードでは、ページコンポーネントはアクセスされたときにのみロードされ、各ページは 1 回だけロードされます。ただし、シナリオによっては、その後の訪問時の応答速度を向上させるために、アプリケーションの初期化中に一部のページコンポーネントのコードを読み込む必要がある場合があります。これには、ルーティングのプリロード機能を使用する必要があります。

webpack の構成
まず、webpack 構成ファイルで、マジックコメント を使用して、プリロードするコンポーネントを指定する必要があります。例:

const Home = () => import(/* webpackPreload: true */ './views/Home.vue')

ログイン後にコピー

ルーティングの構成
ルートを作成するとき、webpackChunkName オプションを使用して、プリロードされたページコンポーネントに名前を付けて区別しやすくすることができます。例:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "home" */ './views/Home.vue')
    },
    // ...
  ]
})

ログイン後にコピー

このようにして、アプリケーションが初期化されると、Vue Router は自動的に Home コンポーネントをプリロードし、事前にページコンポーネントコードをロードします。

概要
Vue Router の遅延ロード機能とプリロード機能を使用することで、フロントエンドアプリケーションのパフォーマンスを効果的に最適化できます。

実際のプロジェクトでは、ページコンポーネントの数と複雑さに応じて、遅延読み込みまたはプリロードを柔軟に選択して、アプリケーションの読み込み速度とユーザーエクスペリエンスを向上させることができます。

この記事が、Vue Router を使用してルートの遅延読み込みとプリロードを実装する方法を理解するのに役立つことを願っています。皆さんの勉強の幸運を祈っています！

以上がVue Router を使用してルートの遅延ロードとプリロードを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。