| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 리팩토링
- CRA
- vite
- 회고
- 프론트엔드
- 이것저것
- virtaullist
- Webworker
- JavaScript
- sharedworker
- 합성 컴포넌트
- MFA
- 리액트
- server component
- 자바스크립트
- react
- context.api
- 에세이
- provider 패턴
- radixui
- MicroFrontEnd
- 티스토리챌린지
- 클린코드
- 웹워커
- 아키텍처
- TypeScript
- 오블완
- CustomHook
- frontend
- Web
Archives
- Today
- Total
목록2025/05 (1)
Lighthouse of FE biginner
Vite의 사전 번들링, HMR
ViteVite는 프로젝트 전체를 번들링하지 않고도 빠른 개발 서버를 제공합니다.Vite가 등장하기 전 많이 사용된 번들러인 Webpack은 개발 서버를 실행할 때 프로젝트 전체의 의존 그래프를 해석하고 이를 번들링한 결과물을 브라우저에 전달합니다. 반면, Vite는 Native ESM(ECMAScript Modules)을 활용하여 브라우저가 직접 모듈을 해석하도록 위임하는 방식으로 동작합니다. 예를 들어, Webpack은 진입점부터 모든 의존성을 분석해 번들링을 수행한 뒤 이를 메모리에 저장하고 개발 서버를 통해 서빙합니다. 반면 Vite는 콜드 스타트 시점에만 esbuild로 라이브러리를 사전 번들링하고, 이후에는 소스 코드를 ESM 형태로 그대로 브라우저에 전달합니다. 이로 인해 Vite는 번들링 ..
[WEB] 프론트엔드
2025. 5. 23. 18:44