React + Antd + Wepack 项目体积优化记录(一期)

一步一个脚印一个坑 27天前 ⋅ 193 阅读
ad

Hello,大家好,欢迎使用Webfunny前端监控和埋点平台。

最近,开始有一些小伙伴向我们反馈,webfunny页面加载速度比较慢,且偶尔会出现页面崩溃的情况。刚开始我是不大相信的,因为在我的电脑上访问,感觉都是很正常的,直到我把浏览器文件的压缩对比打开后,才发现:经过这么长时间的功能迭代,前端项目打包的体积已经变得如此臃肿了!!!

非常惭愧,是我们疏忽了!接下来我们将对Webfunny进行两期的体积优化,争取能够给大家一个更好的使用体验。

如果你也想知道线上应用的响应时长,也可以监控一下试试,看看效果 Webfunny前端监控和埋点平台

目标

第一期目标:大幅降低项目打包体积,抽离公共模块和插件,利用浏览器缓存机制,提升页面的加载效率。

第二期目标:再次降低项目打包体积,通用功能,样式等高度组件化,提高复用效率;臃肿的插件寻找替代方案。

一、分析Webfunny的代码架构

使用过webfunny的同学应该都知道,为了方便一键部署,应用中心fe、监控系统fe、埋点系统fe三个模块的文件是放在同一个静态服务器下的。应用中心为公共服务,监控系统,埋点系统是独立服务,可以同时运行,也可以独立运行。

所以我们需要抽出三个模块的公共部分,利用浏览器的缓存机制,公共模块只需要加载一次就可以了。

 

二、分析Webfunny打包体积明细

如果想要优化打包体积,就必须先要知道是哪些文件导致的。可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构,能快速定位需要优化的地方,对开发者非常友好,功能强大,界面优美,给作者点赞。

加入插件,打包分析效果如下图: