我們從：是什么，為什么，怎么用的角度來講解

是什么

異步組件是指只有頁面需要用到時才從服務(wù)器加載的組件的一種技術(shù)。路由的懶加載就是結(jié)合了異步組件技術(shù)和webpack代碼分割功能從而達(dá)到了優(yōu)化項目的目的。

為什么：

隨著項目越來越大，性能問題成為了困擾業(yè)務(wù)發(fā)展的重要因素。
功能不停地累加后，單頁面應(yīng)用首頁很重，訪問速度愈來愈慢。
業(yè)務(wù)發(fā)展、用戶體驗都非常迫切要求提高頁面加載速度。

【插入知識點(diǎn)】

vue項目打包的時候一般dist里面的js包會有三個分別是：
vendor.js:大小一般最大，因為其包含了vue整一個框架的代碼，以及引用的依賴都打包在這里
manifest.js:在vendor.js的基礎(chǔ)上，主要將一些異步加載等打包在這里
app.js:
(1)不使用路由懶加載（所有自己寫的都在一個app.js）
(2)使用了路由懶加載 則會將app.js分解打包成多個js，如（0****.js、1****.js等一個路由一個對應(yīng)的js）訪問對應(yīng)的頁面就會加載對應(yīng)的js ，給app.js瘦身提高首頁加載速度

怎么用

在 vue 中實現(xiàn)異步組件的方法不止一種。在這里舉例用異步組件實現(xiàn)的路由懶加載來講解三種異步組件的方法（每一個路由看作是每一個組件）；
【1】vue-router配置路由，這種情況下一個路由組件生成一個js文件（你自己每個頁面寫的js生成一個js）

        {
            path: '/promisedemo',
            name: 'PromiseDemo',
            component: resolve => require(['../components/PromiseDemo'], resolve)
        }

【2】Vue Router官方路由懶加載 推薦使用這種方式(需要webpack > 2.4)

// 下面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】* vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實現(xiàn)按需加載。這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。

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