Vue ルーティング遅延読み込みの詳細

1. ルートの遅延読み込みとは何ですか?

公式説明:

アプリをバンドルすると、 JavaScriptバンドルが非常に大きくなり、ページの読み込みに影響する可能性があります。
異なるルートに対応するコンポーネントを異なるコードブロックに分割し、ルートにアクセスしたときに対応するコンポーネントをロードできれば、より効率的になります。

当局者が言いたかったのは

まず、ルートには通常多くの異なるページが定義されていることがわかっています
このページは最終的にどこにパッケージ化されるのでしょうか?通常はjsファイルに配置されます
しかし、ページ数が多い場合、すべてのファイルを 1 つの js ファイルに入れると、必然的にページが非常に大きくなります。
このページをサーバーに一度に要求すると、時間がかかる可能性があり、ユーザーのコンピューターに一時的な空白が表示される場合もあります。
これを回避するにはどうすればよいでしょうか?ルートの遅延読み込みを使用する

ルートの遅延読み込みは何をしますか?

ルートの遅延読み込みの主な機能は、ルートに対応するコンポーネントを js コードブロックにパッケージ化し、ルートにアクセスしたときにのみ対応するコンポーネントを読み込むことです。

2. ルートの遅延読み込みの使用

使用する前に、元のコードがルートをどのようにロードするかを見てみましょう。

「vue」からVueをインポートします。
「vue-router」から VueRouter をインポートします。
「@/views/Home」から Home をインポートします。
「@/views/About」からAboutをインポートします。
「@/views/User」からUserをインポートします。

Vue.use(VueRouter);

定数ルート = [
  {
    パス： "/"、
    名前: "ホーム",
    コンポーネント: ホーム、
  },
  {
    パス: "/about",
    名前: "概要",
    コンポーネント: について
  },
  {
    パス: "/user/:userId",
    名前: "ユーザー",
    コンポーネント: ユーザー
  }
];

ルートに対応するコンポーネントを最初からインポートしていることがわかります。インポートする必要があるコンポーネントが多いと、ページの読み込みが比較的遅くなります。このようにパッケージ化されたファイルを見てみましょう。

このようにパッケージ化されている js ファイルは 2 つだけであることがわかります。後でページを読み込むときに、ページが表示される前に 2 つのファイルすべてを読み込む必要があります。コードの量が多すぎると、ページの応答が遅くなり、ユーザーエクスペリエンスが非常に悪くなります。

次にルートの遅延読み込みを使用します

「vue」からVueをインポートします。
「vue-router」から VueRouter をインポートします。

Vue.use(VueRouter);

// 新しいルートの遅延読み込みコードを追加します const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')

定数ルート = [
  {
    パス： "/"、
    名前: "ホーム",
    コンポーネント: ホーム、
  },
  {
    パス: "/about",
    名前: "概要",
    コンポーネント: について
  },
  {
    パス: "/user/:userId",
    名前: "ユーザー",
    コンポーネント: ユーザー
  }
];

ルーティング構成では何も変更する必要がないことがわかります。通常どおり使用してください。その前に変数を宣言し、変数内の矢印関数を使用して対応するコンポーネントをインポートするだけです。使い方は非常に簡単です。

ルートの遅延読み込みを使用してパッケージ化されたファイル構造は次のとおりです。

元の方法よりも js ファイルが 3 つ多いことがわかります。これは、上記のコード内の 3 つのコンポーネントがルート遅延読み込みを使用しているためです。これらの 3 つの js ファイルはルートがアクセスされたときにのみ読み込まれるため、読み込み時間を大幅に節約できます。

したがって、ルートを読み込むには遅延読み込みを使用することをお勧めします。

これで、vue ルーティング遅延読み込みの詳細に関するこの記事は終了です。vue ルーティング遅延読み込みに関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: