Vue.jsアプリでの遅延読み込みルート

投稿日: 2022-04-20 2022-10-08
タグ: Vue.js

SPA（シングルページアプリケーション、初心者向け）の複雑さが増すにつれて、アプリケーションバンドルのサイズも複雑になります。ポイントを過ぎると、ページの読み込み時間に大きな支障をきたします。ありがたいことに、 vue-router は、非同期モジュールローディングシステムに組み込まれたwebpackのをサポートしています。その結果、使用頻度の低いルートのルーティングされたコンポーネントを、ルートへのアクセス時にオンデマンドでロードされるバンドルに分離するのは簡単になりました。

使用法

ルート構成が次のようになっていると仮定します。

import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

文字通り、 OtherMassivePage とそのすべての依存関係（他のものとは共有されない）を別のチャンクに分割するために必要なのは、importステートメントを恐ろしいrequireに置き換えることだけです。呼び出しを確認します。

アプリをリロードする場合、ネットワーク開発者ツールをチェックして、最初にロードしたときに新しいファイルがロードされていることを確認するまで、何も変わっていないように見えることに気付くはずです。 /other ルート。

import MainPage from './routes/MainPage.vue'
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))

const routes = [
  { path: '/main', component: MainPage },
  { path: '/other', component: OtherMassivePage }
]

うん。怖いように見えることは知っていますが、私を信じてください。最初に表示されたほど悪くはありません。

これは、ロードされたコンポーネントに最終的に解決される約束のようなものです。その短縮版ではないバージョンは次のようになります。

const OtherMassivePage = resolve => {
  // The empty array is for specifying other dependencies that need to be loaded.
  require.ensure([], () => {
    resolve(require('./routes/OtherMassivePage.vue'))
  })
}

残念ながら、webpackは静的分析を使用してチャンクを検出および分割するため、抽象化やラッパーを使用してこれを短くすることはできません。あなたができる最善のことは、それらのワンライナーを使用して、より少ないスペースを占めることです。

ルートの組み合わせ

同じチャンクに複数のルートまたはコンポーネントが必要な場合があります。これを実現するには、これらのコンポーネントをグループ化するグループの名前を指定する3番目のパラメーターをrequire.ensureに渡すだけです。

// Both routes are output in the same chunk and bundle, causing that bundle to be lazy-loaded when either route is accessed.
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')

webpack を使用する他の多くのタスクとは異なり、これは驚くほど便利な結果を生成するための予想外に簡単な方法です。肥大化する大規模なSPAで作業している場合は、このパターンを使用することを強くお勧めします。

getdocs

13036