vue的首屏优化是怎么做的 - 指南

可以打开f12 的performanace 性能选项卡，然后点击开始录制，刷新页面，首次绘制FP，到首次绘制内容FCP之间的该白屏没有了之后，点击结束 ，那么在这里就能看见哪个模块或者是网络原因用的时间长。
网络原因就是如果

具体优化细节

1、基础的优化

• 优化图片： 推荐webP 格式，不用要太大的图片（头像上传控制 size 200 * 200）
• 组件按需加载：React Suspense + Reace.lazy
• 延迟加载： 滚动加载，可视区域渲染。
• 不可以的）就是tree-shaking: 凭借代码编写的方法约定，tree-shaking需要什么条件？esm（模块化，如果使用cmd commonjs，
• CDN: oss+cdn
• 精简第三方库： antd\mantine\mui\nextui\arco UI ， 库的内容按需导入， 国际化文件，要移除
• 缓存（强缓存 （Expire， Cache-control），协商缓存（Last-Modified、If-Modified-Since\Etag\ if-None-match）,策略缓存 service-worker）
• 字体压缩： font-spider 移除无用字体，webfont 预加载
• SSR（server side render）\ SSG (Server side generate)
• 骨架屏 或者增加loading动画

2、进阶优化

• 预加载：
  preload; 在vue-router 的import（）中设置/ * webpackPrefetch: true * /
  ``<link rel=‘preload’ href=‘XXX.js’, as=‘script’>
  在vue3+vite 工程中，预加载的核心实现途径包括： 调整optimizeDeps.include 预构建依赖、使用vite-plugin-optimize-rersist自动优化预加载部署，以及通过动态导入和路由懒加载实现按需预加载。
  vue-router会默认支持动态导入，使用 import()这种形式，假如想跳过低频的路由的话使用 /* @vite-ignore*/
• 通过加载关键css， 将关键的css直接嵌入到html 中，以避免阻塞渲染，经过内联关键样式，能够确定在解析和渲染html 时，关键样式已经可用，这样页面加载速度更快，用户会更早地看见内容。
• 使用延迟装载 defer ： 写一个userDefer 方式， 创建一个响应式变量，每加一帧，增加1

import {ref
} from 'Vue'
const count = ref(0)
function update(){
count.value ++;
requestAnimationFrame(updata)
}
updata()
export function useDefer(){
return function(n){
return count.value >
= n
}
}

• 非关键js 异步加载 采用defer 或者 async
  1、 defer：可以改变浏览器处理javscript脚本的方式，带有defer的脚本不会阻塞HTML的解析，而是并行下载defer的脚本，等到html解析达成后，再顺序执行。
  通过异步加载脚本，加载完毕后尽快执行，不用等到其他脚本和html解析搞定，可能会导致html的解析中断。就是2、async ：也能够改变浏览器处理javascript脚本的方式，带有async的脚本不会阻塞html的解析，而

• 异步组件async

• 预渲染