我们从：是什么，为什么，怎么用的角度来讲解

是什么

异步组件是指只有页面需要用到时才从服务器加载的组件的一种技术。路由的懒加载就是结合了异步组件技术和webpack代码分割功能从而达到了优化项目的目的。

为什么：

随着项目越来越大，性能问题成为了困扰业务发展的重要因素。
功能不停地累加后，单页面应用首页很重，访问速度愈来愈慢。
业务发展、用户体验都非常迫切要求提高页面加载速度。

【插入知识点】

vue项目打包的时候一般dist里面的js包会有三个分别是：
vendor.js:大小一般最大，因为其包含了vue整一个框架的代码，以及引用的依赖都打包在这里
manifest.js:在vendor.js的基础上，主要将一些异步加载等打包在这里
app.js:
(1)不使用路由懒加载（所有自己写的都在一个app.js）
(2)使用了路由懒加载 则会将app.js分解打包成多个js，如（0****.js、1****.js等一个路由一个对应的js）访问对应的页面就会加载对应的js ，给app.js瘦身提高首页加载速度

怎么用

在 vue 中实现异步组件的方法不止一种。在这里举例用异步组件实现的路由懒加载来讲解三种异步组件的方法（每一个路由看作是每一个组件）；
【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技术，也可以实现按需加载。这种情况下，多个路由指定相同的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')
        }