vue 異步組件 （按需加載）

什么是異步組件？

異步組件就是定義的時候什么都不做，只在組件需要渲染（組件第一次顯示）的時候進行加載渲染並緩存，緩存是以備下次訪問。

為什么用異步組件?

在大型應用中，功能不停地累加后，核心頁面已經不堪重負，訪問速度愈來愈慢。為了解決這個問題我們需要將應用分割成小一些的代碼塊，並且只在需要的時候才從服務器加載一個模塊，從而提高頁面加載速度。

異步組件的寫法：

1、工廠函數

// 全局組件注冊
Vue.component('Home, function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構建代碼切割成多個包，這些包
  // 會通過 Ajax 請求加載
  require(['./Home'], resolve)
})


// 局部組件注冊
new Vue({
  components: {
    'Home': () => resolve => { require(['./Home'], resolve) }
  }
})

2、webpack和ES6推薦返回一個 Promise（推薦）

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1')
const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
// 下面2行代碼，指定了相同的webpackChunkName，會合並打包成一個js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo')
// const ImportFuncDemo2 = () => import(/* webpackChunkName: 'ImportFuncDemo' */ '../components/ImportFuncDemo2')
export default new Router({
    routes: [
        {
            path: '/importfuncdemo1',
            name: 'ImportFuncDemo1',
            component: ImportFuncDemo1
        },
        {
            path: '/importfuncdemo2',
            name: 'ImportFuncDemo2',
            component: ImportFuncDemo2
        }
    ]
})

3、webpack提供的require.ensure()   這種情況下，多個路由指定相同的chunkName，會合並打包成一個js文件。

{
     path: '/promisedemo',
    name: 'PromiseDemo',
    component: r => require.ensure([], () => r(require('../components/PromiseDemo')), 'demo')
},
{
    path: '/hello',
    name: 'Hello',
    component: r => require.ensure([], () => r(require('../components/Hello')), 'demo')
}

4、高級路由

const AsyncComponent = () => ({
  // 需要加載的組件 (應該是一個 `Promise` 對象)
  component: import('./MyComponent.vue'),
  // 異步組件加載時使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 展示加載時組件的延時時間。默認值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認值是：`Infinity`
  timeout: 3000
})

{
    path: '/AsyncComponent',
    name: 'AsyncComponent',
    component: AsyncComponent
},