前端性能优化

发表于 2024-03-06 更新于 2024-04-06 阅读次数： Changyan：本文字数： 653 阅读时长 ≈ 1 分钟

首屏速度

源码上

路由懒加载（动态导入） ()=>import('/path')
- 不要再导入异步组件了，因为路由组件本身就是动态导入，不需要组件写出异步组件了
- 当前跳到了某路由，其对应组件才会下载。
异步组件（按需导入） defineAsyncComponent
- ```
const Some = defineAsyncComponent(()=>import('/pat'))
...
<Some v-if="isShow"></Some>
```
  首屏没有加载，用到时再向服务器发送请求。
老版的库更新以支持tree-shaking，少用第三方库
服务器渲染SSR
服务器gZip压缩
webpack打包压缩代码，禁止大图片转base64

网络上

静态资源放在cdn上
注意本地webpack要配置external 排除cdn引入的包

用户感知上

骨架屏/loading

按需引入

切换需要等待

预加载，切换无感

浪费带宽

prefetch 和 preload 不同:
preload是一种立即获取资源的策略，用来声明一个高优先级资源强制浏览器提前请求。
prefetch是一种在后台缓存资源的策略，（缓存的资源并不是当前页面需要的）以便在需要时立即使用。