vue-router懶加載

1. vue-router懶加載定義

當路由被訪問的時候才加載對應組件

2. vue-router懶加載作用

當構建的項目比較大的時候，懶加載可以分割代碼塊，提高頁面的初始加載效率。

3. vue-router懶加載實現

1. 第一種寫法

const routers = [
    {
        path: '/',
        name: 'index',
        component: (resolve) => require(['./views/index.vue'], resolve)
    }
]

1. 第二種寫法

const Index = () => import(/* webpackChunkName: "group-home" */  '@/views/index')
const routers = [
    {
        path: '/',
        name: 'index',
        component: Index
    }
]

1. 第三種寫法

const Index = r => require.ensure([], () => r(require('./views/index')), 'group-home');
const routers = [
    {
        path: '/',
        name: 'index',
        component: Index
    }
]

備註

• ‘@/’ 和 ‘./’有異曲同工之用
• ‘.vue’後綴可省略
• ‘group-home’ 是把組件按組分塊打包, 可以將多個組件放入這個組中