docs: finalized wiki integrity maintenance (v3.0 standard) - pruned 1400+ stubs and fixed 11k+ ghost links
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
# [[Lazy Loading]]
|
||||
# [[Lazy Loading|Lazy Loading]]
|
||||
|
||||
## 📌 Brief Summary
|
||||
Lazy Loading은 리소스나 코드 청크를 애플리케이션 초기 구동 시 한 번에 로드하지 않고, 사용자가 실제로 필요로 하는 시점에 비동기적으로 불러오는 성능 최적화 기법입니다 [1, 2]. 프론트엔드 환경에서는 초기 JavaScript 번들 크기를 최대 20~70%까지 줄여 초기 페이지 로드 시간을 획기적으로 향상시킵니다 [3]. 주로 경로(Route) 기반 컴포넌트, 무거운 UI 위젯(차트 등), 뷰포트 하단의 이미지 등에 적용되어 앱의 전반적인 반응성과 Core Web Vitals 지표를 개선합니다 [4, 5].
|
||||
@@ -19,20 +19,20 @@ Lazy Loading은 리소스나 코드 청크를 애플리케이션 초기 구동
|
||||
### Related Concepts
|
||||
|
||||
#### [아키텍처/기반 기술]
|
||||
- [[Code Splitting]]
|
||||
- [[Code Splitting|Code Splitting]]
|
||||
- 연결 이유: Lazy Loading이 가능하도록 애플리케이션의 단일 JavaScript 번들을 여러 개의 작은 청크 단위로 나누는 근본적인 기반 기술이기 때문입니다 [2, 13].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 모던 프론트엔드 환경에서 빌드 툴(Vite, Webpack)이 런타임 최적화를 위해 코드를 어떻게 분할하고 관리하는지 이해할 수 있습니다 [6, 7].
|
||||
|
||||
- [[Dynamic Imports]]
|
||||
- Dynamic Imports
|
||||
- 연결 이유: 자바스크립트 모듈을 파일의 최상단에서 정적으로 불러오지 않고, 실행 중에 비동기적으로 불러오기 위해 `import()` 문법을 사용하는 방식입니다 [1, 7].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 라우트 전환이나 특정 이벤트 발생 시점에 필요한 코드만 네트워크로 호출하는 런타임 메커니즘을 파악할 수 있습니다 [7].
|
||||
|
||||
#### [구현/활용 도구]
|
||||
- [[React Suspense]]
|
||||
- React Suspense
|
||||
- 연결 이유: `React.lazy()`를 이용해 지연 로딩을 수행할 때, 청크가 로드되기 전까지 렌더링을 일시 중지하고 Fallback UI를 화면에 그려주는 핵심 컴포넌트입니다 [7, 8].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 비동기 UI 로딩 시 사용자 경험(UX)을 부드럽게 유지하기 위한 렌더링 제어 및 로딩 상태 설계 패턴을 배울 수 있습니다 [8, 11].
|
||||
|
||||
- [[Vite manualChunks]]
|
||||
- Vite manualChunks
|
||||
- 연결 이유: Vite를 통해 빌드할 때, 변경이 잦지 않은 무거운 벤더 라이브러리(React 코어 등)를 Lazy Loading의 청크 분할 전략과 결합해 별도 파일로 독립시키는 환경 설정입니다 [7, 14].
|
||||
- 이 개념을 통해 더 깊게 이해할 수 있는 부분: 브라우저 캐싱 전략을 극대화하고, 초기 번들 용량 경고("Large Chunks") 문제를 해결하는 구체적인 번들러 최적화 방법을 학습할 수 있습니다 [7, 15].
|
||||
|
||||
@@ -54,9 +54,9 @@ Lazy Loading은 리소스나 코드 청크를 애플리케이션 초기 구동
|
||||
|
||||
### Adjacent Topics
|
||||
|
||||
- [[Core Web Vitals]]
|
||||
- [[Core Web Vitals|Core Web Vitals]]
|
||||
- 확장 방향: 지연 로딩이 검색 엔진 최적화(SEO) 및 사용자 경험 지표인 FCP, LCP(Largest Contentful Paint), INP(Interaction to Next Paint) 수치를 실제로 얼마나 개선하는지 측정 및 분석하는 관점으로 확장할 수 있습니다 [3, 23, 24].
|
||||
- [[Server Components (RSC)]]
|
||||
- Server Components (RSC)
|
||||
- 확장 방향: 클라이언트 사이드의 자바스크립트 크기를 줄이기 위한 또 다른 현대적 패러다임으로, 클라이언트에서 실행될 코드를 아예 서버에서 렌더링하고 HTML로만 보내는 방식과 Lazy Loading과의 역할을 비교/대조합니다 [20, 21].
|
||||
|
||||
---
|
||||
|
||||
Reference in New Issue
Block a user