react-vite-best-practices은(는) 무엇을 하나요?
React 및 Vite 성능 최적화 가이드라인. Vite로 구축된 React 컴포넌트를 작성, 검토 또는 최적화할 때 사용합니다. Vite 구성, 빌드 최적화, 코드 분할, 지연 로딩, HMR, 번들 크기 또는 React 성능과 관련된 작업에서 트리거됩니다.
Vite 구성 최적화
vite.config.js에서build.rollupOptions.output.manualChunks를 사용하여 수동 청크 분할을 구성합니다.build.sourcemap을false로 설정하여 프로덕션 빌드에서 소스맵 생성을 비활성화합니다.build.minify를'esbuild'또는'terser'로 설정하여 코드 압축을 최적화합니다.build.cssCodeSplit을true로 설정하여 CSS를 코드 분할합니다.- 환경 변수
VITE_*접두사를 사용하여 빌드 시 변수를 주입합니다.
코드 분할 및 지연 로딩
React.lazy()와Suspense를 사용하여 컴포넌트를 동적으로 가져옵니다.- 라우트 기반 코드 분할을 위해
react-router-dom과 함께lazy()를 사용합니다. - 조건부 렌더링이 필요한 큰 라이브러리(예: 차트, 에디터)는 동적
import()로 로드합니다. import()구문을 사용하여 모듈을 조건부로 로드하고, 필요할 때만 번들에 포함시킵니다.
React 성능 최적화
React.memo를 사용하여 동일한 props로 리렌더링을 방지합니다.useMemo와useCallback을 사용하여 불필요한 계산과 함수 생성을 최적화합니다.useEffect에서 불필요한 종속성을 제거하고, 클린업 함수를 항상 제공합니다.useRef를 사용하여 DOM 직접 조작이나 렌더링 사이의 값을 저장합니다.useContext를 사용할 때 컨텍스트 값을 메모이제이션하여 불필요한 리렌더링을 방지합니다.
빌드 최적화
vite-plugin-inspect를 사용하여 플러그인 처리 과정을 분석합니다.vite-bundle-visualizer를 사용하여 번들 크기를 시각화하고 분석합니다.rollup-plugin-visualizer를 사용하여 번들 구조를 확인합니다.- 프로덕션 빌드에서
build.target을 적절히 설정하여 트랜스파일 범위를 최적화합니다. build.reportCompressedSize를 비활성화하여 빌드 속도를 향상시킵니다.
HMR (Hot Module Replacement)
- 빠른 HMR을 위해 가능하면 상태 저장 컴포넌트보다 순수 함수형 컴포넌트를 사용합니다.
import.meta.hotAPI를 사용하여 사용자 정의 HMR 처리를 구현합니다.- HMR 경계 지점에
import.meta.hot.accept()를 추가하여 모듈 업데이트를 수용합니다. - CSS 모듈과 같은 가상 모듈을 사용하여 HMR 성능을 개선합니다.
환경별 구성
.env.development,.env.production파일을 사용하여 환경별 변수를 관리합니다.- Vite의
define옵션을 사용하여 전역 상수를 정의합니다. import.meta.env객체를 사용하여 환경 변수에 접근합니다.
테스트 및 디버깅
- Vitest를 사용하여 단위 테스트와 통합 테스트를 작성합니다.
@vitejs/plugin-react-swc를 사용하여 빠른 컴파일과 함께 테스트를 실행합니다.- 브라우저 개발자 도구에서 React DevTools를 사용하여 컴포넌트 성능을 모니터링합니다.
vite-plugin-checker를 사용하여 TypeScript 및 ESLint 오류를 빌드 시 확인합니다.