【VUE项目实战】65、配置路由懒加载

时间:2022-03-05 00:59:23


接上篇《​​64、CND优化ElementUI以及首页内容定制​​》
上一篇我们学习了通过CND优化ElementUI的打包,以及完成根据生产和测试环境进行不同定制不同的首页内容。本篇我们来学习通过“路由懒加载”提升项目的访问速率。

一、什么是路由懒加载,为什么使用?

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

如何使用路由懒加载呢?需要以下3步:
1、安装@babel/plugin-syntax-dynamic-import包
2、在babel.config.js配置文件中声明该插件
3、将路由改为按需加载的形式
,示例代码如下:

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

上面我们并没有使用import来直接导入对应的组件,而是使用import+小括号的形式,里面的参数是一个注释和组件真正的路径。
注释的意思是这个组件的分组,“webpackChunkName”是组名。如果两个组件的组名相同(例如上面的UserDetails和UserDashboard),那么它们将会被打包到一个js文件中,即请求UserDetails的时候会顺带加载UserDashboard(相反也是),而GoodsDetails是单独的一个组,它会被单独打包到一个js文件中。

上面这个语法是安装了@babel/plugin-syntax-dynamic-import包后才能支持。
关于路由懒加载的详细文档,可参考如下链接:
​​​https://router.vuejs.org/zh/guide/advanced/lazy-loading.html​

注:什么是babel?
vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5。
Babel是一个工具链,主要用于将采用ECMAScript2015+语法编写的代码转换为向后兼容的JavaScript语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

plugin-syntax-dynamic-import是干嘛的?
作用:用以解析识别import()动态导入语法---并非转换,而是解析识别。

二、设置路由懒加载

首先我们来安装@babel/plugin-syntax-dynamic-import(详见:​​https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import/​​):

打开vue UI,在“依赖”模块选择“安装依赖”

【VUE项目实战】65、配置路由懒加载


然后查找名为“plugin-syntax-dynamic-import”的依赖组件,选择第一个:

【VUE项目实战】65、配置路由懒加载


安装完成后我们会在依赖列表中看到该组件:

【VUE项目实战】65、配置路由懒加载

然后打开vscode,找到babel.config.js配置文件,在“module.exports”中的“plugins”加入“plugin-syntax-dynamic-import”的声明:

module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
},
'@babel/plugin-syntax-dynamic-import'
]
]
}

然后找到路由配置文件“.router/index.js”,将所有的路由组件的直接导入写法,修改为懒加载:

import Vue from 'vue'
import VueRouter from 'vue-router'
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 Cate = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Cate.vue')
const Params = () => import(/* webpackChunkName: "Cate_Params" */ '../components/goods/Params.vue')

const GoodsList = () => 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')

Vue.use(VueRouter)
const routes = []

const router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: Login }, //定义访问页面的路由地址
{
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}
]
}
]
})
//挂载路由导航守卫
//to是我们跳转的路径,from是来自的路径,next为放行函数
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();//有token,直接放行
})

export default router

修改完毕保存后,我们前往vue ui进行build,看看打包后的体积:

【VUE项目实战】65、配置路由懒加载


我们对比之前的build结果,发现app和chunk的js都变小了不少,而且build的时间也减少了很多,可以大大优化项目的加载和访问效率。

【VUE项目实战】65、配置路由懒加载

至此,我们的项目优化方面的准备工作全部完成,下一篇我们来正式学习项目上线的相关内容。