前端的优化主要分为两部分，页面性能和构建速度，今天我们主要讲的是页面性能的优化
想要优化，需要先了解到一些指标，才能知道哪里需要优化，优化到什么水平才行。另外，优化千万不要过早优化。
但是，了解指标之前我们先来回顾下Chrome关键渲染路径 ，有助于我们更好的理解指标
具体一些参数可以看网站性能衡量标准,也可以从另一维度理解关键性能指标
了解完后，我们使用Lighthouse，来获取相关数据
lighthouse --locale=zh http://mithras-test.zswl.cn:8888/workbench --view --emulated-form-factor=desktop // 桌面端
通常来说，前端的性能分析可以从时间和空间两个角度来进行。
- 时间：常见耗时，如页面加载耗时、渲染耗时、网络耗时、脚本执行耗时等。
- 空间：资源占用，包括 CPU 占用、内存占用、本地缓存占用等。
具体优化
资源大小优化
- 减少 echarts 包的大小
// 避免全量引入
import * as echarts from "echarts";
// 按需引入
import "echarts/lib/chart/line";因为现在默认打成 dll 包， 默认引入了 echarts.min.js
- 类似 moment、dayjs 只用一个和去掉 locale
- 压缩首页图片，通常使用
tinypng
升级成 HTTP 2
内部做了已经做了的优化
大部分可以根据前端性能优化中，一一对应寻找过去
路由懒加载
已经做了 ，也包了
HTTP 缓存
index.html 不缓存，其他资源走协商缓存
文件大小和分包
大部分都在 Webpack 优化中