Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。
最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！
非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。
如果你也想知道线上应用的响应时长，也可以监控一下试试，看看效果 Webfunny前端监控和埋点平台
目标
第一期目标：大幅降低项目打包体积，抽离公共模块和插件，利用浏览器缓存机制，提升页面的加载效率。
第二期目标：再次降低项目打包体积，通用功能，样式等高度组件化，提高复用效率；臃肿的插件寻找替代方案。
一、分析Webfunny的代码架构
使用过webfunny的同学应该都知道，为了方便一键部署，应用中心fe、监控系统fe、埋点系统fe三个模块的文件是放在同一个静态服务器下的。应用中心为公共服务，监控系统，埋点系统是独立服务，可以同时运行，也可以独立运行。
所以我们需要抽出三个模块的公共部分，利用浏览器的缓存机制，公共模块只需要加载一次就可以了。
二、分析Webfunny打包体积明细
如果想要优化打包体积，就必须先要知道是哪些文件导致的。可以使用webpack-bundle-analyzer这个可视化插件来快速分析我们包的结构，能快速定位需要优化的地方，对开发者非常友好，功能强大，界面优美，给作者点赞。
加入插件，打包分析效果如下图：