性能优化模式

Vue 3 前端优化

<!-- 1. v-memo — 防止不必要的重渲染 -->
<template>
  <div v-memo="[item.id, item.name]">
    {{ item.name }}
  </div>
</template>

<!-- 2. computed — 缓存计算结果 -->
<script setup>
const sorted = computed(() => [...items.value].sort(compareFn))

// 3. shallowRef — 大型对象避免深层响应
const heavyData = shallowRef(null)

// 4. 异步组件 — 代码分割
const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue'))

// 5. 虚拟化 — 大列表
import { useVirtualizer } from '@tanstack/vue-virtual'

// 6. keep-alive — 页面缓存
// <keep-alive :include="cachedViews"><router-view /></keep-alive>
</script>

Vite 构建优化

// vite.config.ts
export default defineConfig({
  build: {
    target: 'es2015',
    minify: 'terser',
    terserOptions: {
      compress: { drop_console: true, drop_debugger: true },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'pinia'],
          // 仅管理端：'element-plus': ['element-plus'],
          'echarts': ['echarts'],
        },
      },
    },
  },
})

Hyperf 后端优化

// 1. 协程并发 — 并行无依赖 I/O
$parallel = new Parallel(10);
$parallel->add(fn() => $this->orderService->getStatistics($id));
$parallel->add(fn() => $this->paymentService->getPayments($id));
[$stats, $payments] = $parallel->wait();

// 2. 连接池调优
'pool' => [
    'min_connections' => 5,
    'max_connections' => 50,
    'wait_timeout'    => 3.0,
],

// 3. 缓存注解
#[Cacheable(prefix: 'user', ttl: 3600)]
public function getById(int $id): ?User { ... }

数据库优化

-- 复合索引：遵循最左前缀原则
CREATE INDEX idx_orders_status_created ON production_orders(status, created_at);

-- 覆盖索引：避免回表
CREATE INDEX idx_orders_cover ON production_orders(status, total_amount, paid_amount);

-- 游标分页（百万级数据）
SELECT * FROM orders WHERE id > ? ORDER BY id ASC LIMIT 20;

2.0 KiB Raw Blame History

性能优化模式

Vue 3 前端优化

Vite 构建优化

Hyperf 后端优化

数据库优化

2.0 KiB

Raw Blame History