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、进阶优化

预加载：prefetch 和 preload 都是用于优化页面性能链接（js、css）的链接关系类型，主要通过浏览器预加载来提高页面响应速度，使用link的方式来引用的。
preload： 用于预加载当前页面急需的资源，比如关键css，字体等，浏览器执行到的时候加载。使用场景： 加载关键css，将关键的css直接嵌入到html 中，以避免阻塞渲染，通过内联关键样式，可以确定在解析和渲染html 时，关键样式已经可用，这样页面加载速度更快，用户会更早地看见内容。
<link rel='preload' href='XXX.js', as='script'>
prefetch： 预加载未来可能用到的资源。它的优先级较低，是在页面加载完成后，再去执行的。使用webpack时在vue-router 的import（）中设置/ * webpackPrefetch: true * /
<link rel='prefetch' href='XXX.js', as='script'>

在vue3+vite 项目中，预加载的核心实现方法包括：配置optimizeDeps.include 预构建依赖、使用vite-plugin-optimize-rersist自动优化预加载配置，以及通过动态导入和路由懒加载实现按需预加载。

vue-router会默认支持动态导入，使用 import()这种形式，如果想跳过低频的路由的话使用 /* @vite-ignore*/
使用延迟装载 defer ：写一个userDefer 方法，创建一个响应式变量，每加一帧，增加1

typescript 复制代码

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解析完成后，再顺序执行。

2、async ：也可以改变浏览器处理javascript脚本的方式，带有async的脚本不会阻塞html的解析，而是异步加载脚本，加载完毕后尽快执行，不用等到其他脚本和html解析完成，可能会导致html的解析中断。
异步组件async
预渲染