Vue3|性能优化之缓存
本文介绍几个Vue3项目的缓存策略
背景
缓存在性能优化中起着重要作用，它可以提高网页的响应速度、给用户更快速流畅的使用体验，同时还可以减少服务器负担。接下来从页面、组件和数据三个层级说明这次在项目中做的缓存措施。
方案
页面缓存
页面缓存适用于内容不会频繁改变且访问较多的页面。通过缓存整个页面的HTML内容，这样用户请求该页面时，服务端无需重新生成页面直接从缓存中获取即可。由于做了页面缓存相当于组件和数据都会缓存，效率更高一些。然而我们网站所有页面都会在右上角展示用户登录信息，依赖登录态就不适合做页面缓存了。
组件缓存
接下来考虑做组件缓存。官方给到了一些组件层级的优化点，比如：
-
v-once：仅渲染一次，并跳过之后更新，适合本身有一定的渲染成本且无需受父组件的更新影响。API参考 -
v-memo：若条件和上一次相同，则跳过这次更新，适合和v-for配合来优化列表，有条件的跳过更新。API参考 -
<keep-alive>：缓存不活动的实例，再次激活时直接从缓存中恢复。适合在切换组件中保存组件状态。API参考 - 异步组件：仅在实际渲染时再加载内部逻辑，适合延迟加载非立即显示的组件。API参考
- 虚拟列表：只渲染当前可见项且复用Dom节点，适合大量数据列表或表格列表。推荐的三方库：vue-virtual-scroller、vue-virtual-scroll-grid、vueuc/VVirtualList。
这里主要说下KeepAlive，它是Vue3官方提供的一个高级组件，可以在多个组件动态切换时缓存被移除的组件实例，那具体有哪些应用场景呢？先来看下属性：
-
include：缓存指定name的组件 -
exclude：不缓存指定name的组件 -
max：限制可被缓存的最大组件实例数，避免占用过大内存
举个例子，有一个列表页（左图）点击子项后会在当前页切换到详情页（右图），如果返回会重新渲染列表页，此时可以通过 <keep-alive>缓存列表页从而实现返回后位置不变，更符合用户习惯。
项目中用的NuxtPage占位，会根据当前路由动态地加载和显示相应的页面组件，也就是图中GameHome和Details这部分。实现起来非常简单（参考方案），只要两行代码，首先给想要缓存的列表页命名如：
defineOptions({ name: "GameHome" });
然后在上一层指定缓存这个页面，利用NuxtPage本身keepalive属性：
<NuxtPage
:keepalive="{ include: ['GameHome'], max: 2 }"
></NuxtPage>
除了可以保存组件状态，还可以减少不必要的请求和渲染，让用户可以更快看到页面。
数据缓存
上面的组件缓存只是客户端层面的，只能提高单个用户在本次浏览过程中的体验，还可以利用SSR将请求数据缓存在服务端，以提高其他用户浏览同个高频页面的加载速度。思路如下：
- 使用LRUCache缓存算法
private static cache = new LRUCache({
max: 100, // 保存100个数据
ttl: 1000 * 60 * 60 * 24, // 保存1天
});
- 设置缓存类型，控制缓存范围，比如个性化数据只缓存在本地
export const enum CacheType {
NONE = 0, // 不缓存
ONLY_CLIENT = 1, // 仅缓存在客户端
ONLY_SERVER = 2, // 仅缓存在服务端
BOTH_CLIENT_SERVER = 3, // 客户端和服务端都缓存
}
- 在请求接口增加一个缓存类型参数，满足条件时get/set对应缓存
public async request(
name: string,
path: string,
params?: object,
extraOption?: object,
cacheType: CacheType = CacheType.NONE,
) {
return useAsyncData(
name,
() => {
// 1、先获取缓存数据，生成唯一缓存key = 请求路径 + 公参 + 私参
const cacheKey = CacheMgr.generateKey(cacheType, path + this.locale, params);
if (CacheMgr.isCacheScene(cacheType)) {
const cache = CacheMgr.get(cacheKey);
if (cache != null) {
return cache;
}
}
// 2、无可用缓存发起请求
const response = await $fetch(...);
// 3、统一处理异常情况
this.handleError(response.error);
// 4、添加缓存
if (CacheMgr.isCacheScene(cacheType)) {
CacheMgr.set(response, response.error, cacheKey);
}
return response;
},
extraOption ?? {},
);
}
- 还要注意版本升级时清理历史缓存，避免不可用
总结
通过以上缓存措施，可以看到，当缓存在客户端时，可以提高用户多次访问同一页面/模块的速度；当缓存在服务端时，还能提高其他用户访问同一页面/模块的速度，同时给服务器减压。
