vue 路由懒加载

全栈程序员-站长 • 2026年3月19日下午1:12 • 未分类 • 阅读 2

1. 路由懒加载如何实现

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

当前，我们使用如下方式导入组件

import Login from '../views/Login

打包后，这些组件都会被打包到一个.s文件中，css 代码会打包到 css 文件中

在这里插入图片描述

访问应用时，就会下载这js文件和对应的css文件

在这里插入图片描述

随着代码的增多，文件的体积也会越来越大

文件中包含了所有的用户组件的js以及css代码，但用户可能根本不会浏览器到某些页面，也就是说根本不需要渲染某些组件，所以vue-router 提供了一种路由懒加载机制，就是当某个路由规则匹配时，才会去加载下载并加载某个组件，此时可以提升首页的渲染速度

路由懒加载实现的基础是组件引入方式的变化，需要使用如下方式引入组件才可以

const Login = () => import('../views/Login')

这是原来的引入方式

import Login from '../views/Login

对比原来的引入方式，就能发现不同点：现在的 Login 是个函数，当路由规则匹配上，就会执行这个函数，才去加载此组件

 { path: '/login', name: 'login', component: Login // 此时的 login 是函数 },

将所有组件的引入方式都像上面这样修改后，重新打包，由原来的一个js文件拆分成了体积较小的多个js文件

在这里插入图片描述

现在，我们来请求登录页面，请求多个小文件

在这里插入图片描述

此时再访问用户列表页面，会动态加载新的js和css文件，其他页面也都是这种情况

在这里插入图片描述

这种情况，其实是通过增加网络请求次数换取了每次请求包的缩小，可以明显提升首页加载速度

此时，看看这张图，发现再 3G Slow 网速下，加载速度由原来的 36秒多变成了11秒多点，在正常的4G网速下，达到了0.67秒

在这里插入图片描述

2.把组件按组分块

上面，我们是将每个组件都分别打包了，很多时候是没有必要的，可以将多个组件打包到一个包中

const UserDetails = () => import(/* webpackChunkName: "group-user" */ './UserDetails.vue') const UserDashboard = () => import(/* webpackChunkName: "group-user" */ './UserDashboard.vue') const UserProfileEdit = () => import(/* webpackChunkName: "group-user" */ './UserProfileEdit.vue')

下面修改上面的代码，进行分组打包

// 1、将登录、用户首页模块打包到一组中，组名:login-home const Login = () => import(/* webpackChunkName: "login-home" */ '../views/Login') const Home = () => import(/* webpackChunkName: "login-home" */ '../views/Home') // 2、将用户模块、权限和角色打包到一组中 const Users = () => import(/* webpackChunkName: "user-rights" */ '../views/Users') const Roles = () => import(/* webpackChunkName: "user-rights" */ '../views/Roles') const Rights = () => import(/* webpackChunkName: "user-rights" */ '../views/Rights') // 3、将商品分类、商品参数、商品列表、添加商品打包到一组中 const GoodsList = () => import(/* webpackChunkName: "goods" */ '../views/goods/GoodsList') const GoodsAdd = () => import(/* webpackChunkName: "goods */ '../views/goods/GoodsAdd') const Category = () => import(/* webpackChunkName: "goods */ '../views/goods/Category') const Params = () => import(/* webpackChunkName: "goods */ '../views/goods/Params')

重新打包

在这里插入图片描述