1、背景
有好几个童鞋跟我反馈，你测试平台在线 demo 加载好慢啊
慢确实是慢，但这事情不能赖我呀，肯定是腾讯云的锅。
腾讯云 8m 带宽的服务器，可是我斥巨资购入的呀
这可是价值 5040 元的服务器啊！（虽然实付只是 198😝）
好家伙，续费的时候，加了这个峰值带宽是啥意思？那我现在的带宽是不是 8M？我还真测了一下
腾讯云大佬如果看到了，别打我，我不是黑腾讯云，只是想引起你们的注意（万一把我招进去了呢）
算了，算了。这个锅还是我自己来背
2、为什么慢？
打开 Chrome 开发者工具，一看（chuck-xxx.js 忽略，是我自己安装 Chrome 插件的 js）
vendor.xxxx.js 是啥，为啥这么大？
问一下 ChatGPT
哦，原来是第三方依赖啊，那到底依赖了啥
通过webpack-bundle-analyzer分析，可以看到monaco-editor这个模块占大头，超过 1/3 了!
然而在项目中，只有一个地方用到，这太不合理，要干掉！
3、优化方案
monaco-editor很强，很优秀（你是个好人，但我们不合适）
既然monaco-editor很大，但编辑器还是得有，那用啥来代替呢？
那还是继续问一下 ChatGPT
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 首页加载速度
可以通过下面两个地址实测
账号密码
test
test2020
5、总结
引用一句 Facebook(现在 Meta) 著名的口号和价值观
"Done is better than perfect"（完成比完美更好)
目前项目完成度比较高了（仅限接口层面）
性能方面做一些调整还是必要的
Karaser
回复
怎么说，达到相同的效果，但是资源占用降低了。算不算优化呢？
这个问题也有童鞋提过，但我个人觉得算是优化。
当然这不是那么的高大上，比如用 rust 重写啥 js 组件之类的。
虽然问 gpt 还挺有意思的，但是换了个工具也叫优化嘛
思路挺不错，每个步骤也很清晰，感谢分享
但恕我直言，标题 13 倍这个数据，有点太标题党了。。。这个优化主要是 js 瘦身了 0.4mb 左右，实际加载时间上提升应该不大明显。建议标题还是严谨一些吧。
是不是应该要加一些 sdk 采集加载速度情况，针对加载速度慢的瓶颈点进行优化，更容易出效果？比如 js 由于上行带宽限制导致人多时慢，是不是更适合上 cdn，或者拆分 + 按需加载来解决？
教科书般的优化示例。
0x7C00
回复
感谢回复，后续试试增加 compression-webpack-plugin
目前 Nginx 已经加了，gzip 不然真的太慢
这个配置是参考别人的，用下来效果提升是比较明显
刚好之前也遇到过前端加载非常慢问题，经过优化也有几倍提升，也在此一同分享下。
- 如果 js 过大，而又必须使用，可以考虑异步。 vue3 中对于组件的导入可以使用 defineAsycComponent(() => import('@/components/xxx'))
- 如果是 nginx 代理，可以考虑开启以下配置：
# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 16 64k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.1;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 3;
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
同时项目中配置
vue.config.js
const CompressionWebpackPlugin = require('compression-webpack-plugin');
// 定义压缩文件类型
const productionGzipExtensions = ['js', 'css']
留下个疑问，之前前端项目在 vue2 的时候访问特别慢，链接路径也打不开，后面升级到 vue3，再经过以上优化快很多，不是专业前端开发，所以也搞不懂是不是 vue2 自己使用的姿势不对？
作为菜鸡的我表示，长见识了。
很有用哦
优秀~
如果你有更多的前端知识，欢迎留言一起沟通哦