Vite Pre-bundling

프리번들링

• 일반적으로 번들링은 프로젝트의 종속성을 하나 또는 여러 개의 번들로 묶는 과정이다.
• vite에서는 처음 실행하여 사이트를 로컬로 로드하기 전에 프로젝트 종속성을 미리 번들로 제공하는 것을 말한다.
• esbuild를 통해 의존성을 프리번들링 하며, 기존 자바스크립트 기반 번들러에 비해 10배 ~ 100배 더 빠른 번들링 속도를 보여준다.
• 처음 개발 서버를 로드할 시 수행하며, 이후 변화된 부분이 있는 경우에만 업데이트 한다.
• 개발 모드에서의 로딩 성능을 크게 향상시킬 수 있으며, 여러 모듈을 하나의 번들로 묶어서 로드하여 HTTP 요청의 수를 줄이고 로딩 시간을 단축시킨다.
• 이 작업은 자동으로 수행하게 된다.

dependency pre-bundling

vite는 dependency pre-bundling 이라는 작업을 수행하며, 수행하는 두 가지 목적이 있다.

CommonJS and UMD Compatibility

• CommonJS 또는 UMD로 제공되는 종속성을 ESM으로 변환 해야 한다.
• ESM 형식이 브라우저에서 직접 지원되며, 더 효율적인 트리 쉐이킹을 가능하게 하기 때문이다.
• 트리 쉐이킹은 사용되지 않는 코드를 제거하여 번들의 크기를 줄이는 과정이다.

Performance

• 많은 내부 모듈이 있는 ESM 종속성을 단일 모듈로 변환하여 후속 페이지 로드 성능을 개선한다.

예를 들어, lodash-es에는 600개가 넘는 내부 모듈이 있으며 이를 가져온다고 할 시 브라우저는 600개 이상의 HTTP 요청을 동시에 실행한다.

서버가 처리하는 문제가 없더라도 브라우저 측에서의 네트워크 혼잡이 발생하여 페이지가 눈에 띄게 느리게 로드 된다.

이걸 단일 모듈로 사전 번들링하여 하나의 HTTP 요청만 필요하게 만든다는 뜻

개발 모드에서만 사전 번들링이 적용되며, 프로덕션 빌드에서는 @rollup/plugin-commonjs가 대신 사용된다.

Caching

• vite는 사전 번들링된 종속성을 node_modules/.vite 에 캐시한다.
  그리고 몇가지 소스를 기반으로 사전 번들링 단계를 다시 실행해야 하는지 여부를 결정한다.

1. package manager lockfile(package-lock.json, yarn.lock, pnpm-lock.yaml or bun.lockb)
2. 패치 폴더 수정 시간
3. vite.config.js 의 관련 필드(존재하는 경우)
4. NODE_ENV 값

사전 번들링 단계는 위 항목 중 하나가 변경된 경우에만 다시 실행하면 된다.

강제로 번들링을 다시 하고 싶다면 --force 옵션을 사용하여 개발 서버를 시작하거나 node_modules/.vite 캐시 디렉터리를 수동으로 삭제할 수 있다.

Browser Cache

• 해결된 종속성 요청은 페이지 리로드 성능을 개선하기 위해서 HTTP 헤더 max-age 높은 값 과 불변성을 사용하여 강력하게 캐시된다.
• 일단 캐시되면 개발 서버에 다시 요청하지 않으며 다른버전이 설치된 경우(package manager lockfile에 반영된 대로) 자동으로 무효화 된다.

로컬에서 종속성을 디버깅하려는 경우 아래 중 하나를 적용한다.

1. 브라우저 개발자 도구의 캐시를 일시적으로 비활성화
2. --force 플래그를 사용하여 vite 개발 서버를 재시작하여 종속성을 다시 번들링 한다.
3. 페이지를 새로고침 한다.

기타 이점

1. Automatic Dependency Discovery
2. Monorepos and Linked Dependencies
3. Customizing the Behavior

...

등이 수두룩하게 있는데.. 사실 위 이점을 체감해보거나 지식이 있는 상태가 아니라 읽어보는게 크게 의미가 없는거 같아서 우선 넘어가도록 하자.