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

布满荆棘的人生 2021-07-24 18:48 354阅读 0赞

# 一 点睛 #

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

具体需要3步：

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

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

# 二 优化后的效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/7e10b9d1e28146ad95ba6f7d73a969e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/e68fa67d13334dab8b5713db7adb513e.png