记一次缩小H5打包体积的心路历程

某年某月某日,被上头通知项目体积太大了,每次发布都要十几分钟,影响用户使用,要赶紧优化一下。
作为一个合格的打工人,那必须服从命令呀,话说,体积太大是指这个么?



好像每次都有看到,都没理过它,之前不都能发么......
没办法呀,还是改吧,开始询问度娘。
emmm......
找到都是调入口文件的最大值,这不是掩耳盗铃吗?



换个关键词吧,打包体积太大怎么办?查来查去好像就那几种?
1.分包
我这包里也没有多少页面啊,好像意义不大?总感觉分了也是无用功

2.小程序的运行时压缩
可惜了,我是H5
3.静态资源放服务器
不会有人不放服务器里吧......
4.开启摇树
已经开了,已经开了,还是那么大,感觉没用呢?
5.gzip压缩
可我不是cli创建的项目,npm什么的,不会弄啊,也不是没试过,得到的结果就是项目结构一团糟,还好我有备份。连带webpack-bundle-analyzer也不能用,根本没法分析项目哪里大啊!!!

愁......
每天都在度娘里大海捞针,真的痛苦,把能试的都试一遍了。终于!让我找到了一个有用的!!!
https://blog.csdn.net/zhangdaren/article/details/121396740
必须感谢这位老哥,毫不吝啬的给你一个赞!

总算找到体积大的罪魁祸首之一了,把那些css注释掉一下从336kb掉到297kb,感动。


行,那我知道了,跟样式有关系,那就逮着项目里的样式薅吧!

看了一下App.vue,对着引用的样式陷入了沉思,原来我有那么多引用吗......


不得了不得了,这都是插件的样式啊,能删吗?
理一理,项目就三个插件
1.uni
官方的,删了一下,就掉4kb,没必要没必要
2.uview
整个项目都有用,删了common.scss里多余的就是极限了吧,不能再删了,删了就完了
3.colorui
好像只有主页和几个查询页面用了,删了一下,从297kb直降到216kb,好家伙,必改的呀。



罪魁祸首2也给我找到了,不找了不找了,小于244kb了,先凑合用吧!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容