博客卡顿问题分析与优化

// backend/ssg.ts
// 缓存所有文章数据，避免重复文件读取
let _allPostsCache: any[] | null = null
 
const _getAllPostsCache = cache(async () => {
  if (_allPostsCache) return _allPostsCache
 
  const files = await getPathAll(ARTICLE_ROOT)
  
  // 并发处理文件以提升性能
  const postPromises = files.map(async (file) => {
    const fp = path.join(file.dir, file.name)
    const post = await getPostFromFp(fp)
    // 处理文章数据...
  })
 
  const results = await Promise.all(postPromises)
  _allPostsCache = results.filter(Boolean)
  
  return _allPostsCache
})

// app/(text)/tech/page.tsx
export async function generateStaticParams() {
  return [{ category: 'tech' }]
}
 
export default async function Page() {
  preloadList('tech')  // 预加载数据
  const articles = await getFileCatPosts('tech')
  return <ArticleList articles={articles} />
}

// components/Tab.tsx
// 优化前：使用 router.push
const goRouter = useCallback((title) => {
  router.push(title)
}, [])
 
// 优化后：使用 Link 组件
<Link
  href={title}
  prefetch={true}  // 启用预取
  className="transition-all duration-200"
>
  {title.toUpperCase()}
</Link>

// app/(text)/loading.tsx
export default function Loading() {
  return (
    <div className="animate-pulse space-y-8">
      {[...Array(5)].map((_, i) => (
        <div key={i} className="my-10">
          <div className="flex justify-between mb-3">
            <div className="h-6 bg-slate-200 rounded w-3/5"></div>
            <div className="h-4 bg-slate-200 rounded w-20"></div>
          </div>
          <div className="space-y-2">
            <div className="h-4 bg-slate-200 rounded w-full"></div>
            <div className="h-4 bg-slate-200 rounded w-4/5"></div>
          </div>
        </div>
      ))}
    </div>
  )
}

// app/(text)/template.tsx
export default function Template({ children }) {
  const [isVisible, setIsVisible] = useState(false)
 
  useEffect(() => {
    setIsVisible(true)
  }, [])
 
  return (
    <div className={`transition-all duration-300 ${
      isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
    }`}>
      {children}
    </div>
  )
}

// 添加即时视觉反馈
const [isPending, startTransition] = useTransition()
const [pendingPath, setPendingPath] = useState('')
 
<Link
  className={`
    transition-all duration-200 ease-in-out
    ${isLoading ? 'scale-95 opacity-70' : 'scale-100'}
    ${isActive 
      ? 'bg-yellow-200 dark:bg-gray-700' 
      : 'hover:bg-gray-100 hover:scale-[1.02]'}
  `}
>
  {title}
  {isLoading && (
    <span className="ml-2 w-3 h-3 border rounded-full animate-spin" />
  )}
</Link>

// components/MDX/MDXContentSuspense.tsx
const MDXWrapClient = dynamic(() => import('./MDXWrapClient'), {
  ssr: false,  // 避免水合问题
  loading: () => (
    <div className="animate-pulse space-y-6">
      <div className="h-8 bg-slate-200 rounded w-3/4"></div>
      {/* 更多骨架屏内容 */}
    </div>
  )
})

Route (app)                    Size     First Load JS
├ ○ /life                      1.37 kB  118 kB
├ ● /life/[slug]              1.44 kB  106 kB  
├ ○ /tech                      1.37 kB  118 kB
└ ● /tech/[slug]              1.44 kB  106 kB
 
○ (Static)  预渲染为静态内容
● (SSG)     预渲染为静态 HTML

/* 优化前：纯白背景，对比度过强 */
--background-color: #ffffff;
--text-color: #002b36;
 
/* 优化后：柔和配色，更好的视觉层次 */
--background-color: #fafafa;
--text-color: #1a1a1a;
--h1-color: #2563eb;
--link: #4338ca;

// 文章列表悬停效果
<Link className="hover:text-blue-600 hover:opacity-70 hover:scale-[1.02]">
  {post.title}
</Link>
 
// Tab active 状态
isActive ? 'bg-yellow-200 text-gray-800' : 'hover:bg-gray-100'