日本語

简体中文
English

日本語

简体中文
English

キャッシュドキュメント - キャッシュ戦略とパフォーマンス最適化 ​

概要 ​

このドキュメントでは、VJSP Vue3 フレームワークのキャッシュ戦略とパフォーマンス最適化メカニズムについて詳しく説明します。フレームワークは、現代のフロントエンド技術スタックと組み合わせたマルチレベルキャッシュアーキテクチャを採用し、企業向けアプリケーションに効率的なキャッシュソリューションとパフォーマンス最適化戦略を提供します。

キャッシュアーキテクチャ ​

コア機能 ​

  • マルチレベルキャッシュ戦略：ローカルストレージ、セッションストレージ、コンポーネントキャッシュなどのマルチレベルキャッシュメカニズムをサポート
  • 安全なストレージ：機密データのセキュリティを保護する暗号化ストレージ機能を提供
  • インテリジェント有効期限管理：期限切れのキャッシュを自動的にクリーンアップし、ストレージスペースを最適化
  • コンポーネントキャッシュ：Vue keep-alive に基づくコンポーネントレベルキャッシュ、ページ切り替えパフォーマンスを向上
  • パフォーマンス監視：組み込みのパフォーマンス監視ツール、アプリケーションパフォーマンス指標をリアルタイムで追跡

技術スタック ​

  • Web Storage API：localStorage と sessionStorage による基本ストレージ
  • CryptoJS：データ暗号化と復号、ストレージセキュリティの向上
  • Pinia 状態管理：キャッシュ状態とパフォーマンス状態の管理
  • Vue keep-alive：コンポーネントレベルキャッシュメカニズム
  • ECharts：パフォーマンス監視データの可視化

キャッシュ管理メカニズム ​

キャッシュユーティリティクラス (CacheUtil) ​

フレームワークは、複数のストレージモードと設定オプションをサポートする統一されたキャッシュ操作インターフェースを提供します。

キャッシュオプション設定 ​

キャッシュユーティリティは豊富な設定オプションをサポートします：

  • 有効期限：キャッシュデータの有効期間を設定
  • ストレージモード：localStorage または sessionStorage を選択
  • 暗号化ストレージ：機密情報を保護するためのデータ暗号化を有効化
  • カスタムキー：カスタム暗号化キーのサポート

コア機能メソッド ​

キャッシュユーティリティクラスは完全な CRUD 操作を提供します：

  • キャッシュ設定：複数のストレージモードと暗号化オプションをサポート
  • キャッシュ取得：有効期限を自動的にチェックし、有効なデータを返却
  • キャッシュ管理：削除、クリア、チェックなどの操作をサポート
  • パフォーマンス最適化：キャッシュサイズ計算と有効期限クリーンアップ機能を提供

安全なストレージユーティリティ (SecurityStorage) ​

機密データの安全なストレージのために特別に設計され、追加のセキュリティ保護メカニズムを提供します。

セキュリティ機能 ​

  • 動的キー生成：ブラウザフィンガープリントと組み合わせて一意の暗号化キーを生成
  • セッションレベルストレージ：セキュリティ向上のためにデフォルトで sessionStorage を使用
  • トークン管理：特別な安全なトークンストレージ方法
  • ユーザー情報保護：機密ユーザー情報の暗号化ストレージ

適用シナリオ ​

  • ユーザーログイントークンの安全なストレージ
  • 機密ユーザー情報の暗号化保護
  • 「ログイン状態を記憶する」機能の実装
  • 安全なセッション管理

コンポーネントキャッシュメカニズム ​

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
  }

  // キャッシュミス、APIをリクエスト
  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
  }

  // APIをリクエスト
  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 = () => {
  // 1時間ごとに期限切れキャッシュをクリーンアップ
  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（デモ）モジュール開発では、キャッシュ戦略を適切に活用することで、ユーザーエクスペリエンスとシステムパフォーマンスを大幅に向上させることができます。具体的なビジネスシナリオに基づいて適切なキャッシュ戦略を選択し、アプリケーションパフォーマンスを継続的に監視および最適化することをお勧めします。