通过我们引入组件都是直接在页面(route.js)最开始引进来，直接使用，如以下代码
import Login from '../views/login/login.vue'
export default [
{
path: '/login',
// component: Login,
name: 'login'
},
]
当我们需要引入的组件非常多的时候，想必大家都可以想象，第一次首屏加载的时候就会是非常慢，给用户体验非常不好。下面给大家介绍一下异步加载组件的方法，上代码
1、首先安装插件
cnpm install babel-plugin-syntax-dynamic-import -D
2、.babelrc添加配置
"syntax-dynamic-import" （如下图）
3、异步引入组件
export default [
{
path: '/login',
component: () => import('../views/login/login.vue'),
name: 'login'
},
//component: () => import('../views/login/login.vue'),这种写法依赖babel-plugin-syntax-dynamic-import 插件
4、效果如images2，组件并不会一次加载完，而是每加载到一个页面的时候才去请求当前组件
image1.png
image2.png
