Vite：性能优化

开发时态的构建速度优化:

yarn dev/yarn start敲下的一瞬间到呈现结果要占用多少时长

• webpack在这方面下的功夫是很重:
  • cache-loader cache loader结果(如果两次构建源代码没有产生变化，则直接使用缓存 不调用 loader)。
  • thread-loader，开启多线程去构建
• vite 是按需加载，所以我们不需要太care这方面

页面性能指标:和我们怎么去写代码有关

• 首屏渲染时：fcp(first content paint),(first content paint -> 页面中第一个元素的渲染时长)
  • 懒加载：需要我们去写代码实现的
  • http优化：协商缓存 和强缓存
    • 强缓存：服务端给响应头追加一些字段(expires)，客户端会记住这些字段，在expires(截止失效时间)没有到达之前，无论你怎么刷新页面，浏览器都不会重新请求页面，而是从缓存里取
    • 协商缓存：是否使用缓存要跟后端商量一下，当服务端给我们打上协商缓存的标记以后，客户端在下次刷新页面需要重新请求资源时会发 送一个协商请求给到服务端，服务端如果说需要变化 则会响应具体的内容，如果服务端觉得没变化则会响应304
• 页面中最大元素的一个时长：lcp(largest content paint)

JS逻辑

js逻辑:

• 我们要注意副作用的清除 组件是会频繁的挂载和卸载:如果我们在某一个组件中有计时器(setTimeout)，如果我们在卸载的时候不去清除这 个计时器，下次再次挂载的时候计时器等于开了两个线程

const [timer,setTimer]=usestate(null);
useEffect(()=>{
    setTimer(setTimeout(()=>{}));
    return()=>clearTimeout(timer);
})

我们在写法上的一个注意事项:

requestAnimationframe，reguestIdlecallback [卡浏览器帧率]。 对浏览器渲染原理要有一定的认识 然后在这方面做优化

• requestIdleCallback：传一个函数进去
• 浏览器的帧率：16.6ms去更新一次(执行js逻辑 以及 重排重绘..)，假设我的js执行逻辑超过了16.6 掉帧了 王者
• concurrent mode-->concurrency可终端渲染react

防抖 节流

lodashjs工具 Array.prototype.forEach

// 1.循环 
const arr=[];// 几千条数据
arr.forEach //不要用arr.forEach  使用lodash.forEach，其内部大量算法进行性能优化


2. 对作用域的一个控制
const arr=[1,2，3];
// 由近到远
for(let i=0,len = arr.length; i< len; i ++){ // len 不要写成arr.length，不然每次都要去获取

}

CSS

• 关注继承属性：能继承的就不要重复写
• 尽量避免太过于深的css嵌套（会生成很深的css树，不便于解析）

构建优化

vite(rollup)、webpack

• 优化体积：压缩，treeshaking，图片资源压缩，cdn加载，分包