壁紙アプリの画像キャッシュが静かに膨らんでメモリで落ちる — Rork運用で効いた計測と上限設計の運用メモ

// 画像の読み込み実績とディスクキャッシュ量を計測するフック
import { useCallback, useRef, useState } from 'react';
import * as FileSystem from 'expo-file-system';
 
type LoadMetrics = {
  loadCount: number;
  cacheHits: number;
  cacheHitRate: number;     // %
  avgLoadMs: number;
  diskCacheMB: number;
};
 
export const useImageMetrics = () => {
  const startTimes = useRef<Record<string, number>>({});
  const totals = useRef({ count: 0, ms: 0, hits: 0 });
  const [metrics, setMetrics] = useState<LoadMetrics>({
    loadCount: 0, cacheHits: 0, cacheHitRate: 0,
    avgLoadMs: 0, diskCacheMB: 0,
  });
 
  const markStart = useCallback((key: string) => {
    startTimes.current[key] = Date.now();
  }, []);
 
  // expo-image の onLoad は event.cacheType を返す（'memory' | 'disk' | 'none'）
  const markLoad = useCallback((key: string, cacheType?: string) => {
    const started = startTimes.current[key] ?? Date.now();
    const ms = Date.now() - started;
    const t = totals.current;
    t.count += 1; t.ms += ms;
    if (cacheType === 'memory' || cacheType === 'disk') t.hits += 1;
    setMetrics((prev) => ({
      ...prev,
      loadCount: t.count,
      cacheHits: t.hits,
      cacheHitRate: Math.round((t.hits / t.count) * 100),
      avgLoadMs: Math.round(t.ms / t.count),
    }));
  }, []);
 
  const refreshDiskSize = useCallback(async () => {
    const dir = (FileSystem.cacheDirectory ?? '') + 'expo-image/';
    const info = await FileSystem.getInfoAsync(dir, { size: true });
    const mb = (info.exists ? (info.size ?? 0) : 0) / (1024 * 1024);
    setMetrics((prev) => ({ ...prev, diskCacheMB: Math.round(mb * 10) / 10 }));
  }, []);
 
  return { metrics, markStart, markLoad, refreshDiskSize };
};
 
// 実測の一例（私の壁紙アプリ・iPhone 12 / 1,200枚スクロール後）:
// { loadCount: 1200, cacheHits: 1044, cacheHitRate: 87,
//   avgLoadMs: 64, diskCacheMB: 612.4 }

// ディスクキャッシュを上限 200MB に保つ手動エビクション
import * as FileSystem from 'expo-file-system';
 
const CACHE_DIR = (FileSystem.cacheDirectory ?? '') + 'images/';
const MAX_BYTES = 200 * 1024 * 1024; // 200MB
 
export const evictDiskCache = async () => {
  const dir = await FileSystem.getInfoAsync(CACHE_DIR);
  if (!dir.exists) return { freedMB: 0, keptMB: 0 };
 
  const names = await FileSystem.readDirectoryAsync(CACHE_DIR);
  const entries = await Promise.all(
    names.map(async (name) => {
      const info = await FileSystem.getInfoAsync(CACHE_DIR + name, { size: true });
      return {
        uri: CACHE_DIR + name,
        size: info.exists ? (info.size ?? 0) : 0,
        // modificationTime は秒。新しいものほど大きい
        mtime: info.exists ? (info.modificationTime ?? 0) : 0,
      };
    })
  );
 
  const total = entries.reduce((sum, e) => sum + e.size, 0);
  if (total <= MAX_BYTES) return { freedMB: 0, keptMB: Math.round(total / 1048576) };
 
  // 古い順（mtime 昇順）に削って閾値の 80% まで落とす
  entries.sort((a, b) => a.mtime - b.mtime);
  let running = total;
  let freed = 0;
  const target = MAX_BYTES * 0.8;
  for (const e of entries) {
    if (running <= target) break;
    await FileSystem.deleteAsync(e.uri, { idempotent: true });
    running -= e.size; freed += e.size;
  }
  return { freedMB: Math.round(freed / 1048576), keptMB: Math.round(running / 1048576) };
};
 
// 呼び出しタイミング: アプリ起動時とバックグラウンド復帰時に一度ずつ。
// 出力例: { freedMB: 430, keptMB: 160 }