Intro

프론트엔드 영역에선 .jsx, .tsx, .vue 등의 확장자를 가진 파일을 사용하지만 브라우저는 이를 이해하지 못한다. 때문에 이러한 파일들은 모두 .js 파일로 변환해야 한다. 모든 파일을 하나의 .js 파일로 만들 수 있지만 이 방식은 성능에 부정적인 영향을 줄 수 있으므로 권장되지 않는다. 대신 여러 .js 파일(chunks)로 변환한 뒤 필요한 순간에만 로드(지연 로딩)하는게 성능에 더 유리하다. 특히 초기 로딩 시간을 줄일 때 유용하다.

<aside> <img src="/icons/search_gray.svg" alt="/icons/search_gray.svg" width="40px" /> Vite는 Vue.js 창시자 Evan You(尤雨溪)가 만든 웹 빌드 도구로, 아래 두 가지 특징을 갖는다.

Native ES Modules 기반의 개발 서버 : ES Modules는 브라우저에서 직접 지원하므로 번들링 과정 없이 모듈을 로드할 수 있다. 이를 통해 개발 과정에서 빠른 리로드 경험을 제공한다.

파일 통합엔 esbuild, 번들링엔 Rollup 사용 : esbuild는 Go로 작성된 고성능 번들러/트랜스파일러다. 프로덕션 빌드에선 트리 쉐이킹 같은 기능을 제공하는 Rollup을 사용하여 효율적인 결과물을 생성한다.

</aside>

Vite, Webpack 같은 번들러는 보통 index, vendor 두 개의 메인 chunk를 생성한다. 참고로 Vite 2.9 버전부턴 Production 종속성 모듈이 index chunk에 포함된다.

index : App.tsx와 같은 어플리케이션의 핵심 코드
vendor : package.json - dependencies 섹션에 명시된 종속성

Vite 기본 설정으로 빌드해보면 아래처럼 index 청크가 생성된다. chunk를 따로 분리하지 않았기 때문에 어플리케이션의 어떤 페이지를 방문하든 '합쳐진' index 청크 덩어리를 받아야 한다.

dist/registerSW.js                                 0.13 kB
dist/manifest.webmanifest                          0.15 kB
dist/index.html                                    1.96 kB │ gzip:   1.02 kB
dist/assets/index-df6d6f21.css                    12.84 kB │ gzip:   1.03 kB
dist/assets/QueryErrorResetBoundary-30b62529.js    0.18 kB │ gzip:   0.16 kB
dist/assets/chunk-G5IOFHY7-58761137.js             1.58 kB │ gzip:   0.88 kB
dist/assets/app-68a6bb5a.js                        2.56 kB │ gzip:   1.20 kB
dist/assets/index-6b503c34.js                      7.12 kB │ gzip:   2.70 kB
dist/assets/index-91b8ad77.js                    577.07 kB │ gzip: 157.92 kB
dist/assets/index-a08b75ea.js                    787.30 kB │ gzip: 253.44 kB

🔍 Rollup Plugin Visualizer 플러그인을 사용하면 번들 사이즈와 구조를 시각적으로 확인할 수 있다. 각 모듈의 크기, 의존성, 번들에서 차지하는 사이즈 비율 등을 트리맵 혹은 라인 차트 형태로 제공한다.

Untitled

Vendor 청크 분리

Vite 2.9 버전부턴 기본적으로 vendor 청크를 분리하지 않지만 splitVendorChunkPlugin 플러그인을 사용하면 벤더 모듈만 별도의 청크로 분리할 수 있다.

import { splitVendorChunkPlugin } from "vite";

export default defineConfig({
  plugins: [react(), splitVendorChunkPlugin()],
});

플러그인을 설정하고 빌드해보면 vendor-*.js 이름의 청크가 생성된다. index 청크는 벤더 모듈이 제거돼서 사이즈가 줄었지만, vendor 청크는 832 kB 정도로 꽤 비대해졌다.

dist/registerSW.js                0.13 kB
dist/manifest.webmanifest         0.15 kB
dist/index.html                   2.04 kB │ gzip:   1.05 kB
dist/assets/index-df6d6f21.css   12.84 kB │ gzip:   1.03 kB
dist/assets/app-04f6ef89.js       2.21 kB │ gzip:   1.03 kB
dist/assets/index-8be5580d.js     6.86 kB │ gzip:   2.56 kB
dist/assets/index-995e1624.js    21.26 kB │ gzip:   6.72 kB
dist/assets/index-9413cf69.js   501.03 kB │ gzip: 135.67 kB
dist/assets/vendor-16e06f2d.js  832.65 kB │ gzip: 267.41 kB

Intro

Vendor 청크 분리

Manual Chunks