电商后台管理系统——路由懒加载

一 点睛

当打包构建项目时，JavaScript包会变得非常大，影响页面的加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

具体需要3步：

1 安装 @babel/plugin-syntax-dynamic-import包，在开发依赖中安装

2 在babel.config.js配置文件中声明该插件。

// 这是项目发布阶段需要用到的 babel 插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
    prodPlugins.push('transform-remove-console')
}


module.exports = {
    "presets": [
        "@vue/cli-plugin-babel/preset"
    ],
    "plugins": [
        [
            "component",
            {
                "libraryName": "element-ui",
                "styleLibraryName": "theme-chalk"
            }
        ],
        // 发布产品时候的插件数组
        ...prodPlugins,
        // 配置插件
        '@babel/plugin-syntax-dynamic-import'
    ]
}

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

import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录组件
//import Login from "../components/Login";
// 导入Home 组件
//import Home from "../components/Home";
// 导入Welcome 组件
//import Welcome from "../components/Welcome";
// 改造成懒加载
const Login = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Login')
const Home = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Home')
const Welcome = () => import(/* webpackChunkName: "login_home_welcome" */ '../components/Welcome')

// 导入 Users 组件
// import Users from "../components/user/Users";
// 导入权限列表 组件
// import Rights from "../components/power/Rights";
// 导入角色列表 组件
// import Roles from "../components/power/Roles";
// 改造成懒加载
const Users = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/user/Users')
const Rights = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Rights')
const Roles = () => import(/* webpackChunkName: "users_rights_roles" */ '../components/power/Roles')

// 导入商品分类 组件
import Cate from "../components/goods/Cate";
// 导入商品分类参数 组件
import Params from "../components/goods/Params";
// 改造成懒加载
//const Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate')
//const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params')

// 导入商品列表组件
//import GoodsList from "../components/goods/List";
// 导入增加商品名称组件
//import Add from "../components/goods/Add";
// 改造成懒加载
const GoodsList = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/List')
const Add = () => import(/* webpackChunkName: "GoodsList_Add" */ '../components/goods/Add')

// 导入订单组件
//import Order from "../components/order/Order";
// 导入报表功能
//import Report from "../components/report/Report";
// 改造成懒加载
const Order = () => import(/* webpackChunkName: "Order_Report" */ '../components/order/Order')
const Report = () => import(/* webpackChunkName: "Order_Report" */ '../components/report/Report')

import {renderThumbStyle} from "element-ui/packages/scrollbar/src/util";

Vue.use(VueRouter)

const routes = [
    // 路由重定向,当访问/,就会重定向到/login
    {
        path: '/',
        redirect: '/login'
    },
    // 定义登录路由规则
    {
        path: '/login',
        component: Login
    },
    // 定义Home的路由规则
    {
        path: '/home',
        component: Home,
        redirect: '/welcome',
        children: [
            {
                path: '/welcome',
                component: Welcome
            },
            /* 用户管理 */
            {
                path: '/users',
                component: Users
            },
            /* 权限管理 */
            {
                path: '/rights',
                component: Rights
            },
            /* 角色管理 */
            {
                path: '/roles',
                component: Roles
            },
            /* 商品分类 */
            {
                path: '/categories',
                component: Cate
            },
            /* 商品分类参数 */
            {
                path: '/params',
                component: Params
            },
            /* 商品列表 */
            {
                path: '/goods',
                component: GoodsList
            },
            /* 增加商品 */
            {
                path: '/goods/add',
                component: Add
            },
            /* 订单 */
            {
                path: '/orders',
                component: Order
            },
            /* 报表 */
            {
                path: '/reports',
                component: Report
            }
        ]
    }
]

const router = new VueRouter({
    routes
})
// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行  next('/login') 强制跳转
router.beforeEach((to, from, next) => {
    // 如果用户访问的登录页，直接放行
    if (to.path === '/login') return next();
    // 从 sessionStorage 中获取到保存的 token 值
    const tokenstr = window.sessionStorage.getItem('token')
    // 没有 token，强制跳转到登录页
    if (!tokenstr) return next('/login')
    next()
})

export default router

二 优化后的效果