首屏耗时优化的一些方法前段时间在做业务首屏耗时优化的技术需求，目标是将首屏耗时降至1200ms以下。过程中用到了一些方法

前段时间在做业务首屏耗时优化的技术需求，目标是将首屏耗时降至1200ms以下。过程中用到了一些方法，这里来总结一下在优化时使用到的一些方法：

如果首屏加载时有请求时，首屏渲染可能需要等待请求完成，那么请求耗时将会影响首屏耗时。

解决方法：将首屏的请求改成直出时请求，多个请求的改为并行（Promise.all）。

预计每个请求耗时可减少100ms左右。

如果在直出页面时发现首屏耗时大大高于内容解析结束的时间，那么可以考虑是不是首屏渲染结束后，又发生了dom变化，如：元素位置偏移、新元素显示。

可以看下首屏元素是否用了v-if、v-model，且控制的参数在首屏加载过程中发生了变化。

使用v-if代替 v-show，减少首屏渲染dom数量（除非是一些会频繁变换显隐的元素还是使用v-show）

包括路由懒加载和组件懒加载

1.4.1 路由懒加载

{
    path: '/login',
    component: () => import('@aicc/components/login/index'),
}

1.4.2 组件懒加载

不直接显示的组件做懒加载，减少完成首屏渲染时需加载的代码量

优化前：

 import pageComponent from './pageComponent'

 export default {
   name: 'Recharge',
   components: {
     pageComponent,
   },
 ...

优化后：

export default {
   name: 'Recharge',
   components: {
     pageComponent: () => import('./pageComponent'),
   },
 ...

（这个方法从结果上来看，优化效果较小）

降低包的大小，可以减少加载包的耗时。