Vueは必要に応じてロードされた具体的な実現

概念（怠惰負荷）
パッケージ構築アプリケーションの場合、JavaScriptパッケージは非常に大きくなり、ページローディングに影響を与えます。異なるルートに対応するコンポーネントを異なるコードブロックに分割してルートが訪問された時に対応するコンポーネントをロードすることができれば、より効率的になります。
シーン
xxxプロジェクトは単一ページアプリケーションとして、コンポーネント化された開発モードを採用しています。トップページを起動するたびに、すべてのコンポーネントをロードしますが、この時はトップページにアクセスしただけで、大量のコンポーネントが汚染されてロードされることになります。
目的
現在のページにアクセスするときのみ、ページのコンポーネントが全部ロードされないように、対応するコンポーネントをロードします。必要に応じてロードする）
実現する
ap.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import 'babel-polyfill'
import {Promise} from 'es6-promise-polyfill'
import App from '../components/app'

//     ，          。
const Routers = [
  {
    path: '/',  //   
    component: resolve => require(['../components/member/index], resolve)  //       
  },
  {
    path: '/login',
    component: resolve => require(['../components/member/login'], resolve)
  }
]

const RouterConfig = {
  routes: Routers
}
//   router  ，       。
const router = new VueRouter(RouterConfig);
//         。
new Vue({
  el:'#app',
  router,
  //  h  createElement          。
  render: h =>(App) 
})

注意:
require（）関数は二つのパラメータを受け入れる。最初のパラメータは、依存するモジュール、例えば「moduleA」、「moduleB」のような配列であり、2番目のパラメータはコールバック関数であり、前に指定されたモジュールがすべてローディングに成功すると呼び出される。ロードされたモジュールはパラメータとして関数に伝えられ、これらのモジュールはコールバック関数の内部で使用されます。
例示的なコードでは、非同期的な方法でコンポーネントをロードし、require関数は、非同期的にレンダリングされるコンポーネントの導入に責任を負い、レシオは、非同期的なフィードバックレンダリングコンポーネントを担当する。
Babel-polyfill：Promiseをトランスコードコンパイルします。

npm install --save babel-polyfill

es 6 promise-polyfillはPromise互換性の問題を解決します。Promiseについてよく知らない方はここに移動してください。

npm install --save es6-promise-polyfill

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。