vue+webpack2でルートの遅延読み込みを実装する方法の紹介

次の Vue.js チュートリアル 列では、vue webpack2 がルーティングの遅延読み込みを実装する方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

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

Vue の非同期コンポーネントと Webpack のコード分割機能を組み合わせて、ルーティング コンポーネントの遅延読み込みを簡単に実装します。

まず、非同期コンポーネントは、Promise を返すファクトリ関数として定義できます (この関数によって返される Promise はコンポーネント自体を解決する必要があります):

const Foo = () => Promise.resolve({ /* 组件定义对象 */ })

2 番目に、Webpack 2 では、動的インポート構文を使用してコード分割ポイントを定義できます:

import('./Foo.vue') // 返回 Promise

この 2 つを組み合わせて、Webpack によって自動的にコード分割できる非同期コンポーネントを定義する方法を示します。

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

ルーティング設定を変更する必要はありません。通常どおり使用してください。Foo:

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

関連する推奨事項:

2020 年のフロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアルの推奨事項: 2020 年最新の 5 つの vue.js ビデオ チュートリアルのセレクション

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がvue+webpack2でルートの遅延読み込みを実装する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。