vue延迟渲染组件_性能优化之组件懒加载: Vue Lazy Component 介绍

最新推荐文章于 2024-06-14 13:46:19 发布
最新推荐文章于 2024-06-14 13:46:19 发布
阅读量1.1k 收藏 3
点赞数
文章标签： vue延迟渲染组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39746241/article/details/112817762
版权

这篇文章分享了从遇到前端业务性能问题，到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案(Vue Lazy Component )的过程。

初始加载资源过多

问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。

初始加载的时候，一共请求了155个资源，请求的瀑布图就快要和页面一样长了?

初始加载的资源过多导致在 domInteractive 之后，页面花费了大量时间加载子资源，导致页面的 load 时长被严重拖长，达到了 5.6s 。

来看看这些子资源都是什么，根据请求资源的类型，我们找到了最多的类型是图片，这是显而易见的，页面上到处都是大图片，其次是 js 文件，由第三方的业务插件和一些 JSONP 的接口组成。

问题分析

再回到最初的这个页面，结合上面的数据情况我们得出了这个页面的问题总结结论：页面由大量模块组成

每个模块部分由首页自主维护，部分由业务方通过插件维护

所有模块是同时进行加载

模块中图片内容较多

每个模块的依赖资源较多(包括js文件、接口文件、css文件等)

解决思路

我们提出了下面两个主要的解决思路：

组件化分治思想

为

最低0.47元/天 解锁文章
weixin_39746241
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中使用 defineAsyncComponent 延迟加载组件
lio-zero 的博客
03-29 1475
使用 Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。这意味着它们仅在需要时从服务器加载。 这是一个改善初始页面加载的好方法，因为我们的应用程序将以较小的块加载，而不必在页面加载时加载每个组件。 什么是 defineAsyncComponent 以下示例来自官网异步组件： import { defineAsyncComponent } from 'vue' ...
推荐项目：Vue-Lazy-Component - 动态懒加载组件库
gitblog_00069的博客
04-09 500
推荐项目：Vue-Lazy-Component - 动态懒加载组件库 项目地址:https://gitcode.com/xunleif2e/vue-lazy-component 项目简介 Vue-Lazy-Component 是一个基于 Vue.js 的轻量级、高效的动态组件懒加载库。它允许你在应用中按需加载组件，从而优化应用程序性能，减少初始页面加载时间，提高用户体验。 技术分析 Vue-Laz...
vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度
weixin_34357962的博客
12-26 546
最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。 但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当...
vue 延迟渲染
最新发布
jiaqichinese的专栏
06-14 133
这段文本会在组件被渲染后显示
vue延迟渲染组件_vue-lazy-render: 延迟渲染大组件，增强页面切换流畅度
weixin_39965881的博客
12-31 304
最近用element来做项目，在开发的过程中，突然发现页面的操作和切换在数据量大的时候相当卡，后来提了个issue,在furybean解答后才知道，我每个单元格都加了tooltip，会生成大量的节点，造成页面操作卡顿。后来将tooltip去掉，操作流畅多了。但是，由于我是将页面的数据存在vuex中的，在路由切换回来的时候，发现在数据量大的时候，页面渲染得很慢，大概两三秒才能切换过来，用户体验相当不...
vue组件懒加载 ajax,Vue.js 2.0 组件级懒加载方案: Vue Lazy Component
weixin_39989668的博客
08-05 303
Vue.js 2.0 组件级懒加载方案支持 组件可见或即将可见时懒加载支持 组件延时加载支持 加载组件前展示组件骨架，提高用户体验支持 懒加载组件分包异步加载安装npm install @xunlei/vue-lazy-component复制代码在线Demo使用1.注册组件方式1利用插件方式全局注册import VueLazyComponent from '@xunlei/vue-lazy-com...
vue延迟操作
热门推荐
六六的小帅的博客
06-05 1万+
关于vue中延迟加载、执行、渲染
vue-lazy-component：:snail:Vue.js 2.x组件级懒加载方案-Vue.js 2.x组件级延迟加载解决方案
02-06
Vue.js 2.x 版本引入了许多优化特性，其中组件级延迟加载（懒加载）是一个重要的性能提升策略。"vue-lazy-component" 是一个专门为Vue.js 2.x设计的插件，它允许我们在应用中按需加载组件，从而减少初始页面加载时间...
Vue组件用于Vue组件的延迟渲染
08-10
为了解决这个问题，Vue 提供了一种策略，即延迟渲染（Lazy Rendering），通过延迟加载某些组件来优化用户体验。 延迟渲染在 Vue 中通常通过以下几种方式实现： 1. **Vue懒加载（Vue懒组件）**：Vue 允许我们按需...
vue前端性能优化01
12-17
8. **异步组件**：Vue.js允许定义异步组件，将组件的加载延迟到实际需要的时候，这样可以加快页面的初始渲染速度。 9. **优化模板**： - 使用`v-once`指令一次性渲染元素，之后即使数据改变，也不会重新渲染。 - ...
vue项目常用组件和框架结构介绍
08-28
7. Vue-LazyLoad: Vue-LazyLoad 是一个实现图片懒加载的工具，用于优化 HTTP 传输性能。 8. Vue-Awesome-Swiper: Vue-Awesome-Swiper 是一个轮播功能的实现及一些特殊切换效果的完成工具。 9. Better-Scroll: Better...
vue父子组件 渲染过程，超详细
飞翔的熊blabla
05-11 5980
这里vue的子组件引入有两中方式：同步和异步，因此父子组件加载的顺序 是不一样的，接着往下看，会有收获的。 一、 同步引入 例子： import Page from '@/components/page' 二、异步引入 例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) image.png 同步引入时生
vue延迟渲染组件_vue数组修改的渲染性能问题
weixin_31815843的博客
01-16 1363
最近用vue做一个小东西，发现了一个奇怪的现象，当模板使用数组进行v-if判断时，如果修改数组的值，页面渲染会明显有延迟，示例代码如下：这个更多显示反应有延迟{{v.name}}export default {data() {return {list:[{'id':0,'name':'a'},{'id':1,'name':'b'},{'id':2,'name':'c'}],more: [false...
【案例分享】关于vue延迟显示而导致渲染失败的问题
m0_73575951的博客
07-21 564
在编写项目的时候，后端的代码没有问题，可以正常的输出，而且在前端的控制台测试也可以看到输出的结果，但是前端又没有显示出来，这是因为后端数据存放在数组或者集合中的时候，刚开始的时候，数组为空，这时vue已经渲染了一次，而当数组为二维数组或者时集合和数组的嵌套时，外层的数组感觉不到里面的数据发生了变化而导致vue不会对前端数据进行二次渲染，而导致渲染失败，只会显示空数组，所有前端看不到数据。
性能优化之组件懒加载: Vue Lazy Component 介绍
大灰狼的小绵羊哥哥的博客
07-13 2623
性能优化之组件懒加载: Vue Lazy Component 介绍这篇文章分享了从遇到前端业务性能问题，到分析、解决并且梳理出通用的Vue 2.x 组件级懒加载解决方案（Vue Lazy Component ）的过程。初始加载资源过多问题起源于我们的一个页面，下面是这个页面的截图和初次请求的瀑布图。初始加载了155个请求初始加载的时候，一共请求了155个资源，请求的瀑布图就快要和页面一样长了
vue面试五之vue修饰符中 .lazy 等用法、Vue v2.4中新增的$attrs及$listeners属性的使用、v-once 的使用场景、vue组件里的定时器该如何销毁、vue海量数据优化等
Dormiveglia-flx的博客
08-24 1208
vue面试五一 vue修饰符 中 .lazy .number .trim 的用法二 Vue v2.4中新增的`$attrs`及`$listeners`属性的使用 一 vue修饰符 中 .lazy .number .trim 的用法 1 .lazy 的用法(使双向数据绑定不起作用，且失去焦点的时候，触发@change方法) <template> <div> <div> <input v-model="msg" @change="show"&
Vue进阶——懒加载v-lazy
秋书一叶的博客
10-13 2671
图片懒加载是一种网页性能优化技术，它允许在页面加载时仅加载可见区域内的图像，从而减少初始页面加载时间和网络带宽使用。这意味着图像只会在用户滚动或浏览到它们时才会被加载，而不是在页面一开始就全部加载。Vue.js通常不提供直接的图像懒加载功能，但可以使用一些库和插件来实现图像懒加载。其中，vue-lazyload 是一个常用的Vue.js插件，可以实现懒加载。使用 Composition API 来管理组件的状态。
vue延迟渲染组件_做一个可复用的 echarts-vue 组件（延迟动画加载）
weixin_42114645的博客
02-22 886
在 vue 项目使用 echarts 的场景中，以下三点不容忽视：1. 可视化的数据往往是异步加载的；2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 )，往往会导致该页面的渲染速度很慢并可能在几秒内卡死，产生极差的用户体验。3. 引入 echarts 组件导致编译后的文件过大从而使得首次访问的加载极慢。关于第三点，大家可以参考之前的撰文优化 Vue 项目编译文件大小。以下针对上述前两...
vue 组件懒加载和组件动态引入的区别
09-13
Vue 组件懒加载和组件动态引入是两种不同的概念和用法。 1. 组件懒加载（Lazy Loading）：组件懒加载是指将组件在需要的时候才进行加载，而不是在应用初始化时就加载全部组件。这可以提升应用的初始加载速度，并且减少了不必要的资源消耗。在 Vue 中，可以使用异步组件和路由懒加载来实现组件懒加载。 - 异步组件：可以通过使用 `import()` 函数来动态导入组件，并在组件定义中使用 `component` 配置项来异步加载组件。例如： ```javascript Vue.component('MyComponent', () => import('./MyComponent.vue')) ``` - 路由懒加载：在 Vue Router 中，可以通过配置动态 import 语法来实现路由的懒加载。例如： ```javascript const Foo = () => import('./Foo.vue') const routes = [ { path: '/foo', component: Foo } ] ``` 2. 组件动态引入（Dynamic Import）：组件动态引入是指根据某些条件或事件的触发，在运行时决定是否引入某个组件。与组件懒加载不同的是，组件动态引入更加灵活，可以根据具体的业务逻辑来决定是否引入组件。 在 Vue 中，可以使用动态组件来实现组件的动态引入。动态组件可以通过一个包含组件名的变量或表达式来决定要引入的组件。例如： ```html <template> <div> <component :is="componentName"></component> </div> </template> <script> export default { data() { return { componentName: 'MyComponent' } } } </script> ``` 可以根据实际的需求来修改 `componentName` 的值，从而动态引入不同的组件。 综上所述，组件懒加载是在应用初始化时异步加载组件，而组件动态引入是根据条件或事件的触发，在运行时决定是否引入组件。两者可以根据实际需求灵活地选择使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值