docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
Antigravity Agent
@@ -1,4 +1,4 @@
|
||||
# [[Vite + React 성능 최적화]]
|
||||
# [[Vite + React 성능 최적화|Vite + React 성능 최적화]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Vite와 React 환경에서 애플리케이션의 성능을 최적화하는 것은 초기 로딩 속도를 높이고 런타임 성능을 향상시켜 전반적인 사용자 경험을 개선하는 과정입니다. 개발 환경에서는 기본 ES 모듈(ESM)을, 운영 환경에서는 Rollup을 통한 번들링을 활용하는 Vite의 구조적 이점을 극대화하는 것이 핵심입니다. 주요 최적화 기법으로는 빠른 컴파일을 위한 SWC 도입, 동적 임포트를 통한 코드 분할, `manualChunks`를 활용한 무거운 벤더 라이브러리 분리, 그리고 번들 시각화 도구를 통한 불필요한 의존성 제거 등이 포함됩니다.
|
||||
@@ -26,24 +26,24 @@ Vite와 React 환경에서 애플리케이션의 성능을 최적화하는 것
|
||||
### Related Concepts
|
||||
|
||||
#### [관계 유형 A (아키텍처/기반 기술)]
|
||||
- [[네이티브 ES 모듈(ESM)]]
|
||||
- 네이티브 ES 모듈(ESM)
|
||||
- 연결 이유: Vite가 개발 환경에서 코드 모듈을 서빙하는 방식의 핵심 기반 원리입니다.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 번들러가 전체 앱을 매번 빌드하지 않고 변경된 모듈만 요청/로드함으로써 프로젝트 크기에 상관없이 빠른 HMR과 응답성을 유지하는 메커니즘을 파악할 수 있습니다 [1, 29, 30].
|
||||
|
||||
- [[Rollup]]
|
||||
- [[Rollup|Rollup]]
|
||||
- 연결 이유: Vite 환경에서 프로덕션 배포 시 코드를 하나로 모으고 최적화하는 데 사용되는 번들러입니다.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: Vite의 설정 파일(`vite.config.js`)에서 `manualChunks` 등 Rollup 전용 빌드 옵션을 통해 어떻게 효율적인 정적 애셋(Asset)을 생성하고, 코드 분할과 트리 쉐이킹을 수행하는지 이해할 수 있습니다 [14, 18, 31, 32].
|
||||
|
||||
#### [관계 유형 B (구현/활용 도구)]
|
||||
- [[SWC 컴파일러]]
|
||||
- SWC 컴파일러
|
||||
- 연결 이유: Vite의 기본 구성을 확장해 속도를 향상시키기 위한 강력한 도구입니다.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 과거 Babel이 처리하던 JSX/TypeScript 변환 작업을 Rust 기반의 빠른 도구(`@vitejs/plugin-react-swc`)로 교체하여 대형 React 애플리케이션의 재빌드 시간을 즉각적으로 단축시키는 방식을 파악할 수 있습니다 [1, 3, 5].
|
||||
|
||||
- [[React.lazy & Suspense]]
|
||||
- React.lazy & Suspense
|
||||
- 연결 이유: React 내부에서 동적 임포트를 통한 컴포넌트 레벨 지연 로딩을 구현하기 위한 API입니다.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 라우트나 무거운 모듈을 분리하고, 번들이 로드되는 동안 `<Suspense>`를 통해 폴백(Fallback) UI를 처리함으로써 초기 자바스크립트 페이로드 용량을 대폭 줄이는 실무 기법을 배울 수 있습니다 [6, 9, 11, 12, 33].
|
||||
|
||||
- [[rollup-plugin-visualizer]]
|
||||
- rollup-plugin-visualizer
|
||||
- 연결 이유: 최적화 작업 전후로 번들 크기를 시각화하고 문제를 진단하는 필수 분석 플러그인입니다.
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 큰 청크가 왜 발생하는지, 어떤 외부 라이브러리(벤더)가 의도치 않게 용량을 과도하게 점유하는지 분석하여 `manualChunks`나 코드 교체를 결단하는 측정/디버깅 기반을 확립할 수 있습니다 [6, 13, 21].
|
||||
|
||||
@@ -65,10 +65,10 @@ Vite와 React 환경에서 애플리케이션의 성능을 최적화하는 것
|
||||
|
||||
### Adjacent Topics
|
||||
|
||||
- [[Core Web Vitals]]
|
||||
- [[Core Web Vitals|Core Web Vitals]]
|
||||
- 확장 방향: Vite와 React 최적화를 통해 얻어낸 메인 번들 크기 감소 및 렌더링 속도 향상이 실제 사용자 체감 성능 지표(LCP, FID/INP 등)에 어떤 수치적 개선으로 나타나는지를 구체적으로 연구합니다 [11, 34, 35].
|
||||
|
||||
- [[Concurrent Rendering (동시성 렌더링)]]
|
||||
- Concurrent Rendering (동시성 렌더링)
|
||||
- 확장 방향: 로딩과 번들링 최적화뿐만 아니라, `useTransition` 및 `useDeferredValue` 훅을 이용하여 복잡한 데이터 변화 시에도 사용자 입력 등의 UI 반응성을 유지하는 런타임 차원의 성능 향상 전략으로 지식을 확장합니다 [36-38].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user