vue-router實現路由懶加載

當打包構建應用時，Javascript 包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然后當路由被訪問的時候才加載對應組件，這樣就更加高效了。結合 Vue 的異步組件和 Webpack 的代碼分割功能，輕松實現路由組件的懶加載.

1、定義

　　也叫延遲加載，即在需要的時候進行加載，隨用隨載

2、為什么需要

　　像vue這種單頁面應用，如果沒有應用懶加載，運用webpack打包后的文件將會異常的大，造成進入首頁時，需要加載的內容過多，時間過長，會出啊先長時間的白屏，即使做了loading也是不利於用戶體驗，而運用懶加載則可以將頁面進行划分，需要的時候加載頁面，可以有效的分擔首頁所承擔的加載壓力，減少首頁加載用時，進入首頁不用一次加載過多資源造成用時過長。

3、如何實現？

（1）第一種寫法：使用 AMD 風格的 require，於是就更簡單了：

例：const Foo = resolve => require(['./Foo.vue'], resolve)

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

 

（2）第二種寫法：(使用import)

例：component: () => import('@/components/Two')

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

 

（3）第三種寫法：使用webpack特有的require.ensure()。注：require.ensure 是 Webpack 的特殊語法，用來設置 code-split point

例：components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

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

 

4、把組件按組分塊

有時候我們想把某個路由下的所有組件都打包在同個異步塊 (chunk) 中。只需要使用 命名 chunk，一個特殊的注釋語法來提供 chunk name (需要 Webpack > 2.4)。

const Foo = r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo')
const Bar = r => require.ensure([], () => r(require('./Bar.vue')), 'group-foo')
const Baz = r => require.ensure([], () => r(require('./Baz.vue')), 'group-foo')

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

Webpack 會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

5、注

• 一般常用第二種簡寫

• 第三種中，’group-home’是把組件按組分塊打包, 可以將多個組件放入這個組中，在打包的時候Webpack會將相同 chunk 下的所有異步模塊打包到一個異步塊里面。