Vue路由异步组件

vue异步组件和懒加载可以优化vue的性能

一、 原理

利用webpack对代码进行分割是懒加载的前提，懒加载就是异步调用组件，需要时候才下载。

二、方法步骤

1. 安装对应的处理模块

npm i install babel-plugin-syntax-dynamic-import

2. 在 .babelrc 文件进行配置

"plugins": [ "syntax-dynamic-import" ]

3. 在定义路由的component属性时，直接以函数的形式导入

{
    path: '/login',
    component: () => import('../views/login/login.vue')
  }