의존성 사전 번들링
의존성 사전 번들링 (Dependency Pre-Bundling)
vite를 처음 실행하면 Vite는 로컬에서 사이트를 로드하기 전에 프로젝트 의존성을 미리 번들링해요. 이 과정은 기본적으로 자동이고 투명하게 진행돼요. 개발 서버가 순식간에 뜨는 데는 이 "의존성 사전 번들링(dependency pre-bundling)"이 큰 몫을 해요.
왜 하는가
사전 번들링에는 목적이 두 가지 있어요.
1. CommonJS/UMD 호환성. 개발 중에 Vite는 모든 코드를 네이티브 ESM으로 서빙해요. 그래서 CommonJS나 UMD로 배포된 의존성을 먼저 ESM으로 변환해야 해요. 이때 Vite는 스마트한 import 분석을 수행해서, 동적으로 할당되는 exports를 가진 모듈이라도 named import가 예상대로 동작하게 해 줘요(React 같은 경우가 대표적이에요).
// 예상대로 동작한다
import React, { useState } from 'react'
2. 성능. 내부 모듈이 많은 ESM 의존성을 하나의 모듈로 묶어서 이후 페이지 로드 성능을 높여요. 예를 들어 lodash-es는 600개가 넘는 내부 모듈로 쪼개져 배포돼요. import { debounce } from 'lodash-es'를 실행하면 브라우저가 동시에 600개 이상의 HTTP 요청을 발생시킵니다. 서버는 감당할 수 있어도, 브라우저 쪽에 네트워크 정체가 생겨 페이지가 눈에 띄게 느려져요. 사전 번들링으로 lodash-es를 하나의 모듈로 합치면 단 한 번의 HTTP 요청으로 끝나요.
사전 번들링은 개발 모드에서만 적용돼요.
자동 의존성 탐지
기존 캐시가 없으면 Vite는 소스 코드를 훑으면서 의존성 import(즉 node_modules에서 해석될 것으로 기대되는 "bare import")를 자동으로 찾아내고, 이 import들을 사전 번들링의 엔트리로 사용해요. 번들링은 Rolldown으로 수행되어 보통 매우 빨라요.
서버가 이미 시작된 뒤에 캐시에 없는 새 의존성 import가 등장하면, Vite는 의존성 번들링을 다시 수행하고 필요하면 페이지를 리로드해요.
모노레포와 링크된 의존성
모노레포 환경에서는 어떤 의존성이 같은 저장소에서 온 링크된 패키지일 수 있어요. Vite는 node_modules에서 해석되지 않는 의존성을 자동으로 감지해서, 링크된 의존성을 소스 코드로 취급해요. 즉 이 패키지는 번들 대상이 아니라 소스처럼 취급돼요.