vue页面过多导致加载过慢问题优化

最新推荐文章于 2024-05-22 18:58:54 发布
最新推荐文章于 2024-05-22 18:58:54 发布
阅读量3.8k 收藏 8
点赞数 1
分类专栏： 代码优化 vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30823677/article/details/108343410
版权

最近解决一个困扰已久的问题，就是随着我们项目vue页面的增多，代码改动重新刷新页面会卡顿很久，经过排查发现是之前vue的按需加载插件dynamic-import-node配置有问题，在最开始搭框架的时候由于页面少没有发现。
以下附上dynamic-import-node插件的引入方式
1.npm install babel-plugin-dynamic-import-node
或者 cnpm install babel-plugin-dynamic-import-node
（个人比较喜欢用cnpm，下载快的飞起）
2.下载成功后修改项目根目录中的.babelrc文件（红框的位置添加dynamic-import-node）在这里插入图片描述

程序博
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue加载数据量过多页面卡顿问题（不看会后悔）
蜗牛~~
08-11 6936
插件分享： https://xuliangzhan_admin.gitee.io/vxe-table/#/table/scroll/scroll
解决vue项目router切换太慢问题
10-15
除了页面组件和数据处理外，另一个可能导致Vue Router切换慢的问题是路由懒加载。在大型项目中，如果路由懒加载的链接过多，会导致本地开发时的热更新变得非常缓慢。为解决这一问题，可以创建两个路由导入文件，分别...
网页dom元素过多为什么会导致页面卡顿
前端361
06-05 1万+
在做移动端或者其他无限下拉加载时会遇到不断插入dom的场景，随着dom的增多页面会出现卡顿，遇到这种情况开发者会采取一系列的优化措施，比如复用dom等，那么到底为什么会出现卡顿呢？本文将探讨这个疑问。 网页卡顿，那肯定是渲染延迟或者cpu占用过高。 看下面一个实例： ...
Performance选项卡笔记以及分析vue页面卡顿
最新发布
一介码农
05-22 415
该段代码主要是实现一个拖拽div进入一个vue-grid-layout区域，那么我猜测是因为drag事件触发频率太高所导致，所以在触发的事件加上一个。从该调用树可以看到大概是因为事件高频触发导致数据变更引起响应式数据进行多次的渲染，引起了卡顿现象。绿色是正常的，黄色是表示这一帧本来应该渲染的，但是没有得到完整的渲染。可以选择时间区域进一步方法分析的时间段，从而分析更详细的信息。由此可见本次分析主要导致卡顿的原因是因为js的执行所导致的。最上方红框区域内出现红色块的代表该时间段帧率不足60帧。
vue项目优化方案（性能，包体积，页面加载速度等）
东扯葫芦西扯瓜——前端小菜鸟的博客
06-13 861
vue项目优化方案（性能，包体积，页面加载速度等） 项目优化，是一个老生常谈的问题。这里简单总结一下相关方法： 1.代码优化，代码模块化，组件分离复用，工具函数抽离，注意代码精简，v-for渲染加上key属性，for循环注意break等。 2.路由懒加载。单页应用把渲染内容都放在js里面，下载到本地，然后渲染，如果不使用懒加载，那页面第一次加载时下载的文件会比较大，首屏加载会比较慢。使用懒加载后，生产环境下使用webpack分割打包代码，除了公用的js部分，路由组件js代码只会在该页面加载时才从服务器获取。
vue多页面热更新等待时间长解决方案
weixin_30347335的博客
07-03 1211
1、使用html-webpack-plugin-for-multihtml组件。 在build - webpack.dev.conf.js文件中： 　　const HtmlWebpackPlugin = require('html-webpack-plugin') 　　替换为 　　const HtmlWebpackPlugin = require('html-webpack...
一行代码解决vue数据量大卡顿问题
weixin_44775548的博客
09-29 1万+
最近遇到一个需求，需要在地图上显示某地区的路网线路，结果后端直接返回了3w多条数据，每条线路下坐标点接近100个，这四舍五入就是300w的数据啊。而且还不能分层级显示，只能一次性显示全部打点，没办法，硬着头皮放到地图上吧。 开发完成，打开网页，拖动地图，偶尔出现了卡顿的情况，但是，上线吧，能用就行 3天后 产品经理：诶，这数据怎么不会变啊，你加个轮询定时请求吧，还有地图能不能有点动态效果，隔一段时间随机定位到某个地点吧，然后地图打点点击要有详细数据的弹窗 打工人：… 加上轮询，打开网页，拖动地图，出现了明显
vue路由跳转卡顿解决办法--检查是否有video标签
大赚万万亿
06-19 4145
ios微信中,用innerHTML载入video标签后,可以用play()方法 而用ios微信中,用vue的动态组件功能,载入带video的标签,首次无法用play()播放 如果从a路由跳转到b路由卡顿,那么看看b路由里的组件是否有video标签 vue路由跳转卡顿,看看是否有video标签 ...
详解vue页面首次加载缓慢原因及解决方案
12-13
第一次打包vue的项目部署到服务器下时，发现初次加载特别的缓慢，将近20s页面才加载出来，完全没有开发环境上的那么流畅。主要原因是页面在打包后如果不进行相关配置会导致资源文件特别的大，一次想要全部加载完成会...
antd的select下拉框因为数据量太大造成卡顿的解决方式
01-22
想要优化肯定要知道为什么会卡，初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿，于是想要不卡只能限制渲染的数据数量。 我的想法是这样的：任何时候都只渲染前100条数据以保证不卡顿，然后当需要搜索...
jsf在实际 B/S 系统开发中的问题
03-01
2. **性能**：JSF默认的工作方式是全页面刷新，这可能导致页面加载较慢，尤其是在处理大量数据或复杂交互时。优化页面渲染和减少不必要的请求是解决此问题的关键。 3. **内存消耗**：JSF使用组件树来维护页面状态，...
浅谈vue加载优化策略
12-07
vue.js是一个比较流行的前端框架，与react.js、angular.js相比来说，vue.js入手曲线更加流畅，不管掌握多少都可以快速上手。但是单页面应用也都有其弊病，有时候首屏加载慢的让人捏舌。今天我们以vue cli3.x来说一说如何行之有效的缓解此问题！ 方法一 路由懒加载 首屏加载慢的原因无非就是单页面应用需要加载完整个路由表上的页面，而路由懒加载就是来解决这个问题的。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。下面这个就是vue路由懒加载的一个具体例子。方法很简单，如果您不想深入了解，只需按照这个格式引入路由就可以了
69.（leaflet篇）leaflet大量上图（10万个点）（canvas技术）.zip
02-11
然而，当需要在地图上显示大量标记或点时，传统的SVG或图像标记方式可能会导致性能瓶颈，因为每个标记都是独立的DOM元素，过多的元素会拖慢页面的渲染速度。 这就是Canvas发挥作用的地方。Canvas是一个画布元素，...
vue 手机打开缓慢网页但电脑打开速度正常的BUG
weixin_45271385的博客
10-30 906
<template> <div id="app"> <keep-alive include="FAQ"> <router-view></router-view> </keep-alive> </div> </template>``` 使用路由后是否在app.vue中使用了 <router-view></router-view> 2 查看组件是否按需引
【vue项目性能优化，优化项目加载慢的问题 - 】
u012632105的博客
02-14 311
vue项目性能优化，优化项目加载慢的问题 - 逍遥云天 - 博客园
解决vue项目首页加载过慢的情况
热门推荐
这是我的博客
11-16 1万+
什么导致了首页初步加载过慢 请看下面一张图就清楚了 即app.js文件过大导致的。。。 如何来处理 vue-route 懒加载 component： resolve =&gt; require([''],resolve) 在webpack打包的过程中，将多余文件去掉，如map文件 即在config/index.js中将productionSourceMap的值修改为false，就可以在编译...
解决小程序多层循环导致页面加载缓慢问题
沉默的小猴子的博客
12-18 2094
小程序多层循环嵌套导致加载慢 使用循环的时候有的需要多次循环列表找到最终需要的数据，但是会导致接口以及页面加载缓慢，此时建议将循环单独取出，并发触发循环，而不是循环完一个再循环下一个 正确实例 let obj = this.data.myDefaultCar; let setId = ''; let arry1 = []; let arry2 = []; ...
vue项目首次打开加载速度慢的优化方案
xiasohuai的博客
06-18 1万+
一、路由懒加载（必须的） ️vue-cli 3.0 模式就使用了Babel，我们需要添加syntax-dynamic-import插件，才能使 Babel 可以正确地解析语法。 // 安装插件 syntax-dynamic-import cnpm install --save-dev @babel/plugin-syntax-dynamic-import // 修改babel.config.js module.exports = { "presets": [ "@vue/app" ..
前端的路由跳转卡顿问题，进页面后点击其他路由，会卡顿一会才跳转
Ryky_Li的博客
03-23 6755
前端路由跳转卡顿问题，进页面后点击其他路由，会卡顿一会才跳转，控制台没有报错，网络在卡顿的时候也没有发请求，使用的是vue，项目是后台管理系统，react应该也有
vue解决页面加载过慢
05-18
页面加载过慢可能是由于以下原因导致的： 1. 图片过多或过大，导致页面加载缓慢； 2. 代码未压缩或合并，导致文件大小过大，加载速度变慢； 3. 后端数据返回过慢，导致页面渲染缓慢； 4. 使用了复杂的 CSS 或 JS 动画效果，导致页面渲染缓慢； 5. 网络延迟或带宽不足。 针对以上问题，可以采取以下措施来优化页面加载速度： 1. 对图片进行压缩，尽量避免使用过多或过大的图片； 2. 对代码进行压缩和合并，减少文件大小； 3. 使用缓存技术，如 CDN、浏览器缓存等，加快页面加载速度； 4. 对后端接口进行优化，减少请求次数和请求数据量； 5. 减少使用复杂的 CSS 或 JS 动画效果，或者使用 CSS3 动画代替 JS 动画； 6. 使用懒加载技术，只加载当前可见区域的内容，避免一次性加载过多内容； 7. 使用 Webpack 等构建工具进行代码打包和优化，减少文件大小和加载时间。 以上措施可以帮助优化页面加载速度，提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值