总所周知-gui打包引用的第三方库文件多且大 , 并且我们还使用的第三方库的使用方式(npm link , 把生成的build当作第三方组件使用) , 导致首次加载的main.chunk很大 。
历程
我刚来项目组的时候 , 用的cdn加速的方法 , 但是需要花钱而且还是根本上避免不了这个问题 。
前期快速开发也没有在意这方面问题 , 先打开zip压缩 , 但是也有大约5M的大小 , 如果带宽不是很大的话也需要7~8s的加载时间 。
因为需要移动端的预览页面 , 所以抽时间把-gui克隆了一份 , 尝试着把一些没用的依赖删除了 。
预览只需要绘制方面的内容 , block类、语言包等就没什么意义了 。组件文件其实并不大 , 可删可不删 。删完后大小差不多2.3M左右(zip压缩后 , 多余依赖没有完全删除) 。
开发带了阶段尾声 , 准备好好搞搞性能优化部分 。
还是在第三方依赖方面下手(使用--可以清晰的看到打包后的chunk大小)
文章插图
图中可以看出最大的两个依赖(也是最需要优化) , 一个是的虚拟机-vm , 另外一个就是语言包了 。一听虚拟机 , 可能有的人就觉得很难搞了 , 其实最两个文件最难处理不是因为代码逻辑 , 而且静态文件 。
【记录一次scratch-gui的“打包瘦身”方法】-l10很大 , 是因为有很多的语言包也就是json文件 。其实大多的语言都没有用的 , 如果不搞国际版只留个英文和简体中文的就可以 , 多余的json文件删了就行 。注意删除的时候把js逻辑也改一下 , 因为有的采用的遍历 , 如果获取不到json可能会报错 。
-vm很大 , 是因为有音乐扩展里面的一些音频文件包含在了里面 。首次加载的时候 , 这个静态音频会一块加载 。处理方法对应的也很简单 , 就是改成ajax加载就可以了 , 当展示音乐扩展的时候再调用 。(更改教程如下)
(更改音频文件的引用路径未当前服务器路径 eg:http:127.0.0.0///drums/****.mp3)
文章插图
(更改加载音频的方法为ajax请求) tip:不要同步求情 , 同步求情不能设置
(使用async await将异步请求改为同步 , 这样音频才能成功加载 , 否则音频数组中一直为空)
优化后的打包体积分布
打包后的开启zip压缩 , 足足小了一半体积(压缩) , 2.5M如果带宽较小的话3s左右打开还是能接收的 , 块的话1~2s算正常了 。如果移动端的预览库把-vm音频部分也这么拆出去的话 , 估计也就1M左右 。这算叫正常的大小了 。其实其他有些库也是能拆的 , 但是这两个算重点 。
文章中多次说明了ZIP压缩后的体积 , 因为有些库文件实在太大了 , 打包压缩后大小依旧很大 , zip压缩是一定要开的 。
有关-gui打包瘦身暂时就这些了 , 前段时间还把动态素材库、护眼模式等功能添加完成 。有时间的话会写个修改记录 。最近在研究 , 更新不一样很快 , 有问题或具体修改的可以加Q:询问 。
- openpnp - 设备矫正的零碎记录
- 记录一下安装多版本CUDA,和pytorch过程
- 王道的操作系统 专业课错题记录
- BUUCTF_Web题目题解记录1
- Android移动开发第一次作业
- stm32为例 堆栈记录
- 华为mate40pro是鸿蒙,这一次再见了!华为Mate40Pro:对不起
- STM32F1+SSD1963+4
- 记录 python-tkinter包利用tkinter.font设置文本框字体
- 新版pyecharts------3D地图结合热力图的一次探索