路由懒加载的原理及实现_前端路由懒加载

路由懒加载的原理及实现_前端路由懒加载懒加载解决的问题:避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。就好比,访问login页面,你返回的js路由不仅有渲染login页面的,还有渲染production页面以及其他页面的功能。而这些代码量太大了,文件也大。js文件有个特征,下载完全了才会运行,导致页面首屏速度太慢了,也就是白屏时间太长。这个问题,早就有人发现,于是解决方案就是路由懒加载,这只是一个技术名词。Vue路由懒加载原理说明1)我们一开始用ES6的写法,在路由文件router/index.js中

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

懒加载解决的问题:
避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。
就好比,访问 login 页面,你返回的 js 路由不仅有渲染 login 页面的,还有渲染 production 页面以及其他页面的功能。而这些代码量太大了,文件也大。js 文件有个特征,下载完全了才会运行,导致页面首屏速度太慢了,也就是白屏时间太长。这个问题,早就有人发现,于是解决方案就是路由懒加载,这只是一个技术名词。

Vue路由懒加载原理说明
1) 我们一开始用ES6的写法,在路由文件router/index.js中引入所有路由要用到的组件,然后在每个路由对象中注册组件。使用这种方法时,我们加载路由文件时,首先要加载所有引入的路由组件,这样会影响页面的加载速度。现在我们通过懒加载的方式去改善这一问题,所以就延伸出了resolve这一概念;
2) 箭头指向的部分就是我们的改善方法。当用require这种方式引入的时候(ES5的写法),会将component分别打包成不同的js文件,加载的时候也是按需加载,只用访问这个路由网址时才会加载这个js;
3) 也是按需加载,只用访问这个路由网址时才会加载这个js;

使用:

写法1:
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
写法2:
component:resolve => require(['@/pages/task'],resolve)

webpackChunkName:在学习了webpack之后了解其做用,作用就是webpack在打包的时候,对异步引入的库代码(lodash)进行代码分割时(需要配置webpack的SplitChunkPlugin插件),为分割后的代码块取得名字。
Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/188876.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java强制删文件夹_Java 删除文件夹 和 文件 集合

    java强制删文件夹_Java 删除文件夹 和 文件 集合《此文拷贝自http://kxjhlele.iteye.com/blog/323657》1,验证传入路径是否为正确的路径名(Windows系统,其他系统未使用)//验证字符串是否为正确路径名的正则表达式privatestaticStringmatches=”[A-Za-z]:\\\\[^:?\”>//通过sPath.matches(matches)方法的返回值判断是否正确/…

  • JMeter参数化4种实现方式「建议收藏」

    JMeter参数化4种实现方式「建议收藏」前言下面是目前JMeter系列已有博文列表,持续更新中:JMeter安装与接口测试入门JMeter接口测试之断言实现JMeter逻辑控制器JMeter配置元件JMeter操作Mysql数据库BeanShellSampler与BeanShell断言JMeterLinux下执行测试JMeter自定义日志与日志分析1参数化释义什么是参数化?从字面上去理解的话,就是事先准备好数据(广义上来说,可以是具体的数据值,也可以是数据生成规则),而非在脚本中写死,脚本执行时从准备好的数据中

  • 测试15

    测试15无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家。教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家。点这里可以跳转到教程。HTTP的接口测试工具有很多,

  • 【带你入门】java网络编程

    【带你入门】java网络编程网络编程网络编程对于很多的初学者来说,都是很向往的一种编程技能,但是很多的初学者却因为很长一段时间无法进入网络编程的大门而放弃了对于该部分技术的学习。在学习网络编程以前,很多初学者可能觉得网络编程是比较复杂的系统工程,需要了解很多和网络相关的基础知识,其实这些都不是很必需的。首先来问一个问题:你会打手机吗?很多人可能说肯定会啊,不就是按按电话号码,拨打电话嘛,很简单的事情啊!其实初学者如果入门网

  • vue.js与jquery的区别_说出两者之间的区别

    vue.js与jquery的区别_说出两者之间的区别jQuery:曾经是前端最流行的js库。Vue:是一个兴起的js库,是一个精简的MVVM。从技术角度讲。Vue.js专注于MVVM模型的ViewModel层,它通过双向数据绑定把view和Model层连接起来,通过对数据的操作完成对页面视图的渲染。二者的区别是:一、Vue和jQuery对比jquery是使用选择器()选取DOM对象,对其进行赋值、取值、事件绑定等操作,和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。二、Vue则是通过Vue对.

    2022年10月16日
  • p750tm安装linux系统,Android 开发环境(虚拟机,LINUX, secureCRT)安装过程.pdf

    p750tm安装linux系统,Android 开发环境(虚拟机,LINUX, secureCRT)安装过程.pdfAndroid开发环境(虚拟机,LINUX,secureCRT)安装过程Androidlinux开发环境(虚拟机,LINUX,secureCRT)安装过程注意由于selinux打开,smb不能正常工作。Windows不能够访问虚拟机,要关闭selinux才能正常访问。解决方法:vi/etc/sysconfig/selinuxSELINUX=enforcing–>…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号