uni-app离线缓存功能全攻略

2026-03-16 05:01:02作者：余洋婵Anita

uni-app作为基于Vue.js的跨平台开发框架，其离线缓存功能是提升应用可靠性的核心组件。在网络环境不稳定的移动场景中，离线缓存能够预先存储关键资源，确保应用在无网络状态下依然可用。本文将系统解析离线缓存的实现原理、配置方法及优化策略，帮助开发者充分利用这一功能提升应用质量。

离线缓存概念解析

离线缓存是一种客户端数据存储机制，通过在网络连接正常时主动缓存应用资源，实现网络中断时的无缝体验。不同于传统本地存储，uni-app离线缓存具备智能资源识别和优先级管理能力，能够根据应用结构和用户行为动态调整缓存内容。

核心价值实现原理

uni-app离线缓存的核心价值体现在三个方面：资源访问可靠性提升、加载速度优化和流量消耗降低。通过分析packages/uni-shared/src/utils.ts中的缓存工具函数可以发现，框架采用了LRU（最近最少使用）淘汰策略，确保有限存储空间内保留最有价值的资源：

export function createCachePool<T>(maxSize = 100) {
  const cache = new Map<string, T>()
  return {
    get(key: string): T | undefined {
      if (cache.has(key)) {
        const value = cache.get(key)!
        cache.delete(key)
        cache.set(key, value)
        return value
      }
      return undefined
    },
    set(key: string, value: T) {
      if (cache.size >= maxSize) {
        const oldestKey = cache.keys().next().value
        cache.delete(oldestKey)
      }
      cache.set(key, value)
    }
  }
}

技术架构实施步骤

1. 基础配置启用

在项目根目录的manifest.json中添加缓存配置：

{
  "app-plus": {
    "cache": {
      "enabled": true,
      "maxSize": 50,
      "strategies": ["preload", "onDemand"]
    }
  }
}

2. 资源缓存策略设置

通过packages/vite-plugin-uni/src/plugins/assets.ts中的资源处理逻辑，配置不同类型资源的缓存策略：

// 缓存策略配置示例
export default {
  images: {
    strategy: 'preload',
    expiration: 86400 * 7 // 7天有效期
  },
  apiData: {
    strategy: 'onDemand',
    expiration: 3600 // 1小时有效期
  }
}

3. 缓存API调用实现

使用uni-app提供的缓存API进行数据缓存：

// 缓存网络请求数据
async function requestWithCache(url, options = {}) {
  const cacheKey = `api_${md5(url + JSON.stringify(options))}`
  const cachedData = uni.getStorageSync(cacheKey)
  
  if (cachedData && !options.forceRefresh) {
    return cachedData
  }
  
  const response = await uni.request({ url, ...options })
  uni.setStorageSync(cacheKey, response.data)
  return response.data
}

优化策略应用技巧

1. 缓存空间管理

合理设置缓存上限，避免占用过多设备存储空间。通过监听onAppShow生命周期，定期清理过期缓存：

// 缓存清理示例
export function cleanExpiredCache() {
  const cacheIndex = uni.getStorageSync('cacheIndex') || {}
  const now = Date.now()
  
  Object.keys(cacheIndex).forEach(key => {
    if (cacheIndex[key].expire < now) {
      uni.removeStorageSync(key)
      delete cacheIndex[key]
    }
  })
  
  uni.setStorageSync('cacheIndex', cacheIndex)
}

2. 预加载策略优化

根据用户行为分析，智能预加载可能访问的资源。在packages/uni-app/src/helpers/preload.ts中实现基于页面跳转的资源预加载：

export function preloadPageResources(pagePath: string) {
  const pageConfig = getPageConfig(pagePath)
  
  // 预加载图片资源
  pageConfig.images?.forEach(img => {
    uni.downloadFile({
      url: img,
      success: res => {
        if (res.statusCode === 200) {
          uni.saveFile({ tempFilePath: res.tempFilePath })
        }
      }
    })
  })
}