vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度_江南春008_新浪博客

最新推荐文章于 2024-02-18 14:40:13 发布
最新推荐文章于 2024-02-18 14:40:13 发布
阅读量280 收藏
点赞数
文章标签： vue java javascript devops js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jjh0901/article/details/90608530
版权

正常情况，我们是这样配置路由的，页面少的情况下不会有问题，如果页面很多，一次加载很多路由，会导致首屏加载时间变慢！

vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度

何谓路由懒加载呢？

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。

具体写法如下：resolve => require(['@/views/optView/websiteList'],resolve)

vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度

配合webpack的分割功能，将会进一步减小vendor.js体积，同时分割出多个js，在需要时引入，达到进一步提升首屏加载速度的效果。

下面是路由懒加载、启用压缩、webpack分割打包后的效果，vendor.js--58.5kb：

vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度

vue实践笔记系列十一——路由懒加载进一步提升首屏加载速度

打包后，首屏加载速度会更快！！！

JJH0901
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE3.0——路由懒加载、组件懒加载
HarryHY的博客
10-31 3145
路由懒加载 在构建的时候已经给我们做了一个demo了 { path: '/user', name: 'user', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => im
Vue首屏加载速度优化，提升80%以上
liaoxianhua888的博客
04-18 8024
在Vue项目中，引入到工程中的所有js、css文件，编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首屏的体验。可以看个例子： 这是优化前的页面加载状态：执行npm run build打包项目，出来的vendeor.js文件，基本都是1M以上的的巨大文件，没有用户能忍受5s以上的loading而不关闭页面的，如图所示： 当项目在挂载到服务器上，平均都是10S以上加载出来，好家伙这加载时间，仿佛过了半个世纪
vue路由懒加载（优化页面加载速度）
weixin_30433075的博客
08-27 489
不使用路由懒加载时app.js在首页加载时会把全部的路由js代码加载完毕，一定程度上影响页面加载速度 使用路由懒加载前： 使用路由懒加载后：（“1.js”是当前加载页面路由的js文件） 路由懒加载使用方法：官方说明https://router.vuejs.org/zh/guide/advanced/lazy-loading.html 遇到的问题：把项目模式...
vue的路由懒加载
weixin_30376083的博客
03-01 90
路由懒加载官方介绍 非懒加载写法： import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法： const Login = () => import('@/components/Login') 这里要扩展说明的是 把组件按组分块： const Login = () => import(/* w...
vue首屏加载优化（路由懒加载）
Flying____fish的博客
03-27 1570
vue首屏加载过慢问题 首屏加载过慢原因： vue进行的是单页面开发，第一次加载页面时会一次性几乎把所有的组件数据下载完毕，导致加载时间过长，出现白屏停留时间过长的情况，也就是首屏加载过慢问题。 解决办法： 路由懒加载 ui 框架按需加载 gzip 压缩 一、路由懒加载 官方描述： 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加
路由懒加载
weixin_58032613的博客
03-29 1330
懒加载解决的问题： 避免进入首页就加载全部的前端资源造成用户等待时间过长的问题。 就好比，访问 login 页面，你返回的 js 路由不仅有渲染 login 页面的，还有渲染 production 页面以及其他页面的功能。而这些代码量太大了，文件也大。js 文件有个特征，下载完全了才会运行，导致页面首屏速度太慢了，也就是白屏时间太长。这个问题，早就有人发现，于是解决方案就是路由懒加载，这只是一个技术名词。 Vue路由懒加载原理说明 我们一开始用ES6的写法，在路由文件router/index.js中引入所
vue 项目首屏加载性能调优
cimo的博客
12-09 1597
体积性能优化 分析项目体积可以使用webpack的webpack-bundle-analyzer或是 VUE GUI 里自带的webpack Analyzer 本项目使用webpack-bundle-analyzer分析如下： 主要针对比较通用的一些常规优化： 常规的性能优化一般有四种： 按需引入 CDN 资源 1、按需引入 最常见的就是 UI 框架和路由页面的按需引入 对于quasar按需引入的格式一般如下： import { Quasar, LoadingBar, Dialog, .
Vue 路由懒加载——介绍以及遇到的问题
fufu_good的博客
03-20 1858
使用路由懒加载的原因 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 实现路由懒加载的方式（介绍2中主流的方法） 1.vue异步组件技术 ==== 异步加载 采用resolve => require([‘vue文件路径’],resolve) { path: 'student', name: 'Student', meta: { tit
vue2.0_路由懒加载的设置和重置路由实现更新路由配置
QiuRenBB的博客
02-21 3462
路由懒加载  前言：   我们都知道网页默认刚打开的时候，就去加载了所有的页面，首屏加载速度变得很缓慢。而路由懒加载就是只加载你当前进入的那个模块页面。按需加载路由对应的资源，可以提高首屏加载速度（ 注: 首页不用设置懒加载，而且一个页面加载过后再次访问是不会重复加载的）。  实现原理：   将路由相关的组件，不再直接导入了，而是改写成异步组件调用的方法，只有当函数被调用到的时候，才去加载对应的组件内容。  普通路由配置 import Vue from 'vue' import VueRouter from
vue 判断页面加载完成_Vue组件懒加载(异步延迟加载和彻底懒加载)
weixin_40002224的博客
11-22 1791
在Vue脚手架项目中，所有以import方式导入的组件的html+css+js等都会编译到app.js文件中----所以这个文件会很大，但是这个文件必然在首屏加载的时候下载。 这就导致了首屏加载慢!解决的方法：1.异步延迟加载 先看非异步延迟加载，index.js文件中import About from '../components/About.vue'; //一旦这样写，后续项目打包结束将会直...
ajax上拉懒加载列表（适用于移动端）
12-04
近期项目Dome,常用ajax下拉懒加载列表。
vue项目首屏加载优化
重楼的博客
10-15 5874
vue项目首屏加载优化1、存在的问题2、什么是首屏加载2.1 首屏加载时间的计算3、加载慢的原因4、解决的办法4.1 路由懒加载4.1.1 什么是路由懒加载？4.1.2 为什么需要懒加载呢？4.1.3 路由懒加载的原理4.1.4 如何实现路由懒加载？4.2 压缩图片4.3 gzip 压缩4.3.1 服务器压缩文件4.3.2 前端 webpack 打包生成 gz 文件4.4 Webpack打包体积优化4.4.1 splitChunks4.4.2 splitChunks优化5、时间轴回放 最近这几个月一直在开发
首屏加载时间过长？首屏白屏问题解决？打包文件体积过大优化？
Holly31的博客
05-16 1321
2.在webpack打包的过程中，将多余文件去掉，如不生成map文件，即在config/index.js中将productionSourceMap的值修改为false，就可以在编译时不生成.map文件了。5）异步加载js,async是JavaScript下载完成，就会立即执行代码，等待执行完之后才继续解析HTML。4.gzip压缩：前端配置gzip压缩，并且服务端使用nginx开启gzip，用来减小网络传输的流量大小。5.不要滥用第三方库，用到一个功能点整个第三方全部引入，按需引入；
vue项目浏览器首屏加载太久原因之一——加载文件太多
qq_45865796的博客
02-15 1936
vue项目首屏加载太慢可能是文件加载太多
vue 路由懒加载
我不是一个假前端的博客
03-26 575
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。 首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)： c...
vue-router 实现路由懒加载
最新发布
有我更精彩的博客
02-18 503
在现代的Web开发中，前端技术的发展日新月异。在构建大规模单页应用（Single Page Application）时，路由管理是一个非常重要的环节
Vue 路由懒加载
chen520的博客
08-12 3588
通过本篇技术博文的学习，我们深入了解了 Vue 路由懒加载的原理和应用。路由懒加载是提升 Web 应用性能的关键技术之一，它能帮助我们在应用中实现按需加载，提高加载速度，优化用户体验。在使用路由懒加载时，我们学会了安装和配置依赖，将路由配置为懒加载，并使用动态导入组件的方式来延迟加载页面。我们还探讨了预加载、组件懒加载、代码拆分和打包策略等进阶技巧，帮助开发人员进一步提升应用性能。当然，除了路由懒加载，我们还可以与其他优化策略相结合，如代码分割等，实现更完善的性能优化。
vue路由懒加载的3种方法
小小1001的博客
08-31 2659
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue路由懒加载_优化vue项目的首屏加载速度
weixin_39663378的博客
12-12 409
最近使用vue-cli3构建了一个小型的博客系统，完工之后，build打包出来发现一个chunk-vendors包就有1.1m，部署上去之后，访问的时候，首屏加载非常慢。居然需要21s，体验极差。这是打包的结果截图根据这种情况，进行了一下优化：一、路由懒加载 结合Vue的异步组件再结合webpack的代码分割，我们可以轻松的实现路由懒加载。路由懒加载的实现有几种方法...
优化Vue应用：懒加载路由提升首屏体验
懒加载通过延迟非首屏组件的加载，直到它们真正被需要时才进行异步加载，从而加快了页面初始加载速度。 懒加载主要有三种实现方式： 1. 使用 `resolve` 方法 这种方式利用了 `resolve` 函数的异步特性，通过 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值