피드로 돌아가기
Dev.toFrontend
원문 읽기
React Compiler 1.0 도입을 통한 Instagram 렌더링 시간 12% 단축
React Compiler 1.0 + Vite 8: The Right Way to Install After @vitejs/plugin-react v6 Drops Babel
AI 요약
Context
수동 Memoization으로 인한 개발 공수 증가와 런타임 최적화 판단의 어려움이 상존함. Vite 8 및 @vitejs/plugin-react v6 업데이트로 내부 Babel이 oxc로 대체되며 기존 Babel 기반 플러그인 주입 방식의 호환성 결여가 발생함.
Technical Solution
- Build-time 분석을 통한 표현식 단위의 세밀한 Memoization 자동 삽입 구조 설계
- react/compiler-runtime의 slot cache(_c)를 활용한 상태 변경 시에만 연산을 수행하는 최적화 로직 구현
- Vite 8 환경에서 Babel 플러그인 실행을 위해 @rolldown/plugin-babel을 별도로 도입한 파이프라인 구성
- Transform 순서 보장을 위해 babel() 플러그인을 react() 플러그인보다 선행 배치하는 설정 적용
- ESLint 플러그인을 통한 Rules of React 위반 사항을 사전 탐지하여 컴파일러의 무시(skip) 동작 방지
- Next.js의 내장 설정과 수동 Babel 플러그인 간의 중복 컴파일 방지를 위한 단일 설정 원칙 적용
실천 포인트
- Vite 8 사용 시 @rolldown/plugin-babel 설치 및 react() 플러그인 이전 단계에 배치 확인 - 컴파일러 활성화 전 eslint-plugin-react-compiler를 통한 코드 위반 사항 전수 조사 - Next.js 환경에서 experimental.reactCompiler 옵션 사용 시 중복 Babel 플러그인 제거 - 디버깅 효율을 위해 Vite 설정에서 sourcemap: true 활성화 및 logger 옵션 검토