為什麼需要懶載入？vue這種單頁面應用，如果沒有應用懶載入，運用webpack打包後的檔案將會異常的大，造成進入首頁時需要載入的內容過多，時間過長，會長時間的白屏，即使做了loading也是不利於使用者體驗，而運用懶載入則可以將頁面進行劃分，需要的時候載入頁面，可以有效的分擔首頁所承擔的載入壓力，減少首頁載入用時。

1.懶載入(Vue非同步元件技術)

// 路由
{ path: '/home', name: 'home', component: resolve => require(['@/components/Home'],resolve) }
// 元件
components: {
  historyTab:resolve 
 
=> {
  require(['../../component/historyTab/historyTab.vue'],resolve)
  },   
},

2.webpack的require.ensure技術

{ path: '/list', name: 'List', component: resolve => require.ensure([], () => resolve(require('../components/List')), 'chunkName') }

//多個路由指定相同的chunkName，會合並打包成一個js檔案

3.es6的import

// 下面2行程式碼，沒有指定webpackChunkName，每個元件打包成一個js檔案　
 

const Demo1 = () => import('@/components/Demo1') 
const Demo2 = () => import('@/components/Demo2')

// 下面2行程式碼，指定了相同的webpackChunkName，會合並打包成一個js檔案。

// const Demo1 = () => import(/* webpackChunkName: 'Demo1' */ '../components/Demo1')
// const Demo2 = () => import(/* webpackChunkName: 'Demo1' */ '../components/Demo2')
 

export default new Router({
    routes: [
        {
            path: '/demo1',
            name: 'Demo1',
            component: Demo1
        },
        {
            path: '/idemo2',
            name: 'Demo2',
            component: Demo2
        }
    ]
})