前端性能优化(提升13倍)

1、背景

有好几个童鞋跟我反馈,你测试平台在线demo加载好慢啊

慢确实是慢,但这事情不能赖我呀,肯定是腾讯云的锅。

腾讯云8m带宽的服务器,可是我斥巨资购入的呀

image-20230426203251930 image-20230426203746466

这可是价值5040元的服务器啊!(虽然实付只是198😝)

image-20230426204038997

好家伙,续费的时候,加了这个峰值带宽是啥意思?那我现在的带宽是不是8M?我还真测了一下

image-20230426205126674

腾讯云大佬如果看到了,别打我,我不是黑腾讯云,只是想引起你们的注意(万一把我招进去了呢)

算了,算了。这个锅还是我自己来背

2、为什么慢?

打开Chrome开发者工具,一看(chuck-xxx.js忽略,是我自己安装Chrome插件的js)

在这里插入图片描述

vendor.xxxx.js是啥,为啥这么大?

问一下ChatGPT

image-20230426205956156

哦,原来是第三方依赖啊,那到底依赖了啥

通过webpack-bundle-analyzer分析,可以看到monaco-editor这个模块占大头,超过1/3了!

然而在项目中,只有一个地方用到,这太不合理,要干掉!

在这里插入图片描述

3、优化方案

monaco-editor很强,很优秀(你是个好人,但我们不合适)

既然monaco-editor很大,但编辑器还是得有,那用啥来代替呢?

那还是继续问一下ChatGPT

image-20230426210639860

3.1 CodeMirror方案

CodeMirror这个是比较出名的,在虾皮的时候,看前端同学也是用了这个。

那就先用这个是试试。

哦豁,这东西默认安装是vue3版本,然而当前项目是vue2

降低版本到适配vue2的版本

结果问题又来,这玩意默认高度是300px,真的坑,初始化的配置还不能直接设置高度

一顿操作后,菜鸡如我,并没有解决这个问题,暂时放弃

在这里插入图片描述

3.2 Ace方案

所幸CodeMirror翻车后,还有plan B,那就Ace,看ChatGPT的回答,应该更加符合这次的需求

那就选它了!

用Ace替换掉Monaco之后

看看webpack-bundle-analyzer,app.js从15.82MB降低到了10.19MB,降低5.63MB

前面看到的Monaco是6.1MB,算下来Ace就是0.47MB,Monaco是Ace的12.98倍(标题有了)!

在这里插入图片描述

4、收益

4.1 打包容量

打包整体的容量减少了14M!

在这里插入图片描述

4.2 打包速度

打包时间缩短约36s,相当可观呀!

在这里插入图片描述

4.3 首页加载容量

减少了0.4MB,看着不算很大?不行,我就想吹一下
在这里插入图片描述

4.4 首页加载速度

可以通过下面两个地址实测

CloudFlare CDN访问

腾讯云访问

5、总结

引用一句Facebook(现在Meta)著名的口号和价值观

“Done is better than perfect”(完成比完美更好)

目前项目完成度比较高了(仅限接口层面)

性能方面做一些调整还是必要的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/12599.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(亲试有效)如何完美更换WordPress网站的域名

前几天,一位WordPress王牌主机的用户问我,他的WordPress网站已经建立一年多了,现在想要修改网站使用的域名,该如何操作?这是WordPress用户经常遇到的问题。今天我们来给大家介绍一下,如何更换WordPress网站…

ChatGPT 如何用?12个场景的 Prompts 万能话术模板 四个提问技巧

“AI 不会取代人,只会淘汰不会使用AI的人。” 01 — 昨天的《AI启航实用变现手册》发出去后,有朋友问怎么用 ChatGPT 解决我的问题呢?遇到的场景是这样的:‍‍‍‍‍‍‍‍‍‍ “教育机构,老学员8月份续费活动都有哪些…

ChatGPT Plus停售!地球已经没有足够的算力来满足需求了

杨净 发自 凹非寺量子位 | 公众号 QbitAI 刚续费不到2周的账号,现在登录不上了去了。了解一圈后发现,GPT Plus都停售了,GPT 4.0 太消耗算力,不知道是真是假,或另有隐情! 网络上众说风云,比如&am…

8个升级到ChatGPT Plus的理由,不升级你就out了

​关注文章下方公众号,可免费获取AIGC最新学习资料 导读:ChatGPT Plus 是 OpenAI 聊天机器人的高级付费版本。以每月 20 美元的价格,该服务为您提供访问 GPT-4,您可以享有令人难以置信的稳定性和更快的响应时间。 本文字数&#…

ChatGPT与Claude对比分析

一 简介 1、ChatGPT: 访问地址:https://chat.openai.com/ 由OpenAI研发,2022年11月发布。基于 transformer 结构的大规模语言模型,包含1750亿参数。训练数据集主要是网页文本,聚焦于流畅的对话交互。对话风格友好,回复通顺灵活,富有创造性。存在一定的安全性问题,可…

小提琴 吉他 二胡 钢琴曲谱智能应用开发 五线谱 六线谱 四线谱简谱播放识别SDK

智域智联科技致力于用“智能化教学 音乐软件模块”及“在线教育AiScore 平台”赋能传统音乐教育,使音乐教 育机构智能化教育转型成为可能。 AifbdScore是一个跨平台的声音识别和评 测库,运用人工智能深度学习算法采集各 种乐器不同音高的时域、频域特征训…

【收集】键盘钢琴 和弦琴谱 (带HTML版开发流程)

目录 键盘钢琴开发 《御剑江湖》 《星之所在》 《童话》 《一直很安静》 《雨的印记》 《天空之城》 《苍海一声笑》 《卡农》 《Tifa Theme》(under construction) 键盘钢琴开发 烦闷中,何以解忧?听君一曲,莫问秋…… 顺着找到的V…

基于 Python 的音乐流派分类

音乐就像一面镜子,它可以告诉人们很多关于你是谁,你关心什么,不管你喜欢与否。我们喜欢说“you are what you stream” - Spotify Spotify 拥有 260 亿美元的净资产,是如今很受欢迎的音乐流媒体平台。它目前在其数据库中拥有数百万…

语谱图(二) Spectrogram 的产生

1. 信号预处理部分 预处理部分中 包括 预加重分帧加窗 ; 1.1 读取音频数据 python可以用librosa库来读取音频文件,但是对于MP3文件,它会自动调用audio_read函数,所以如果是MP3文件,务必保证将ffmpeg.exe的路径添加…

一网打尽,音乐高手都在使用的打谱软件不藏私推荐

一网打尽,音乐高手都在使用的打谱软件不藏私推荐 关键词:打谱软件,Guitar Pro,Overture,Sibelius,Finale Guitar Pro:sourl.cn/KsuXZz Overture:sourl.cn/VsYZ3y Sibelius:sourl.cn/2fyfZt 学音乐的大家都知道&am…

WaveTone 2.67原创汉化版扒谱辅助教程

深度解析音频结构 精准扒谱,扒和弦分析! WaveTone 是音频后期制作,深度学习编曲的好助手! 汉化版支持中英文自由切换,重启应用程序生效! 支持导出主流音频Wav格式和MIDI键盘记录文件!可以在…

【Musescore 】开源打谱软件 快速入门笔记

前两天做了个西贝柳斯的打谱软件学习笔记,反正都是初学,今天再来学习一款同类软件,比较之后确定一款深入学习。 西贝柳斯的学习笔记在此:https://blog.csdn.net/yuetaope/article/details/120020342 西贝柳斯是商业收费软件&#…

Guitar Pro8.1专业版新功能简谱介绍

Guitarpro 8.1版本中,已成功推出全新的简谱功能!Guitar Pro是一款非常流行的音乐制谱软件,它支持各种乐器的制谱。在思杰马克丁引入这款软件之后,为它专门定制了中文版,并针对中国用户重新定价。GuitarPro经过5年研发&…

吉他谱软件guitar pro2023吉他和弦、六线谱、BASS四线谱绘制

Guitar Pro由法国Arobas Music出品,主要用于管弦乐器的学习,通过建立不同的音轨,可完成不同乐器乐谱的编排制作。Guitar Pro发布23余年来,其强大的功能被广泛应用于专业乐队的创作和排练,其独创的gtp文档格式在专业领域…

谷歌推出全能扒谱AI:只要听一遍歌曲,钢琴小提琴的乐谱全有了

晓查 发自 凹非寺量子位 报道 | 公众号 QbitAI 听一遍曲子,就能知道乐谱,还能马上演奏,而且还掌握“十八般乐器”,钢琴、小提琴、吉他等都不在话下。 这就不是人类音乐大师,而是谷歌推出的“多任务多音轨”音乐转音符模…

Google Bard vs ChatGPT:哪一个更适合创造富有创造性的文学作品?

1、Google Bard,ChatGPT特点、用途、性能和应用场景等方面的讨论 首先,我们来看看Google Bard和ChatGPT的特点。 Google Bard是一种基于AI的诗歌生成器,使用了深度学习技术和自然语言处理技术,旨在创造富有想象力和具有感情的文学…

阿里正式加入ChatGPT战局,“通义千问”上线后表现如何?

ChatGPT发布后,数月间全世界都对AI的能力有了新的认知。 ChatGPT掀起的战局,现在又多了一位选手了! 阿里版类ChatGPT突然官宣正式对外开放企业邀测,由达摩院开发,名为“通义千问” 顾名思义,阿里正式加入Ch…

阿里版ChatGPT——通义千问,开箱初体验

所有行业、所有应用、所有服务都值得基于新型人工智能技术重做一遍,在带来创造性客户体验的同时,生产范式、工作范式、生活范式也将发生变化。——阿里集团董事会主席兼CEO 张勇 2023阿里云峰会上,通义千问大语言模型对外发布,宣称…

活动报名 | 生命科学中的生成式人工智能:如何搭建生命科学的“ChatGPT”

活动议程 日期:3月10日(周五) 时间 主题19:30-19:35开场简介兰艳艳 清华大学教授,青源会会员19:35-20:20Generative Biology: Towards Building the “ChatGPT” in Biology唐建 Mila - Quebec AI Institute助理教授,青…

刚刚,ChatGPT王炸更新!解封了...

推荐阅读: 《太夸张了。。。》 《反击 ChatGPT,谷歌正式推出 Bard!结果..》 1 插件上线 大家知道虽然ChatGPT很厉害,但是你向它了解最近两年的内容,它都会回复不支持。 什么原因呢? 因为ChatGPT模型训练&am…