ホームページ >ウェブフロントエンド >Vue.js >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 } ] })
関連する推奨事項:
プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 !
以上がvue+webpack2でルートの遅延読み込みを実装する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。