将性能从45分到90分 提升首屏的加载速度
1、路由懒加载
懒加载前提的实现：ES6的动态地加载模块——import()
SPA 项目，一个路由对应一个页面，如果不做处理，项目打包后，会把所有页面打包成一个文件，当用户打开首页时，会一次性加载所有的资源，造成首页加载很慢，降低用户体验
app.js:2500kb->500kb
app.css:360kb->40kb
2、组件懒加载
如果page1.js和page2.js 都引入了组件，那么两个打包后的js 都会有这个组件 使用懒加载，组件会被独立打包成 dialogInfo.js
组件懒加载的使用场景
有时资源拆分的过细也不好，可能会造成浏览器 http 请求的增多
总结出三种适合组件懒加载的场景：
1）该页面的 JS 文件体积大，导致页面打开慢，可以通过组件懒加载进行资源拆分，利用浏览器并行下载资源，提升下载速度（比如首页）
2）该组件不是一进入页面就展示，需要一定条件下才触发（比如弹框组件）
3）该组件复用性高，很多页面都有引入，利用组件懒加载抽离出该组件，一方面可以很好利用缓存，同时也可以减少页面的 JS 文件大小（比如表格组件、图形组件等）
3、骨架屏优化白屏时长
使用插件 fcp从2.8s->0.6s
4、长列表虚拟滚动(大页面场景)
使用插件 总渲染时长从1.4s-》0.3s
5、通过webworker计算大数据(大页面场景)
3万多的数据，需要计算各种差值，平均值， 从14s-》2s
FCP时间在0-1.8秒， 表示良好，颜色为绿色，FCP评分将在75~100分；
FCP时间在1.9-3.0秒， 表示需要改进，颜色为橙色，FCP评分将在50~74分；
FCP时间在3.1秒以上， 表示较差进，颜色为红色，FCP评分将在0~49分。
LCP时间在0-2.5秒， 表示良好，颜色为绿色；
LCP时间在2.6-4.0秒， 表示需要改进，颜色为橙色；
LCP时间在4.1秒以上， 表示较差进，颜色为红色。
