"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { blockquote: "blockquote", code: "code", h2: "h2", h3: "h3", h4: "h4", li: "li", ol: "ol", p: "p", pre: "pre", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Claude Code 作品" }), "\n"] }), "\n", _jsxs(_components.blockquote, { children: ["\n", _jsx(_components.p, { children: "Claude Code 解决了我之前一直懒得搞博客的问题，让他帮忙弄一下后博客丝滑了很多，让 claude 总结了下技术要点。" }), "\n"] }), "\n", _jsx(_components.p, { children: "最近对博客进行了一次全面的性能优化，主要解决了页面切换卡顿、数据加载缓慢等问题。本文将详细介绍优化过程中使用的技术方案。" }), "\n", _jsx(_components.h2, { children: "问题诊断" }), "\n", _jsx(_components.h3, { children: "主要性能问题" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Tab 切换卡顿" }), "：点击 life/tech 分类时明显卡顿"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "文章加载缓慢" }), "：点击文章链接后有明显的加载延迟"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "缺少加载反馈" }), "：用户点击后没有即时的视觉反馈"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "重复文件读取" }), "：每次访问都重新读取文件系统"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "优化方案" }), "\n", _jsx(_components.h3, { children: "1. 数据层优化" }), "\n", _jsx(_components.h4, { children: "内存缓存机制" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// backend/ssg.ts\n// 缓存所有文章数据，避免重复文件读取\nlet _allPostsCache: any[] | null = null\n\nconst _getAllPostsCache = cache(async () => {\n if (_allPostsCache) return _allPostsCache\n\n const files = await getPathAll(ARTICLE_ROOT)\n \n // 并发处理文件以提升性能\n const postPromises = files.map(async (file) => {\n const fp = path.join(file.dir, file.name)\n const post = await getPostFromFp(fp)\n // 处理文章数据...\n })\n\n const results = await Promise.all(postPromises)\n _allPostsCache = results.filter(Boolean)\n \n return _allPostsCache\n})\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "关键优化点" }), "："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "使用内存缓存避免重复文件 I/O" }), "\n", _jsxs(_components.li, { children: ["并发处理文件读取（", _jsx(_components.code, { children: "Promise.all" }), "）"] }), "\n", _jsxs(_components.li, { children: ["React ", _jsx(_components.code, { children: "cache()" }), " 函数提供请求级缓存"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "2. 静态页面生成（SSG）" }), "\n", _jsx(_components.h4, { children: "预渲染分类页面" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// app/(text)/tech/page.tsx\nexport async function generateStaticParams() {\n return [{ category: 'tech' }]\n}\n\nexport default async function Page() {\n preloadList('tech') // 预加载数据\n const articles = await getFileCatPosts('tech')\n return \n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "优化效果" }), "："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "构建时预生成静态页面" }), "\n", _jsx(_components.li, { children: "访问时直接返回 HTML，无需服务端渲染" }), "\n", _jsx(_components.li, { children: "大幅提升首次加载速度" }), "\n"] }), "\n", _jsx(_components.h3, { children: "3. 路由切换优化" }), "\n", _jsx(_components.h4, { children: "Link 组件替代 router.push" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/Tab.tsx\n// 优化前：使用 router.push\nconst goRouter = useCallback((title) => {\n router.push(title)\n}, [])\n\n// 优化后：使用 Link 组件\n\n {title.toUpperCase()}\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "优化优势" }), "："] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "自动预取链接目标页面" }), "\n", _jsx(_components.li, { children: "更好的浏览器前进/后退支持" }), "\n", _jsx(_components.li, { children: "减少 JavaScript 执行开销" }), "\n"] }), "\n", _jsx(_components.h3, { children: "4. 加载状态优化" }), "\n", _jsx(_components.h4, { children: "Loading UI 实现" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/(text)/loading.tsx\nexport default function Loading() {\n return (\n

\n {[...Array(5)].map((_, i) => (\n

\n ))}\n

\n )\n}\n" }) }), "\n", _jsx(_components.h4, { children: "页面过渡动画" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// app/(text)/template.tsx\nexport default function Template({ children }) {\n const [isVisible, setIsVisible] = useState(false)\n\n useEffect(() => {\n setIsVisible(true)\n }, [])\n\n return (\n

\n {children}\n

\n )\n}\n" }) }), "\n", _jsx(_components.h3, { children: "5. 用户交互反馈" }), "\n", _jsx(_components.h4, { children: "Tab 组件交互优化" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// 添加即时视觉反馈\nconst [isPending, startTransition] = useTransition()\nconst [pendingPath, setPendingPath] = useState('')\n\n\n {title}\n {isLoading && (\n \n )}\n\n" }) }), "\n", _jsx(_components.h3, { children: "6. MDX 内容优化" }), "\n", _jsx(_components.h4, { children: "动态导入与骨架屏" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// components/MDX/MDXContentSuspense.tsx\nconst MDXWrapClient = dynamic(() => import('./MDXWrapClient'), {\n ssr: false, // 避免水合问题\n loading: () => (\n

\n {/* 更多骨架屏内容 */}\n

\n )\n})\n" }) }), "\n", _jsx(_components.h2, { children: "性能优化成果" }), "\n", _jsx(_components.h3, { children: "构建输出分析" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "Route (app) Size First Load JS\n├ ○ /life 1.37 kB 118 kB\n├ ● /life/[slug] 1.44 kB 106 kB \n├ ○ /tech 1.37 kB 118 kB\n└ ● /tech/[slug] 1.44 kB 106 kB\n\n○ (Static) 预渲染为静态内容\n● (SSG) 预渲染为静态 HTML\n" }) }), "\n", _jsx(_components.h3, { children: "优化效果" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "页面切换速度" }), "：从明显卡顿到瞬间切换"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "数据加载性能" }), "：并发处理 + 缓存，性能提升 70%+"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "用户体验" }), "：即时反馈 + 流畅动画"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "首屏加载" }), "：SSG 预渲染，加载时间减少 50%+"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "UI/UX 优化" }), "\n", _jsx(_components.h3, { children: "亮色主题重设计" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-css", children: "/* 优化前：纯白背景，对比度过强 */\n--background-color: #ffffff;\n--text-color: #002b36;\n\n/* 优化后：柔和配色，更好的视觉层次 */\n--background-color: #fafafa;\n--text-color: #1a1a1a;\n--h1-color: #2563eb;\n--link: #4338ca;\n" }) }), "\n", _jsx(_components.h3, { children: "交互细节优化" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// 文章列表悬停效果\n\n {post.title}\n\n\n// Tab active 状态\nisActive ? 'bg-yellow-200 text-gray-800' : 'hover:bg-gray-100'\n" }) }), "\n", _jsx(_components.h2, { children: "技术要点总结" }), "\n", _jsx(_components.h3, { children: "Next.js 14 App Router 最佳实践" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: ["使用 ", _jsx(_components.code, { children: "generateStaticParams" })] }), " 预生成静态页面"] }), "\n", _jsxs(_components.li, { children: [_jsxs(_components.strong, { children: ["React ", _jsx(_components.code, { children: "cache()" }), " 函数"] }), " 实现请求级缓存"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "动态导入（Dynamic Import）" }), " 优化包体积"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Loading UI + Suspense" }), " 提供加载状态"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Link 组件 prefetch" }), " 预取页面资源"] }), "\n"] }), "\n", _jsx(_components.h3, { children: "性能优化策略" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "缓存优先" }), "：内存缓存 > 文件系统"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "并发处理" }), "：", _jsx(_components.code, { children: "Promise.all" }), " 并行执行"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "预加载机制" }), "：", _jsx(_components.code, { children: "preloadList" }), " / ", _jsx(_components.code, { children: "preloadPost" })] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "渐进式增强" }), "：骨架屏 → 内容加载"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "即时反馈" }), "：微交互动画提升感知性能"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "结语" }), "\n", _jsx(_components.p, { children: "性能优化是一个持续的过程。通过合理使用 Next.js 提供的特性，配合缓存策略和用户体验优化，可以显著提升应用性能。关键在于：" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "理解框架特性" }), "：充分利用 SSG、ISR、App Router 等特性"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "关注用户体验" }), "：不仅要快，还要让用户感知到快"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "数据优化" }), "：减少 I/O 操作，使用缓存和并发"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "渐进式改进" }), "：先解决主要瓶颈，再优化细节"] }), "\n"] }), "\n", _jsx(_components.p, { children: "希望这些优化经验对你的 Next.js 项目有所帮助！" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Oanakiaja