- 62
- 0
背景
有一个迭代了快2年多的vue单页管理系统,基于vue-cli2创建,采用vue2+vue-router+vuex+element-ui1。
因为一些历史以及迭代多次的原因,现在项目内有接近200的页面以及200+的组件,打包后的js因为未做懒加载的缘故,整个app.js 2.7mb, vendor.js 2.1mb
遇到的问题
因为管理系统是企业内部使用,用户量不是很大,对首屏加载需求不高,估加载速度不是很介意。
现在问题是因为企业一些电脑性能不高,导致使用系统时候会感觉浏览器变慢(甲方是这么表达的)
猜想的原因以及设想的解决方案
我理解是不是因为js巨大导致浏览器性能问题(因为我开发机是mac,直接运行的时候加载的开发版本是为压缩版本,未压缩的app.js有40多mb,不过我电脑开发倒是没啥卡顿之类的感觉,因为这个有40多mb,特别大,所以我很怀疑是不是js过大,造成浏览器解析渲染变慢),现打算由单页应用改造为多入口应用,因为系统可以大致上划分为四五个的大模块
不清楚的点
- 首先我想知道js巨大会不会导致性能不高的电脑的浏览器运行变慢,还是说卡顿变慢是代码优化的问题,例如内存泄露之类的(是不是需要直接使用客户的浏览器进行性能分析找原因)
- 如果改造成多页面应用之后会不会减轻浏览器负担(懒加载,或者路由异步加载我知道,不过1是因为甲方暂时没有首屏加载的需求,2是我觉得异步加载应该不会减轻浏览器负担吧,因为用户如果进入的页面多了,还是会加载很多js文件,最终跟单页应该区别不大吧,还是说我理解有误)
希望有相关经验的大佬指点一下
- 共 0 条
- 全部回答
-
烟╰ゝ刺痛了眼伤了心 普通会员 1楼
优化Vue大型项目后台管理系统单页应用性能主要可以从以下几个方面进行:
-
压缩和合并CSS和JavaScript文件:可以通过使用像Gzip或UglifyJS这样的工具来压缩和合并CSS和JavaScript文件,从而减少文件大小,提高加载速度。
-
使用CDN:CDN(内容分发网络)可以将静态资源(如CSS、JavaScript和图片)托管在离用户最近的服务器上,从而提高加载速度。
-
优化图片和视频:通过使用适当的图片格式(如JPEG和PNG)和视频压缩格式(如WebM和MP4)来减少图片和视频的大小,从而提高加载速度。
-
使用懒加载:懒加载是一种技术,它会在用户滚动到页面底部时才加载需要的页面内容。这可以避免在用户滚动页面时加载所有内容,从而提高页面加载速度。
-
使用响应式设计:响应式设计可以使网站在不同设备上(如桌面电脑、平板电脑和手机)都能正常工作,从而提高用户体验。
-
使用预加载:预加载可以将一些页面的CSS和JavaScript文件加载到页面中,当用户滚动页面时,这些文件可以立即加载,从而提高页面加载速度。
-
使用服务器端优化:服务器端优化,如缓存和减少数据库查询,也可以提高页面加载速度。
-
减少HTTP请求:减少HTTP请求可以减少页面加载时间。这可以通过合并文件、使用CSS Sprites和减少HTTP请求的数量来实现。
-
使用负载均衡:负载均衡可以将流量分发到多个服务器上,从而减少单个服务器的压力,提高性能。
-
优化数据库查询:优化数据库查询可以减少数据库查询的时间,从而提高页面加载速度。
以上只是一些基本的优化策略,具体的优化策略需要根据项目的具体情况进行调整。
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

