vue 路由懒加载详情
更新时间：2021年10月27日 11:25:22 作者：Silent丿丶黑羽
这篇文章主要介绍了vue 路由懒加载，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载，这便是vue 路由懒加载，接下来随小编一起进入文章了解更多详细内容吧
1、什么是路由懒加载
官方的解释：
- 当打包构建应用时，
JavaScript包会变得非常大，影响页面加载。 - 如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
官方想表达的意思
- 首先，我们知道路由中通常会定义很多不同的页面
- 这个页面最后会被打包到哪里呢？一般情况下是会放在一个js文件中
- 但是页面这么多，所有文件都放到一个js文件中，必然会造成这个页面会非常的大
- 如果我们一次性从服务器中请求下来这个页面，可能需要花费一定的时间，甚至用户的电脑上会出现短暂空白的情况
- 如何避免这种情况？使用路由懒加载即可
路由懒加载做了什么
路由懒加载的主要作用是将路由对应的组件打包成一个个js代码块
只要在这个路由被访问到的时候，才加载对应的组件
2、路由懒加载的使用
在使用之前，我们先来看看原先代码是如何加载路由的
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "@/views/Home";
import About from "@/views/About";
import User from "@/views/User";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About
},
{
path: "/user/:userId",
name: "User",
component: User
}
];
我们看到从一开始我们就导入了路由对应的组件，如果需要的导入的组件非常多，那么加载页面就会相对较慢，我们来看下这种方式打包出来的文件
我们看到这种方式打包出来的文件只有2个js文件，之后我们加载页面的时候，需要把这2个文件全部加载完，页面才会展示，如果代码量过多，那么页面响应就比较慢，给用户体验非常不好
接下来我们使用路由懒加载
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
// 新增路由懒加载代码
const Home = () => import('../views/Home')
const About = () => import('../views/About')
const User = () => import('../views/User')
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About
},
{
path: "/user/:userId",
name: "User",
component: User
}
];
我们看到，在路由配置中什么都不需要改变，只需要像往常一样使即可，只是在这之前声明了一个变量，变量中使用箭头函数来导入对应的组件，使用起来非常简单。
使用路由懒加载的方式打包出来的文件结构如下：
我们可以看到比原来的方式多出了3个js文件，这是因为我们上面代码3个组件使用了路由懒加载，这3个js文件只有路由被访问到了才会去加载，能省下不少的加载时间
所以我们更推荐使用路由懒加载的方式去加载路由
到此这篇关于vue 路由懒加载详情的文章就介绍到这了,更多相关vue 路由懒加载 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue之带参数跳转打开新页面、新窗口方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了详解vue几种主动刷新的方法总结，文中详细的介绍了几种方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
基于Vue3和element-plus实现登录功能(最终完整版)
这篇文章主要介绍了基于Vue3和element-plus实现一个完整的登录功能,本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了vue中axios的使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
这篇文章主要介绍了Vue如何根据角色获取菜单动态添加路由,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-01-01
点赞动画是网页评论中常见的功能，本文将介绍如何用vue实现这一效果。点赞时爱心缩小变大，变大时略微大一点再变正常，取消点赞时爱心无动画，同时数字滚动，+1 时向上滚动，-1 时向下滚动2021-05-05
今天小编就为大家分享一篇关于vue2强制刷新,解决页面不会重新渲染的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了VUE-ElementUI 时间区间选择器的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了从0到1搭建element后台框架优化篇(打包优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
最新评论