个人博客性能调优实战：0ms 瞬间加载

'use client';

import { useState, useEffect } from 'react';

export function useLocalSWR<T>(
  cacheKey: string,
  fetcher: () => Promise<T>,
  options = { revalidateOnMount: true }
) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);
  const [isValidating, setIsValidating] = useState(true);

  // 1. 客户端挂载后，立即恢复本地缓存
  useEffect(() => {
    if (typeof window === 'undefined') return;
    
    const cached = localStorage.getItem(cacheKey);
    if (cached) {
      try {
        setData(JSON.parse(cached));
      } catch (e) {
        localStorage.removeItem(cacheKey);
      }
    }
  }, [cacheKey]);

  // 2. 静默发起请求校验并更新
  useEffect(() => {
    let active = true;

    async function revalidate() {
      setIsValidating(true);
      try {
        const freshData = await fetcher();
        if (!active) return;

        const freshString = JSON.stringify(freshData);
        const cachedString = localStorage.getItem(cacheKey);

        if (freshString !== cachedString) {
          setData(freshData);
          localStorage.setItem(cacheKey, freshString);
        }
      } catch (err: any) {
        if (active) setError(err);
      } finally {
        if (active) setIsValidating(false);
      }
    }

    if (options.revalidateOnMount) {
      revalidate();
    }

    return () => {
      active = false;
    };
  }, [cacheKey, fetcher, options.revalidateOnMount]);

  return { data, error, isValidating };
}

import { createLowlight } from 'lowlight';
import javascript from 'highlight.js/lib/languages/javascript';
import typescript from 'highlight.js/lib/languages/typescript';
import python from 'highlight.js/lib/languages/python';
...

// 仅注册博客用得到的常用语言
const lowlight = createLowlight({
  js: javascript,
  javascript,
  ts: typescript,
  typescript,
  py: python,
  python,
  ...
});

// 手写简单的 HAST 树递归遍历，避免引入额外的 node_modules 辅助库
function walk(node: any, callback: (node: any, parent: any) => void, parent?: any) {
  callback(node, parent);
  if (node.children && Array.isArray(node.children)) {
    for (const child of node.children) {
      walk(child, callback, node);
    }
  }
}

export default function rehypeCustomHighlight() {
  return function (tree: any) {
    walk(tree, (node: any, parent: any) => {
      if (node.tagName !== 'code' || !parent || parent.tagName !== 'pre') return;

      const className = node.properties?.className || [];
      const langClass = className.find((cls: any) => typeof cls === 'string' && cls.startsWith('language-'));
      const lang = langClass ? langClass.slice(9) : null;

      if (!lang) return;

      try {
        const text = node.children[0]?.value || '';
        const result = lowlight.highlight(lang, text, { prefix: 'hljs-' });
        if (result.children && result.children.length > 0) {
          node.children = result.children;
        }
        if (!node.properties.className.includes('hljs')) {
          node.properties.className.unshift('hljs');
        }
      } catch (err) {
        // 遇到未知语言静默跳过高亮
      }
    });
  };
}

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
/>