前言：年底将至公司所提出技术需求（在老代码基础上进行优化），兄弟们一起刷刷KPI!
一.数据分析
1.lighthouse工具
由lightouse工具分析本地预览环境得出总体跑分51
- FCP：首次内容绘制时间4.6s
- LCP：最大内容绘制10.6s
- TBT：从FCP到可交互时间TTI之间总阻塞时长170ms
- CLS：从页面开始加载到其生命周期状态更改为隐藏期间发生的所有意外布局偏移的累计得分0.002
2.Performance工具
由Performance工具分析出脚本密集执行时段
- app：主入口文件执行时间较长
- vendor：公共包提取文件过大
3.Network工具
根据Network工具找出执行时间较长和体积过大的文件进行分析
- app：所有类型的翻译文件同步加载，主入口文件导入不规范
- vendor：公共包代码分割情况不理想，是否可以考虑将当前页无关包进行分离
- asyncVendor：异步导入包依赖项在当前首页无需加载可剔除
二.优化内容
1.产物分包
根据webpack工具包优化内容
- 抽离首屏加载无关包如three.js、locale、echarts等。
- 目前本地翻译文件默认体积过大并且在首屏加载时会全局引入，按需加载当前环境的翻译文件即可。
- vxeUI只用到表格以及部分组件移除其他无用组件功能，由于elementUI组件使用频繁（暂不做按需导入）
- 剔除频繁导入的库减少主入口体积
2.治理入口文件
3.前后包对比分析
- 主入口文件由3.18 MB ****减小至1.32 MB
- 公共库包由3.56 MB ****减小至1.09MB
4.补充
-
CDN加速优化（由于公司项目在全球不同地区部署，使用CDN加载公共包可能会适得其反）
-
代码压缩、路由懒加载（当前项目已包含）
-
gzip压缩传输（公司运营已处理）
-
prefetch、Preload、defer等
-
一些静态资源的压缩与优化
-
用户层面优化加载等待loading效果or骨架屏
三.性能指标对比
1.预览环境
使用本地node启动服务测试预览环境对比分析
1-1 优化前
1-2 优化后
- 根据performance工具分析首屏加载时间694.83ms 缩减至 255.16ms
- 根据lighthouse工具显示各项指标均缩减50%
2.线上dev环境
使用本地网络测试线上dev环境对比分析
2-1 优化前
2-2 优化后
3.工具测试dev环境
借助开源工具模拟不同地点以及无缓存情况下分析
3-1 预设测试值
- 模拟地点北京
- 以谷歌浏览器与屏幕大小1920x1080进行测试
- 测试次数三次
