현황
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)
현황
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-pretty-code또는@shikijs/rehype)으로 이전 → 클라이언트 JS 0PrismAsyncLight+ 실제 사용 언어만registerLanguage임팩트 / 난이도
임팩트 상 / 난이도 중
🤖 코드베이스 조사 기반 작성 (Claude Code)