缓存文档 - 缓存策略和性能优化

概述

本文档详细介绍了 VJSP Vue3 框架的缓存策略和性能优化机制。框架采用多层次的缓存架构，结合现代前端技术栈，为企业级应用提供高效的缓存解决方案和性能优化策略。

缓存架构

核心特性

多级缓存策略：支持本地存储、会话存储、组件缓存等多级缓存机制
安全存储：提供加密存储功能，保护敏感数据安全
智能过期管理：自动清理过期缓存，优化存储空间
组件缓存：基于 Vue keep-alive 的组件级缓存，提升页面切换性能
性能监控：内置性能监控工具，实时跟踪应用性能指标

技术栈

Web Storage API：localStorage 和 sessionStorage 基础存储
CryptoJS：数据加密解密，提高存储安全性
Pinia 状态管理：缓存状态和性能状态管理
Vue keep-alive：组件级缓存机制
ECharts：性能监控数据可视化

缓存管理机制

缓存工具类 (CacheUtil)

框架提供统一的缓存操作接口，支持多种存储模式和配置选项。

缓存选项配置

缓存工具支持丰富的配置选项：

过期时间：设置缓存数据的有效期限
存储模式：选择 localStorage 或 sessionStorage
加密存储：启用数据加密保护敏感信息
自定义密钥：支持自定义加密密钥

核心功能方法

缓存工具类提供完整的 CRUD 操作：

设置缓存：支持多种存储模式和加密选项
获取缓存：自动检查过期并返回有效数据
缓存管理：支持删除、清空、检查等操作
性能优化：提供缓存大小计算和过期清理功能

安全存储工具 (SecurityStorage)

专门用于敏感数据的安全存储，提供额外的安全保护机制。

安全特性

动态密钥生成：结合浏览器指纹生成唯一加密密钥
会话级存储：默认使用 sessionStorage 提高安全性
Token 管理：专门的安全 Token 存储方法
用户信息保护：加密存储用户敏感信息

应用场景

用户登录 Token 的安全存储
敏感用户信息的加密保护
记住我功能的实现
安全会话管理

组件缓存机制

keep-alive 组件缓存

框架基于 Vue keep-alive 实现组件级缓存，提升页面切换性能。

缓存策略

动态缓存管理：根据路由配置动态管理缓存组件
智能缓存清理：自动清理不需要的缓存组件
缓存视图管理：通过 tagsView 状态管理缓存视图

配置方式

在路由配置中通过 meta 属性控制组件缓存：

typescript

// 路由配置示例
{
  path: '/product/list',
  name: 'ProductList',
  component: () => import('@/views/product/List.vue'),
  meta: {
    title: '产品列表',
    noCache: false // 启用缓存（默认）
  }
}

标签页缓存管理

通过 tagsView 状态管理实现标签页级别的缓存控制。

缓存视图管理

缓存视图集合：维护当前需要缓存的组件名称集合
动态缓存更新：根据标签页操作动态更新缓存策略
缓存状态同步：确保缓存状态与用户操作同步

性能优化策略

1. 路由懒加载

采用动态导入实现路由组件的按需加载：

代码分割：自动分割代码块，减少初始包大小
按需加载：用户访问时动态加载对应组件
预加载优化：智能预加载可能访问的组件

2. 组件优化

计算属性缓存

合理使用计算属性，利用 Vue 的响应式缓存机制：

依赖追踪：自动追踪依赖关系，避免重复计算
缓存复用：相同依赖下复用计算结果
性能监控：监控计算属性的性能表现

防抖节流优化

对高频操作进行防抖节流处理：

搜索优化：搜索输入框的防抖处理
滚动优化：滚动事件的节流控制
表单优化：表单提交的防重复提交

3. 数据缓存策略

字典数据缓存

对常用字典数据进行缓存优化：

预加载缓存：应用启动时预加载常用字典
缓存更新：定时更新缓存数据，保持数据新鲜度
内存优化：合理控制缓存大小，避免内存泄漏

API 响应缓存

对频繁请求的 API 响应进行缓存：

请求去重：相同请求避免重复发送
缓存时效：设置合理的缓存过期时间
缓存失效：数据变更时主动清除相关缓存

Product 模块开发指南

1. 产品数据缓存实现

在 Product 模块开发中，合理使用缓存策略提升性能。

产品列表缓存

typescript

// src/views/product/List.vue
import { CacheUtil } from '@/utils/cache'

// 产品列表数据缓存
const PRODUCT_LIST_CACHE_KEY = 'product_list_cache'
const PRODUCT_LIST_CACHE_EXPIRE = 5 * 60 * 1000 // 5分钟缓存

// 获取产品列表（带缓存）
const getProductList = async () => {
  // 先检查缓存
  const cachedData = CacheUtil.getLocal(PRODUCT_LIST_CACHE_KEY)
  if (cachedData) {
    return cachedData
  }

  // 缓存未命中，请求接口
  const response = await getProductListApi()

  // 设置缓存
  CacheUtil.setLocal(PRODUCT_LIST_CACHE_KEY, response.data, PRODUCT_LIST_CACHE_EXPIRE)

  return response.data
}

产品详情缓存

typescript

// src/views/product/Detail.vue
// 产品详情缓存（基于产品ID）
const getProductDetail = async (productId: string) => {
  const cacheKey = `product_detail_${productId}`
  const cacheExpire = 10 * 60 * 1000 // 10分钟缓存

  // 检查缓存
  const cachedDetail = CacheUtil.getLocal(cacheKey)
  if (cachedDetail) {
    return cachedDetail
  }

  // 请求接口
  const response = await getProductDetailApi(productId)

  // 设置缓存
  CacheUtil.setLocal(cacheKey, response.data, cacheExpire)

  return response.data
}

2. 组件缓存配置

为 Product 模块配置合理的组件缓存策略。

产品列表页面缓存

typescript

// src/router/modules/product.ts
{
  path: '/product/list',
  name: 'ProductList',
  component: () => import('@/views/product/List.vue'),
  meta: {
    title: '产品列表',
    noCache: false, // 启用缓存
    keepAliveName: 'ProductList' // 缓存组件名称
  }
}

产品详情页面缓存

typescript

// 产品详情页面（通常不需要缓存，保持数据实时性）
{
  path: '/product/detail/:id',
  name: 'ProductDetail',
  component: () => import('@/views/product/Detail.vue'),
  meta: {
    title: '产品详情',
    noCache: true // 禁用缓存
  }
}

3. 性能优化实践

图片懒加载

vue

<!-- src/views/product/List.vue -->
<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id" class="product-item">
      <el-image :src="product.image" :alt="product.name" lazy :scroll-container="scrollContainer" />
      <div class="product-info">
        <h3>{{ product.name }}</h3>
        <p>{{ product.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const scrollContainer = ref<HTMLElement | null>(null)
</script>

虚拟滚动优化

对于大量产品数据的列表展示，使用虚拟滚动优化性能：

vue

<!-- src/views/product/List.vue -->
<template>
  <el-table-v2 :columns="columns" :data="products" :width="800" :height="400" fixed />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const columns = [
  {
    key: 'name',
    title: '产品名称',
    width: 200,
  },
  {
    key: 'price',
    title: '价格',
    width: 100,
  },
  // ... 更多列定义
]

const products = ref([])
</script>

缓存监控和调试

1. 缓存状态监控

框架提供缓存状态监控工具，帮助开发者了解缓存使用情况。

缓存统计信息

typescript

// 获取缓存统计信息
const getCacheStats = () => {
  const localKeys = CacheUtil.keys(false)
  const sessionKeys = CacheUtil.keys(true)

  return {
    localCache: {
      count: localKeys.length,
      size: CacheUtil.size(false),
      keys: localKeys,
    },
    sessionCache: {
      count: sessionKeys.length,
      size: CacheUtil.size(true),
      keys: sessionKeys,
    },
  }
}

缓存清理工具

typescript

// 定期清理过期缓存
const scheduleCacheCleanup = () => {
  // 每小时清理一次过期缓存
  setInterval(
    () => {
      CacheUtil.cleanupExpired(false) // 清理本地缓存
      CacheUtil.cleanupExpired(true) // 清理会话缓存
    },
    60 * 60 * 1000
  )
}

2. 性能监控工具

框架内置性能监控功能，帮助识别性能瓶颈。

性能指标监控

typescript

// 性能监控配置
const performanceMonitor = {
  // 监控FPS（帧率）
  monitorFPS: () => {
    let lastTime = performance.now()
    let frames = 0

    const loop = () => {
      frames++
      const currentTime = performance.now()
      if (currentTime - lastTime >= 1000) {
        const fps = Math.round((frames * 1000) / (currentTime - lastTime))
        console.log(`当前FPS: ${fps}`)
        frames = 0
        lastTime = currentTime
      }
      requestAnimationFrame(loop)
    }
    loop()
  },

  // 监控内存使用
  monitorMemory: () => {
    if ('memory' in performance) {
      const memory = (performance as any).memory
      console.log(`内存使用: ${Math.round(memory.usedJSHeapSize / 1024 / 1024)}MB`)
    }
  },
}

最佳实践

1. 缓存策略选择

根据数据特性选择缓存策略

静态数据：长期缓存（如字典数据、配置信息）
半静态数据：中等时长缓存（如产品分类、用户信息）
动态数据：短期缓存或实时获取（如产品库存、订单状态）

缓存层级设计

内存缓存：当前会话的临时数据
会话缓存：用户会话期间有效的数据
本地缓存：长期有效的配置数据

2. 性能优化技巧

代码分割优化

typescript

// 动态导入优化
const ProductEditor = defineAsyncComponent({
  loader: () => import('@/views/product/Editor.vue'),
  loadingComponent: LoadingComponent,
  delay: 200, // 延迟显示加载组件
  timeout: 3000, // 超时时间
})

图片优化策略

格式选择：根据场景选择 WebP、JPEG、PNG 等格式
尺寸优化：根据显示尺寸提供合适大小的图片
懒加载：非首屏图片延迟加载
CDN 加速：使用 CDN 加速图片加载

3. 错误处理和降级

缓存失败处理

typescript

// 缓存获取的容错处理
const getCachedDataWithFallback = async (key: string, fallback: () => Promise<any>) => {
  try {
    const cached = CacheUtil.getLocal(key)
    if (cached) return cached

    const data = await fallback()
    CacheUtil.setLocal(key, data)
    return data
  } catch (error) {
    console.error('缓存处理失败:', error)
    // 降级到直接调用fallback
    return fallback()
  }
}

性能监控告警

typescript

// 性能阈值监控
const performanceThresholds = {
  fps: 30, // 最低FPS阈值
  memory: 100, // 最大内存使用(MB)
  loadTime: 3000, // 最大加载时间(ms)
}

// 监控性能并触发告警
const checkPerformance = () => {
  const currentFPS = getCurrentFPS()
  if (currentFPS < performanceThresholds.fps) {
    console.warn('FPS过低，可能存在性能问题')
  }
}

总结

VJSP Vue3 框架提供了完整的缓存策略和性能优化解决方案。通过多级缓存架构、安全存储机制、组件缓存优化和性能监控工具，帮助开发者构建高性能的企业级应用。

在 Product（演示）模块开发中，合理运用缓存策略可以显著提升用户体验和系统性能。建议根据具体业务场景选择合适的缓存策略，并持续监控和优化应用性能。

缓存文档 - 缓存策略和性能优化 ​

概述 ​

缓存架构 ​

核心特性 ​

技术栈 ​

缓存管理机制 ​

缓存工具类 (CacheUtil) ​

缓存选项配置 ​

核心功能方法 ​

安全存储工具 (SecurityStorage) ​

安全特性 ​

应用场景 ​

组件缓存机制 ​

keep-alive 组件缓存 ​

缓存策略 ​

配置方式 ​

标签页缓存管理 ​

缓存视图管理 ​

性能优化策略 ​

1. 路由懒加载 ​

2. 组件优化 ​

计算属性缓存 ​

防抖节流优化 ​

3. 数据缓存策略 ​

字典数据缓存 ​

API 响应缓存 ​

Product 模块开发指南 ​

1. 产品数据缓存实现 ​

产品列表缓存 ​

产品详情缓存 ​

2. 组件缓存配置 ​

产品列表页面缓存 ​

产品详情页面缓存 ​

3. 性能优化实践 ​

图片懒加载 ​

虚拟滚动优化 ​

缓存监控和调试 ​

1. 缓存状态监控 ​

缓存统计信息 ​

缓存清理工具 ​

2. 性能监控工具 ​

性能指标监控 ​

最佳实践 ​

1. 缓存策略选择 ​

根据数据特性选择缓存策略 ​

缓存层级设计 ​

2. 性能优化技巧 ​

代码分割优化 ​

图片优化策略 ​

3. 错误处理和降级 ​

缓存失败处理 ​

性能监控告警 ​

总结 ​

缓存文档 - 缓存策略和性能优化

概述

缓存架构

核心特性

技术栈

缓存管理机制

缓存工具类 (CacheUtil)

缓存选项配置

核心功能方法

安全存储工具 (SecurityStorage)

安全特性

应用场景

组件缓存机制

keep-alive 组件缓存

缓存策略

配置方式

标签页缓存管理

缓存视图管理

性能优化策略

1. 路由懒加载

2. 组件优化

计算属性缓存

防抖节流优化

3. 数据缓存策略

字典数据缓存

API 响应缓存

Product 模块开发指南

1. 产品数据缓存实现

产品列表缓存

产品详情缓存

2. 组件缓存配置

产品列表页面缓存

产品详情页面缓存

3. 性能优化实践

图片懒加载

虚拟滚动优化

缓存监控和调试

1. 缓存状态监控

缓存统计信息

缓存清理工具

2. 性能监控工具

性能指标监控

最佳实践

1. 缓存策略选择

根据数据特性选择缓存策略

缓存层级设计

2. 性能优化技巧

代码分割优化

图片优化策略

3. 错误处理和降级

缓存失败处理

性能监控告警

总结