1
const CACHE_KEY = "cached:totals";
2
const CACHE_TTL = 300; // 5分钟缓存
3

4
export const GET: APIRoute = async () => {
5
  // 尝试从Redis获取缓存
6
  const cached = await redis.get(CACHE_KEY);
7

8
  if (cached) {
9
    return new Response(cached, {
10
      headers: {
11
        'X-Cache': 'HIT',
12
        'Cache-Control': 'public, max-age=60, s-maxage=300, stale-while-revalidate=600',
13
      }
14
    });
15
  }
16

17
  // 缓存未命中,查询数据库
18
  const data = await fetchFromDatabase();
19

20
  // 写入Redis缓存
21
  await redis.set(CACHE_KEY, JSON.stringify(data), { ex: CACHE_TTL });
22

23
  return new Response(JSON.stringify(data), {
24
    headers: {
25
      'X-Cache': 'MISS',
26
      'Cache-Control': 'public, max-age=60, s-maxage=300, stale-while-revalidate=600',
27
    }
28
  });
29
};

1
export default defineConfig({
2
  vite: {
3
    build: {
4
      // 使用 Terser 压缩 JS
5
      cssMinify: 'lightningcss',
6
      minify: 'terser',
7
      terserOptions: {
8
        compress: {
9
          drop_console: true,    // 移除 console
10
          drop_debugger: true,   // 移除 debugger
11
        },
12
      },
13

14
      // 智能代码分割
15
      rollupOptions: {
16
        output: {
17
          manualChunks(id) {
18
            // 第三方库单独打包
19
            if (id.includes('node_modules')) {
20
              if (id.includes('@swup/astro')) return 'swup-core';
21
              if (id.includes('svelte')) return 'vendor';
22
              return 'vendor-other';
23
            }
24
          },
25
        },
26
      },
27
    },
28
  },
29

30
  // 图片优化
31
  image: {
32
    service: {
33
      entrypoint: 'astro/assets/services/sharp'
34
    },
35
  },
36

37
  // HTML压缩
38
  compressHTML: true,
39
});

1
export function setupLazyLoad(
2
  selector: string = 'img[data-src]',
3
  options: IntersectionObserverInit = {}
4
) {
5
  // 检查浏览器支持
6
  if (!('IntersectionObserver' in window)) {
7
    // 降级方案:直接加载所有图片
8
    const images = document.querySelectorAll(selector);
9
    images.forEach(img => {
10
      const imgElement = img as HTMLImageElement;
11
      if (imgElement.dataset.src) {
12
        imgElement.src = imgElement.dataset.src;
13
      }
14
    });
15
    return;
16
  }
17

18
  const defaultOptions: IntersectionObserverInit = {
19
    root: null,
20
    rootMargin: '50px',
21
    threshold: 0.01,
22
    ...options,
23
  };
24

25
  const imageObserver = new IntersectionObserver((entries) => {
26
    entries.forEach(entry => {
27
      if (entry.isIntersecting) {
28
        const img = entry.target as HTMLImageElement;
29

30
        // 加载图片
31
        if (img.dataset.src) {
32
          img.src = img.dataset.src;
33
        }
34
        if (img.dataset.srcset) {
35
          img.srcset = img.dataset.srcset;
36
        }
37

38
        // 添加加载类
39
        img.classList.add('lazy-loaded');
40

41
        // 停止观察
42
        imageObserver.unobserve(img);
43
      }
44
    });
45
  }, defaultOptions);
46

47
  // 观察所有图片
48
  const images = document.querySelectorAll(selector);
49
  images.forEach(img => imageObserver.observe(img));
50
}

1
---
2
const isProduction = import.meta.env.PROD;
3
---
4

5
{isProduction && (
6
  <script>
7
    // Web Vitals 监控
8
    if ('PerformanceObserver' in window) {
9
      const vitals = {};
10

11
      // LCP - 最大内容绘制
12
      new PerformanceObserver((list) => {
13
        const entries = list.getEntries();
14
        const lastEntry = entries[entries.length - 1];
15
        vitals.lcp = lastEntry.renderTime || lastEntry.loadTime;
16
      }).observe({ type: 'largest-contentful-paint', buffered: true });
17

18
      // FID - 首次输入延迟
19
      new PerformanceObserver((list) => {
20
        const entries = list.getEntries();
21
        vitals.fid = entries[0].processingStart - entries[0].startTime;
22
      }).observe({ type: 'first-input', buffered: true });
23

24
      // CLS - 累积布局偏移
25
      new PerformanceObserver((list) => {
26
        let cls = 0;
27
        for (const entry of list.getEntries()) {
28
          if (!entry.hadRecentInput) {
29
            cls += entry.value;
30
          }
31
        }
32
        vitals.cls = cls;
33
      }).observe({ type: 'layout-shift', buffered: true });
34

35
      // 保存到全局对象
36
      window.__performanceVitals = vitals;
37

38
      // 页面卸载时上报(可选)
39
      window.addEventListener('beforeunload', () => {
40
        console.log('Performance Vitals:', vitals);
41
      });
42
    }
43
  </script>
44
)}