vue路由懒加载含义是什么,如何使用
Admin 2022-07-04 群英技术资讯 586 次浏览
官方的解释:
JavaScript
包会变得非常大,影响页面加载。官方想表达的意思
路由懒加载做了什么
路由懒加载的主要作用是将路由对应的组件打包成一个个js代码块
只要在这个路由被访问到的时候,才加载对应的组件
在使用之前,我们先来看看原先代码是如何加载路由的
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文件只有路由被访问到了才会去加载,能省下不少的加载时间
所以我们更推荐使用路由懒加载的方式去加载路由
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
有时候在开发的过程中发现一个Angular项目不太够用,两个独立的项目又不太好复用,这时便需要将原来的Angular项目简单做个升级,这篇文章主要给大家介绍了关于将Angular单项目升级为多项目的相关资料,需要的朋友可以参考下
这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端,有很多服务端特有的问题需要考虑,而限流就是其中之一,本文会通过一个简单的案例来说明,为什么服务端需要进行限流,需要的朋友可以参考下
这篇文章主要为大家详细介绍了vue实现简单的轮播图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
这篇文章主要给大家分享的是Vue 组件化基本使用,所谓组件化,就是把页面拆分成多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的,所以组件在系统内部可复用,组件和组件之间可以嵌套,下面来看文章学习内容吧
这篇文章主要介绍了如何用JavaScipt测网速,对测网速感兴趣的同学,可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008