[Perf] 신택스 하이라이터 648KB 클라이언트 번들 제거

[Malloc72P]

현황

apps/blog/src/components/post-detail/post-codeblock-client.tsx:3에서 import { Prism } from 'react-syntax-highlighter'를 사용한다. 빌드 산출 청크 하나가 648KB(전 언어 register 호출 420회 포함)로 단일 최대 청크다. 하이라이팅 결과는 이미 서버 HTML에 SSG로 렌더되는데, 동일한 거대 JS가 하이드레이션용으로 또 전송된다.

문제

모든 포스트 페이지의 First Load JS를 크게 끌어올려 TBT/LCP/모바일 성능을 악화시킨다. 실제 사용 언어는 js/ts/json/bash 정도뿐이다.

제안

• (선호) 하이라이팅을 빌드 타임 rehype 플러그인(shiki: rehype-pretty-code 또는 @shikijs/rehype)으로 이전 → 클라이언트 JS 0
• 또는 PrismAsyncLight + 실제 사용 언어만 registerLanguage

임팩트 / 난이도

임팩트 상 / 난이도 중

---

🤖 코드베이스 조사 기반 작성 (Claude Code)