通过4个方向降低首屏时间

1. 下载静态资源的时间
2. 下载页面组件的时间
3. 页面渲染的时间
4. js 同步函数的执行时间

压缩静态图片，降低下载时间

组件异步引入、非首屏的库异步引入、弹窗组件异步引入。降低首屏时下载的资源总量，多利用空闲时间下载资源并建立缓存。

const G6 = await import('@antv/g6');
export default {
  mounted() {
    setTimeout(() => import('@antv/g6'), 3000)
  }
}

首屏的页面组件中需要调用的接口请求，从created事件中移出到路由守卫里，和页面组件下载同时进行。降低网络请求总时长

import { Route } from 'vue-router/types/router'

const routes = [
  {
    name: 'example',
    meta: {
      // 需要在进入页面时执行的函数
      onRouteEnter: (to: Route， from?: Route) => {
      }
    }
  }
]

router.beforeEach(async (to, from, next) => {
  const toRouteName = to.name || ''
  const isPageChange = toRouteName !== from.name
  if (isPageChange) {
      const onRouteEnter = to.meta.onRouteEnter
      if (typeof onRouteEnter === 'function') {
        await onRouteEnter(to, from)
      }
  }
  next()
})

降低CSS的计算量，降低渲染时间

少用flex布局，用 display: inline-block; float; veralign @media等计算量少的样式属性替换。

少用百分号尺寸和calc，用写死的长度替换。

用 webpack 的 splitChunks拆包。

目的是让每个模块的包体积大小尽量差不多。

如果拆包太细，会导致占用请求数过多，造成请求阻塞。

如果单个包体积太大，下载时间就长。

利用 webpack 的 bundle-analyzer 分析拆包结果

用service worker缓存静态资源，降低静态资源下载时间

用web worker优化同步函数的执行时间，降低js执行时间

渲染的DOM量过多时，可以尝试将屏内不展示的元素清除，或者用canvas替代复杂DOM，降低渲染时间。