Vue3性能优化之首屏优化实战指南

# 运行bundle分析
npm run build:analyze

npm install --save-dev webpack-bundle-analyzer

// vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: 'static',
          openAnalyzer: false,
          reportFilename: 'bundle-report.html'
        })
      )
    }
  }
}

// 🚫 之前的错误引入方式
import _ from 'lodash'           // 整个lodash库 (72KB)
import moment from 'moment'      // 整个moment库 + 语言包 (67KB)
import * as echarts from 'echarts' // 整个echarts库 (400KB)

// 我们实际只用了
_.debounce, _.throttle, _.cloneDeep
moment().format('YYYY-MM-DD')
echarts的一个简单折线图

// ✅ 优化后的引入方式
import debounce from 'lodash/debounce'     // 只有3KB
import throttle from 'lodash/throttle'     // 只有2KB  
import cloneDeep from 'lodash/cloneDeep'   // 只有5KB
import dayjs from 'dayjs'                  // 替代moment，只有2KB
import { LineChart } from 'echarts/charts' // 按需引入图表类型

// 🚫 错误的图标引入
import '@/assets/icons/iconfont.css' // 500个图标，300KB

// 实际只用了20个图标

// ✅ 创建图标组件
// components/Icon.vue
<template>
  <i :class="`icon-${name}`" v-if="isLoaded"></i>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const props = defineProps({
  name: String
})

const isLoaded = ref(false)

onMounted(async () => {
  try {
    // 动态加载图标CSS
    await import(`@/assets/icons/${props.name}.css`)
    isLoaded.value = true
  } catch (error) {
    console.warn(`Icon ${props.name} not found`)
  }
})
</script>

// 🚫 错误的路由配置
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import UserList from '@/views/UserList.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  { path: '/users', component: UserList }
]

// ✅ 优化后的路由懒加载
const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import(
      /* webpackChunkName: "about" */ '@/views/About.vue'
    )
  },
  {
    path: '/users',
    component: () => import(
      /* webpackChunkName: "user-management" */ '@/views/UserList.vue'
    )
  }
]

// ✅ 大型组件的懒加载
<template>
  <div>
    <Header />
    <!-- 只有在需要时才加载重型组件 -->
    <Suspense>
      <template #default>
        <AsyncDataTable v-if="showTable" />
      </template>
      <template #fallback>
        <div>加载中...</div>
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

const showTable = ref(false)

// 异步组件定义
const AsyncDataTable = defineAsyncComponent({
  loader: () => import('@/components/DataTable.vue'),
  loadingComponent: () => import('@/components/Loading.vue'),
  errorComponent: () => import('@/components/Error.vue'),
  delay: 200,
  timeout: 3000
})
</script>

// vue.config.js
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  productionSourceMap: false, // 生产环境不生成source map
  
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // Gzip压缩
      config.plugins.push(
        new CompressionPlugin({
          test: /\.(js|css|html|svg)$/,
          algorithm: 'gzip',
          threshold: 10240, // 只压缩大于10KB的文件
          minRatio: 0.8
        })
      )
      
      // 代码分割优化
      config.optimization = {
        ...config.optimization,
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            // 将第三方库单独打包
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name: 'vendors',
              chunks: 'all',
              priority: 10
            },
            // 将常用的工具函数单独打包
            common: {
              name: 'common',
              minChunks: 2,
              chunks: 'all',
              priority: 5,
              reuseExistingChunk: true
            }
          }
        }
      }
    }
  },
  
  chainWebpack: config => {
    // 预加载关键资源
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        include: 'initial',
        fileBlacklist: [/\.map$/, /hot-update\.js$/]
      }
    ])
    
    // 预获取非关键资源
    config.plugin('prefetch').tap(() => [
      {
        rel: 'prefetch',
        include: 'asyncChunks'
      }
    ])
  }
}

// vue.config.js
const cdn = {
  css: [
    'https://cdn.jsdelivr.net/npm/element-plus@2.2.0/dist/index.css'
  ],
  js: [
    'https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.min.js',
    'https://cdn.jsdelivr.net/npm/element-plus@2.2.0/dist/index.full.min.js'
  ]
}

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 外部依赖不打包
      config.externals = {
        vue: 'Vue',
        'element-plus': 'ElementPlus'
      }
    }
  },
  
  chainWebpack: config => {
    config.plugin('html').tap(args => {
      args[0].cdn = cdn
      return args
    })
  }
}

<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>
  <!-- 预连接CDN -->
  <link rel="dns-prefetch" href="//cdn.jsdelivr.net" rel="external nofollow"  rel="external nofollow" >
  <link rel="preconnect" href="//cdn.jsdelivr.net" rel="external nofollow"  rel="external nofollow"  crossorigin>
  
  <!-- CDN CSS -->
  <% for (var i in htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="stylesheet">
  <% } %>
</head>
<body>
  <div id="app"></div>
  
  <!-- CDN JS -->
  <% for (var i in htmlWebpackPlugin.options.cdn.js) { %>
    <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
  <% } %>
</body>
</html>

// utils/performance.js
class PerformanceMonitor {
  constructor() {
    this.metrics = new Map()
    this.observers = new Map()
    this.init()
  }
  
  init() {
    // 监听核心Web Vitals
    this.observeLCP()
    this.observeFID()
    this.observeCLS()
    this.observeNavigation()
    this.observeResource()
  }
  
  // Largest Contentful Paint
  observeLCP() {
    const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries()
      const lastEntry = entries[entries.length - 1]
      
      this.recordMetric('LCP', {
        value: lastEntry.startTime,
        element: lastEntry.element,
        timestamp: Date.now()
      })
    })
    
    observer.observe({ entryTypes: ['largest-contentful-paint'] })
    this.observers.set('lcp', observer)
  }
  
  // First Input Delay
  observeFID() {
    const observer = new PerformanceObserver((list) => {
      const firstInput = list.getEntries()[0]
      
      this.recordMetric('FID', {
        value: firstInput.processingStart - firstInput.startTime,
        eventType: firstInput.name,
        timestamp: Date.now()
      })
    })
    
    observer.observe({ entryTypes: ['first-input'] })
    this.observers.set('fid', observer)
  }
  
  // Cumulative Layout Shift
  observeCLS() {
    let clsValue = 0
    
    const observer = new PerformanceObserver((list) => {
      for (const entry of list.getEntries()) {
        if (!entry.hadRecentInput) {
          clsValue += entry.value
        }
      }
      
      this.recordMetric('CLS', {
        value: clsValue,
        timestamp: Date.now()
      })
    })
    
    observer.observe({ entryTypes: ['layout-shift'] })
    this.observers.set('cls', observer)
  }
  
  // 路由性能监控
  measureRouteChange(from, to) {
    const startTime = performance.now()
    
    return {
      end: () => {
        const duration = performance.now() - startTime
        this.recordMetric('RouteChange', {
          from: from.path,
          to: to.path,
          duration,
          timestamp: Date.now()
        })
      }
    }
  }
  
  // 组件渲染性能
  measureComponentRender(componentName) {
    const startTime = performance.now()
    
    return {
      end: () => {
        const duration = performance.now() - startTime
        this.recordMetric('ComponentRender', {
          component: componentName,
          duration,
          timestamp: Date.now()
        })
      }
    }
  }
  
  // API请求性能
  measureApiCall(url, method) {
    const startTime = performance.now()
    
    return {
      end: (response) => {
        const duration = performance.now() - startTime
        this.recordMetric('ApiCall', {
          url,
          method,
          duration,
          status: response.status,
          timestamp: Date.now()
        })
      }
    }
  }
  
  recordMetric(name, data) {
    if (!this.metrics.has(name)) {
      this.metrics.set(name, [])
    }
    
    this.metrics.get(name).push(data)
    
    // 上报到监控平台
    this.reportToAnalytics(name, data)
  }
  
  reportToAnalytics(name, data) {
    // 这里可以接入你的监控平台
    if (window.gtag) {
      window.gtag('event', name, {
        custom_parameter_1: data.value,
        custom_parameter_2: data.timestamp
      })
    }
    
    // 或者发送到自己的监控服务
    if (process.env.NODE_ENV === 'production') {
      fetch('/api/metrics', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ metric: name, data })
      }).catch(() => {
        // 静默失败，不影响用户体验
      })
    }
  }
  
  getMetrics(name) {
    return this.metrics.get(name) || []
  }
  
  getAverageMetric(name) {
    const metrics = this.getMetrics(name)
    if (!metrics.length) return 0
    
    const sum = metrics.reduce((acc, metric) => acc + metric.value, 0)
    return sum / metrics.length
  }
  
  destroy() {
    this.observers.forEach(observer => observer.disconnect())
    this.observers.clear()
    this.metrics.clear()
  }
}

export const performanceMonitor = new PerformanceMonitor()

// composables/usePerformance.js
import { ref, onMounted, onUpdated, onUnmounted, getCurrentInstance } from 'vue'
import { performanceMonitor } from '@/utils/performance'

export function usePerformance(componentName) {
  const instance = getCurrentInstance()
  const renderTimes = ref([])
  const updateCount = ref(0)
  
  let mountStartTime = 0
  let updateStartTime = 0
  
  onMounted(() => {
    const mountTime = performance.now() - mountStartTime
    renderTimes.value.push({
      type: 'mount',
      duration: mountTime,
      timestamp: Date.now()
    })
    
    performanceMonitor.recordMetric('ComponentMount', {
      component: componentName || instance?.type.name || 'Unknown',
      duration: mountTime,
      timestamp: Date.now()
    })
  })
  
  onUpdated(() => {
    updateCount.value++
    
    if (updateStartTime > 0) {
      const updateTime = performance.now() - updateStartTime
      renderTimes.value.push({
        type: 'update',
        duration: updateTime,
        timestamp: Date.now()
      })
      
      performanceMonitor.recordMetric('ComponentUpdate', {
        component: componentName || instance?.type.name || 'Unknown',
        duration: updateTime,
        updateCount: updateCount.value,
        timestamp: Date.now()
      })
    }
  })
  
  // 在每次更新前记录开始时间
  const recordUpdateStart = () => {
    updateStartTime = performance.now()
  }
  
  // 记录挂载开始时间
  mountStartTime = performance.now()
  
  onUnmounted(() => {
    // 清理性能数据
    renderTimes.value = []
    updateCount.value = 0
  })
  
  return {
    renderTimes: readonly(renderTimes),
    updateCount: readonly(updateCount),
    recordUpdateStart
  }
}

// composables/useOptimizedData.js
import { ref, shallowRef, computed, readonly, markRaw } from 'vue'

export function useOptimizedData() {
  // 1. 大型数据集使用shallowRef
  const largeDataset = shallowRef([])
  
  // 2. 不需要响应式的数据使用markRaw
  const staticConfig = markRaw({
    apiEndpoints: {
      users: '/api/users',
      products: '/api/products'
    },
    constants: {
      pageSize: 20,
      maxRetries: 3
    }
  })
  
  // 3. 计算属性优化 - 避免重复计算
  const expensiveComputed = computed(() => {
    // 使用闭包缓存昂贵的计算结果
    let cache = null
    let lastInput = null
    
    return (input) => {
      if (input === lastInput && cache !== null) {
        return cache
      }
      
      // 模拟昂贵的计算
      cache = input.map(item => ({
        ...item,
        processed: heavyProcessing(item)
      }))
      
      lastInput = input
      return cache
    }
  })
  
  // 4. 分页数据优化
  const paginatedData = computed(() => {
    const { page, pageSize } = pagination.value
    const start = (page - 1) * pageSize
    const end = start + pageSize
    
    // 只对当前页数据进行响应式处理
    return largeDataset.value.slice(start, end)
  })
  
  // 5. 树形数据扁平化处理
  const flattenTree = (tree) => {
    const flatMap = new Map()
    
    const traverse = (node, parent = null) => {
      flatMap.set(node.id, { ...node, parent })
      if (node.children) {
        node.children.forEach(child => traverse(child, node.id))
      }
    }
    
    tree.forEach(node => traverse(node))
    return flatMap
  }
  
  return {
    largeDataset,
    staticConfig: readonly(staticConfig),
    expensiveComputed,
    paginatedData,
    flattenTree
  }
}

function heavyProcessing(item) {
  // 模拟CPU密集型操作
  let result = 0
  for (let i = 0; i < 1000000; i++) {
    result += item.value * Math.random()
  }
  return result
}

<!-- components/VirtualList.vue -->
<template>
  <div 
    ref="containerRef"
    class="virtual-list"
    :style="{ height: containerHeight + 'px' }"
    @scroll="handleScroll"
  >
    <div 
      class="virtual-list__phantom"
      :style="{ height: totalHeight + 'px' }"
    ></div>
    
    <div 
      class="virtual-list__content"
      :style="{ transform: `translateY(${offsetY}px)` }"
    >
      <div
        v-for="item in visibleItems"
        :key="getItemKey(item)"
        class="virtual-list__item"
        :style="{ height: itemHeight + 'px' }"
      >
        <slot :item="item" :index="item.index">
          {{ item.data }}
        </slot>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'

const props = defineProps({
  items: {
    type: Array,
    required: true
  },
  
  itemHeight: {
    type: Number,
    default: 50
  },
  
  containerHeight: {
    type: Number,
    default: 400
  },
  
  overscan: {
    type: Number,
    default: 5
  },
  
  getItemKey: {
    type: Function,
    default: (item) => item.id || item.index
  }
})

const containerRef = ref(null)
const scrollTop = ref(0)

// 计算属性
const totalHeight = computed(() => props.items.length * props.itemHeight)

const visibleCount = computed(() => 
  Math.ceil(props.containerHeight / props.itemHeight)
)

const startIndex = computed(() => 
  Math.max(0, Math.floor(scrollTop.value / props.itemHeight) - props.overscan)
)

const endIndex = computed(() => 
  Math.min(props.items.length - 1, startIndex.value + visibleCount.value + props.overscan * 2)
)

const offsetY = computed(() => startIndex.value * props.itemHeight)

const visibleItems = computed(() => {
  const items = []
  for (let i = startIndex.value; i <= endIndex.value; i++) {
    if (props.items[i]) {
      items.push({
        ...props.items[i],
        index: i
      })
    }
  }
  return items
})

// 滚动处理
const handleScroll = (event) => {
  scrollTop.value = event.target.scrollTop
}

// 滚动到指定索引
const scrollToIndex = (index) => {
  if (containerRef.value) {
    const targetScrollTop = index * props.itemHeight
    containerRef.value.scrollTop = targetScrollTop
  }
}

// 滚动到顶部
const scrollToTop = () => {
  scrollToIndex(0)
}

// 滚动到底部
const scrollToBottom = () => {
  scrollToIndex(props.items.length - 1)
}

defineExpose({
  scrollToIndex,
  scrollToTop,
  scrollToBottom
})
</script>

<style scoped>
.virtual-list {
  position: relative;
  overflow-y: auto;
}

.virtual-list__phantom {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.virtual-list__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.virtual-list__item {
  box-sizing: border-box;
}
</style>

// composables/useLazyLoad.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useLazyLoad(options = {}) {
  const {
    rootMargin = '50px',
    threshold = 0.1,
    fallbackSrc = '/placeholder.jpg',
    errorSrc = '/error.jpg'
  } = options
  
  const observer = ref(null)
  const loadedImages = new Set()
  
  onMounted(() => {
    if ('IntersectionObserver' in window) {
      observer.value = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            loadImage(entry.target)
            observer.value.unobserve(entry.target)
          }
        })
      }, {
        rootMargin,
        threshold
      })
    }
  })
  
  onUnmounted(() => {
    if (observer.value) {
      observer.value.disconnect()
    }
  })
  
  const loadImage = (img) => {
    if (loadedImages.has(img.src)) return
    
    const imageLoader = new Image()
    
    imageLoader.onload = () => {
      img.src = imageLoader.src
      img.classList.add('loaded')
      loadedImages.add(img.src)
    }
    
    imageLoader.onerror = () => {
      img.src = errorSrc
      img.classList.add('error')
    }
    
    imageLoader.src = img.dataset.src
  }
  
  const observe = (element) => {
    if (observer.value && element) {
      // 设置占位图
      if (!element.src) {
        element.src = fallbackSrc
      }
      
      observer.value.observe(element)
    } else {
      // 降级处理：直接加载
      loadImage(element)
    }
  }
  
  return {
    observe
  }
}

// 指令形式使用
export const lazyLoadDirective = {
  mounted(el, binding) {
    const { observe } = useLazyLoad(binding.value)
    el.dataset.src = binding.value.src || binding.value
    observe(el)
  }
}

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { performanceMonitor } from '@/utils/performance'

// 路由级别的代码分割
const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(
      /* webpackChunkName: "home" */
      '@/views/Home.vue'
    )
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(
      /* webpackChunkName: "dashboard" */
      /* webpackPreload: true */
      '@/views/Dashboard.vue'
    ),
    meta: { requiresAuth: true }
  },
  {
    path: '/reports',
    name: 'Reports',
    component: () => import(
      /* webpackChunkName: "reports" */
      '@/views/Reports.vue'
    ),
    meta: { requiresAuth: true, heavy: true }
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

// 路由性能监控
router.beforeEach((to, from, next) => {
  const measurement = performanceMonitor.measureRouteChange(from, to)
  
  // 对于重型页面，显示加载指示器
  if (to.meta?.heavy) {
    // 显示全局加载状态
    window.$loading?.show()
  }
  
  // 保存测量函数到路由元信息
  to.meta._measurement = measurement
  next()
})

router.afterEach((to) => {
  // 结束路由切换测量
  if (to.meta?._measurement) {
    to.meta._measurement.end()
    delete to.meta._measurement
  }
  
  // 隐藏加载指示器
  if (to.meta?.heavy) {
    window.$loading?.hide()
  }
})

export default router

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 生产环境移除注释和空格
          isProduction: process.env.NODE_ENV === 'production',
          whitespace: 'condense'
        }
      }
    })
  ],
  
  build: {
    // 代码分割策略
    rollupOptions: {
      output: {
        manualChunks: {
          // 将Vue生态相关的包单独打包
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          
          // UI库单独打包
          'ui-vendor': ['element-plus', '@element-plus/icons-vue'],
          
          // 工具库单独打包
          'utils-vendor': ['lodash-es', 'dayjs', 'axios'],
          
          // 图表库单独打包
          'chart-vendor': ['echarts', 'chart.js']
        },
        
        // 为每个chunk生成独立的CSS文件
        assetFileNames: (assetInfo) => {
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].[hash][extname]'
          }
          return 'assets/[name].[hash][extname]'
        },
        
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId
          if (facadeModuleId) {
            const fileName = facadeModuleId.split('/').pop().replace('.vue', '')
            return `js/${fileName}.[hash].js`
          }
          return 'js/[name].[hash].js'
        }
      }
    },
    
    // 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        pure_funcs: ['console.log', 'console.warn']
      }
    },
    
    // 启用gzip压缩
    cssCodeSplit: true,
    sourcemap: false,
    
    // 设置chunk大小警告阈值
    chunkSizeWarningLimit: 1000
  },
  
  // 优化依赖预构建
  optimizeDeps: {
    include: [
      'vue',
      'vue-router',
      'pinia',
      'axios',
      'lodash-es'
    ],
    exclude: [
      '@iconify/json'
    ]
  },
  
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~': resolve(__dirname, 'src'),
      'components': resolve(__dirname, 'src/components'),
      'utils': resolve(__dirname, 'src/utils'),
      'stores': resolve(__dirname, 'src/stores'),
      'views': resolve(__dirname, 'src/views')
    }
  }
})

// composables/useMemoryManager.js
import { onUnmounted, ref } from 'vue'

export function useMemoryManager() {
  const timers = ref(new Set())
  const observers = ref(new Set())
  const eventListeners = ref(new Set())
  const abortControllers = ref(new Set())
  
  // 定时器管理
  const setManagedInterval = (callback, delay) => {
    const id = setInterval(callback, delay)
    timers.value.add(id)
    return id
  }
  
  const setManagedTimeout = (callback, delay) => {
    const id = setTimeout(() => {
      callback()
      timers.value.delete(id)
    }, delay)
    timers.value.add(id)
    return id
  }
  
  const clearManagedTimer = (id) => {
    clearInterval(id)
    clearTimeout(id)
    timers.value.delete(id)
  }
  
  // 观察者管理
  const addObserver = (observer) => {
    observers.value.add(observer)
    return observer
  }
  
  // 事件监听器管理
  const addManagedEventListener = (element, event, handler, options) => {
    element.addEventListener(event, handler, options)
    const listener = { element, event, handler }
    eventListeners.value.add(listener)
    return listener
  }
  
  // AbortController管理
  const createManagedAbortController = () => {
    const controller = new AbortController()
    abortControllers.value.add(controller)
    return controller
  }
  
  // 清理所有资源
  const cleanup = () => {
    // 清理定时器
    timers.value.forEach(id => {
      clearInterval(id)
      clearTimeout(id)
    })
    timers.value.clear()
    
    // 断开观察者
    observers.value.forEach(observer => {
      if (observer.disconnect) observer.disconnect()
      if (observer.unobserve) observer.unobserve()
    })
    observers.value.clear()
    
    // 移除事件监听器
    eventListeners.value.forEach(({ element, event, handler }) => {
      element.removeEventListener(event, handler)
    })
    eventListeners.value.clear()
    
    // 取消请求
    abortControllers.value.forEach(controller => {
      controller.abort()
    })
    abortControllers.value.clear()
  }
  
  // 组件卸载时自动清理
  onUnmounted(cleanup)
  
  return {
    setManagedInterval,
    setManagedTimeout,
    clearManagedTimer,
    addObserver,
    addManagedEventListener,
    createManagedAbortController,
    cleanup
  }
}

// utils/cache.js
class SmartCache {
  constructor(options = {}) {
    this.maxSize = options.maxSize || 100
    this.defaultTTL = options.defaultTTL || 5 * 60 * 1000 // 5分钟
    this.cache = new Map()
    this.timers = new Map()
    this.accessCount = new Map()
    this.lastAccess = new Map()
  }
  
  set(key, value, ttl = this.defaultTTL) {
    // 如果缓存已满，删除最少使用的项
    if (this.cache.size >= this.maxSize && !this.cache.has(key)) {
      this.evictLRU()
    }
    
    // 清除旧的定时器
    if (this.timers.has(key)) {
      clearTimeout(this.timers.get(key))
    }
    
    // 设置新值
    this.cache.set(key, value)
    this.accessCount.set(key, (this.accessCount.get(key) || 0) + 1)
    this.lastAccess.set(key, Date.now())
    
    // 设置过期定时器
    if (ttl > 0) {
      const timer = setTimeout(() => {
        this.delete(key)
      }, ttl)
      this.timers.set(key, timer)
    }
    
    return value
  }
  
  get(key) {
    if (!this.cache.has(key)) {
      return undefined
    }
    
    // 更新访问统计
    this.accessCount.set(key, (this.accessCount.get(key) || 0) + 1)
    this.lastAccess.set(key, Date.now())
    
    return this.cache.get(key)
  }
  
  delete(key) {
    if (this.timers.has(key)) {
      clearTimeout(this.timers.get(key))
      this.timers.delete(key)
    }
    
    this.cache.delete(key)
    this.accessCount.delete(key)
    this.lastAccess.delete(key)
  }
  
  // LRU淘汰策略
  evictLRU() {
    let lruKey = null
    let lruTime = Infinity
    
    for (const [key, time] of this.lastAccess) {
      if (time < lruTime) {
        lruTime = time
        lruKey = key
      }
    }
    
    if (lruKey) {
      this.delete(lruKey)
    }
  }
  
  clear() {
    this.timers.forEach(timer => clearTimeout(timer))
    this.cache.clear()
    this.timers.clear()
    this.accessCount.clear()
    this.lastAccess.clear()
  }
  
  // 获取缓存统计信息
  getStats() {
    return {
      size: this.cache.size,
      maxSize: this.maxSize,
      accessCount: Array.from(this.accessCount.entries()),
      lastAccess: Array.from(this.lastAccess.entries())
    }
  }
}

export const apiCache = new SmartCache({ maxSize: 50, defaultTTL: 5 * 60 * 1000 })
export const componentCache = new SmartCache({ maxSize: 20, defaultTTL: 10 * 60 * 1000 })