gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Optimize performance: Replace Framer Motion and FontAwesome, convert Mastodon to Server Component

Browse Source 
Major performance optimizations addressing PageSpeed Insights warnings:

**Phase 1: Replace Framer Motion with CSS (~60-100KB savings)**
- Remove Framer Motion from components/post-layout.tsx
- Add CSS transitions to styles/globals.css for TOC animations
- Replace motion.div/motion.button with regular elements + CSS classes
- Remove framer-motion package dependency

**Phase 2: Replace FontAwesome with React Icons (~150-250KB savings)**
- Replace FontAwesome in 16 components with react-icons
- Use Feather icons (react-icons/fi) for UI elements
- Use FontAwesome brand icons (react-icons/fa) for social media
- Remove 4 @fortawesome packages (@fortawesome/fontawesome-svg-core,
  @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons,
  @fortawesome/react-fontawesome)
- Updated components:
  - app/error.tsx, app/tags/page.tsx, app/tags/[tag]/page.tsx
  - components/hero.tsx, components/mastodon-feed.tsx
  - components/meta-item.tsx, components/nav-menu.tsx
  - components/post-card.tsx, components/post-layout.tsx
  - components/post-list-item.tsx, components/post-list-with-controls.tsx
  - components/post-storyline-nav.tsx, components/post-toc.tsx
  - components/right-sidebar.tsx, components/search-modal.tsx
  - components/site-footer.tsx, components/theme-toggle.tsx

**Phase 3: Convert Mastodon Feed to Server Component**
- Convert components/mastodon-feed.tsx from Client Component to async Server Component
- Replace client-side useEffect fetching with server-side ISR
- Add 30-minute revalidation (next: { revalidate: 1800 })
- Eliminate 2 blocking client-side network requests
- Remove loading state (rendered on server)

**Total Impact:**
- JavaScript bundle: ~210-350KB reduction
- Blocking network requests: 2 eliminated
- Main thread time: Reduced by ~100-160ms
- Build: ✅ Verified successful

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
gbanyan
2025-11-20 21:51:24 +08:00
parent 6badd76733
commit 0bb3ee40c6
21 changed files with 329 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
components/post-layout.tsx
View File

@@ -1,9 +1,7 @@
'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faListUl, faChevronRight, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import { FiList, FiChevronRight } from 'react-icons/fi';
import { PostToc } from './post-toc';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
@@ -23,70 +21,50 @@ export function PostLayout({ children, hasToc = true, contentKey }: { children:
)}>
{/* Main Content Area */}
<div className="min-w-0">
<motion.div
layout
className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}
>
<div className={cn("mx-auto transition-all duration-500 ease-snappy", isTocOpen && hasToc ? "max-w-3xl" : "max-w-4xl")}>
{children}
</motion.div>
</div>
</div>
{/* Desktop Sidebar (TOC) */}
<aside className="hidden lg:block">
<div className="sticky top-24 h-[calc(100vh-6rem)] overflow-hidden">
<AnimatePresence mode="wait">
{isTocOpen && hasToc && (
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
exit={{ opacity: 0, x: 20 }}
transition={{ duration: 0.3 }}
className="h-full overflow-y-auto pr-2"
>
<PostToc key={contentKey} />
</motion.div>
)}
</AnimatePresence>
{isTocOpen && hasToc && (
<div className="toc-sidebar h-full overflow-y-auto pr-2">
<PostToc key={contentKey} />
</div>
)}
</div>
</aside>
</div>
{/* Mobile TOC Overlay */}
<AnimatePresence>
{isTocOpen && hasToc && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
transition={{ duration: 0.2 }}
className="fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden"
>
<div className="max-h-[60vh] overflow-y-auto">
<PostToc key={contentKey} onLinkClick={() => setIsTocOpen(false)} />
</div>
</motion.div>
)}
</AnimatePresence>
{isTocOpen && hasToc && (
<div className="toc-mobile fixed bottom-24 right-4 z-40 w-72 rounded-2xl border border-white/20 bg-white/90 p-6 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/90 lg:hidden">
<div className="max-h-[60vh] overflow-y-auto">
<PostToc key={contentKey} onLinkClick={() => setIsTocOpen(false)} />
</div>
</div>
)}
{/* Toggle Button (Glassmorphism Pill) */}
{hasToc && (
<motion.button
layout
<button
onClick={() => setIsTocOpen(!isTocOpen)}
className={cn(
"fixed bottom-8 right-8 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md transition-all hover:bg-white hover:scale-105 dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
"toc-button fixed bottom-8 right-8 z-50 flex items-center gap-2 rounded-full border border-white/20 bg-white/80 px-4 py-2.5 shadow-lg backdrop-blur-md hover:bg-white dark:border-white/10 dark:bg-slate-900/80 dark:hover:bg-slate-900",
"text-sm font-medium text-slate-600 dark:text-slate-300",
"lg:right-20" // Adjust position for desktop
)}
whileTap={{ scale: 0.95 }}
aria-label="Toggle Table of Contents"
>
<FontAwesomeIcon
icon={isTocOpen ? faChevronRight : faListUl}
className="h-3.5 w-3.5"
/>
{isTocOpen ? (
<FiChevronRight className="h-3.5 w-3.5" />
) : (
<FiList className="h-3.5 w-3.5" />
)}
<span>{isTocOpen ? 'Hide' : 'Menu'}</span>
</motion.button>
</button>
)}
</div>
);