一、为什么需要路由懒加载
vue在项目打包之后，会生成一个dist文件夹。在dist文件夹里面又有一个js/app.js文件，这里主要存放的是整个项目的业务逻辑代码。随着项目不断的开发迭代，业务逻辑越来越多，app.js文件也会越来越大。在线上就会容易出现进入首页时所需时间过长或者出现白屏的问题。
使用路由懒加载可以分割代码，提高初始页的加载效率。
二、路由懒加载的方式
1、使用ES6的import ( ) –推荐使用
const 组件名 = ( ) => import(‘组件路径’)
（下面代码，没有指定webpackChunkName，每个组件打包成一个js文件）
代码语言：javascript复制const home = () => import('../view/home')（下面代码，指定了相同的webpackChunkName名’testDom‘，会合并打包成一个js文件）
代码语言：javascript复制const home = () => import(/* webpackChunkName: 'testDom' */ '../view/home')
const login= () => import(/* webpackChunkName: 'testDom' */ '../view/login')2、使用vue异步组件resolve
const 组件名 = resolve => require([‘组件路径’],resolve)
（这种情况下一个组件生成一个js文件）
代码语言：javascript复制const home = resolve => require(['../view/home'],resolve)3、webpack提供的require.ensure( )
这种模式也可以通过参数中的webpackChunkName将js分开打包。 const 组件名 = resolve => require.ensure([], () => resolve(require(‘组件路径’)), ‘webpackChunkName’)
代码语言：javascript复制const home = resolve => require.ensure([], () => resolve(require('../view/home')), 'testDom')
