Vue项目实现路由懒加载

        在一个vue项目基本功能完成以后，需要将项目进行打包。在不进行任何处理的情况下，JS的包会变得非常大，影响页面加载。如果将不同路由对应的组件分割成不同的代码块，然后当路由访问的时候才加载对应组件，这样会更加高效。具体步骤如下：

一、安装开发依赖@babel/plugin-syntax-dynamic-import

 二、在配置文件babel.config.js中声明该插件'@babel/plugin-syntax-dynamic-import'

 三、将路由改写为按需加载的形式

---

一、安装开发依赖@babel/plugin-syntax-dynamic-import

 二、在配置文件babel.config.js中声明该插件'@babel/plugin-syntax-dynamic-import'

 三、将路由改写为按需加载的形式，示例代码如下：

例如：原来的形式

import Users from '../components/user/Users.vue'
import Rights from '../components/power/Rights.vue'
import Roles from '../components/power/Roles.vue'

改为按需加载的形式（这三个路由组件为一组，所以webpackChunkName是一样的） 

const Users = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/user/Users.vue')
const Rights = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Rights.vue')
const Roles = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Roles.vue')

 至此，就实现了路由组件的懒加载。