项目优化之路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载，为了优化项目就要进行路由懒加载。
路由懒加载简单来说就是将路由进行一个分类，不是一次性全部加载所有路由，而是把不同路由对应的组件分割成不同的代码块，在用到该路由时再加载这个路由的分类，这样能够提高加载效率。

常用的import方法分类代码如下：

const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login.vue')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home.vue')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome.vue')
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')
const Category = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Category.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')
const List = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List.vue')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add.vue')
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order.vue')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report.vue')

webpackChunkName相同的分为一组，Login 等都是路由组件，单引号内是导入路径。