[Vite] 초기 로드 시간 개선을 위한 Vendor Chunk 쪼개기

Intro

---

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

 

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

 

 

🔍 Vite는 Vue.js 창시자 Evan You(尤雨溪)가 만든 웹 빌드 도구로, 아래 두 가지 특징을 갖는다.

• Native ES Modules 기반의 개발 서버: ES Modules는 브라우저에서 직접 지원하므로 번들링 과정 없이 모듈을 로드할 수 있다. 이를 통해 개발 과정에서 빠른 리로드 경험을 제공한다.  
• 파일 통합엔 esbuild, 번들링엔 Rollup 사용: esbuild는 Go로 작성된 고성능 번들러/트랜스파일러다. 프로덕션 빌드에선 트리 쉐이킹 같은 기능을 제공하는 Rollup을 사용하여 효율적인 결과물을 생성한다. 

 

Vendor 청크 분리

---

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

// vite.config.ts
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

 

Manual Chunks

---

Rollup에서 제공하는 manualChunks 함수를 이용하면 vendor 청크를 더 작은 단위로 쪼갤 수 있다. 일반적으로 외부 라이브러리는 종속성을 가지고 있고, 이 종속성들이 올바른 순서로 로드돼야 한다. 청크를 수동으로 생성할 때 가장 어려운 부분 중 하나다. 예를들어 react-router-dom 패키지는 @remix-run/router, react-router에 의존적이므로 이들을 동일한 청크에 포함시켜야 한다.

# react-router-dom 패키지의 의존성 확인 명령어

# { '@remix-run/router': '1.9.0', 'react-router': '6.16.0' }
npm show react-router-dom dependencies

# { react: '^18.2.0', 'react-dom': '^18.2.0' }
npm show react-router-dom devDependencies

 

🔍 splitVenderChunkPlugin 플러그인을 사용할 때 manualChunks는 함수 형태만 사용할 수 있다.

 

manualChunks는 함수와 객체 두 가지 방식으로 사용할 수 있다. 객체 형태로 사용할 때 각 속성은 청크를 가리키고, 청크 이름은 속성 키로 결정된다. 함수 형태로 사용할 경우, 모듈 ID를 파라미터로 받는다. 함수가 문자열을 반환하면, 해당 ID의 모듈과 모든 의존성이 문자열 이름의 청크에 추가된다.

// 객체로 사용할 때
manualChunks: {
  lodash: ['lodash'], // 'lodash' 모듈을 'lodash' 청크로 그룹핑
}

// 함수로 사용할 때
manualChunks(id) {
  // 'node_modules'를 포함하는 모든 모듈은 'vendor' 청크로 그룹핑
  if (id.includes('node_modules')) return 'vendor';
}

 

아래는 react-router-dom 모듈과 관련된 의존성을 @react-router라는 이름의 청크로 그룹핑한 예시.

// vite.config.ts
import { splitVendorChunkPlugin } from 'vite';

export default defineConfig({
  plugins: [react(), splitVendorChunkPlugin()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id: string) {
          const reactRouterDeps = [
            '@remix-run',
            'react-router',
            'react-router-dom',
          ];
          if (reactRouterDeps.some((lib) => id.includes(lib)))
            return '@react-router';
        },
      },
    },
  },
});

 

위 Vite 설정으로 빌드해보면 @react-router 이름의 청크 파일이 생성된걸 확인할 수 있다. vendor 청크 용량은 @react-router 청크 크기(50 kB)만큼 감소했다.

# 빌드 결과
dist/registerSW.js                       0.13 kB
dist/manifest.webmanifest                0.15 kB
dist/index.html                          2.12 kB │ gzip:   1.07 kB
dist/assets/index-df6d6f21.css          12.84 kB │ gzip:   1.03 kB
dist/assets/app-c7e6b312.js              2.29 kB │ gzip:   1.06 kB
dist/assets/index-049072fc.js            6.91 kB │ gzip:   2.58 kB
dist/assets/index-bfb7ca8b.js           21.44 kB │ gzip:   6.75 kB
dist/assets/@react-router-eb1c5b4a.js   50.25 kB │ gzip:  17.34 kB
dist/assets/index-e3190f43.js          501.06 kB │ gzip: 135.69 kB
dist/assets/vendor-0663586e.js         781.40 kB │ gzip: 250.49 kB

 

의존성 기준으로 분리 ⭐

---

🔍 package.json.dependencies를 불러오려면 tsconfig.node.json.include 배열에 package.json 경로를 포함시켜야 한다. e.g. "include": ["vite.config.ts", "package.json"]

 

패키지 의존성과 로드 순서를 일일이 파악해서 청크를 수동 생성하는 작업은 번거롭다. 대신 ①어플리케이션의 메인 프레임워크(React)와 관련 패키지를 vendor 청크로 묶고, ②나머지는 package.json의 종속성을 기준으로 청크가 자동 분리되도록 설정할 수 있다.

// vite.config.ts
import { dependencies } from './package.json';
// dependencies: { axios: '^1.5.0', jotai: '^2.4.2', ... }

// React 관련 의존성 필터링
const reactDeps = Object.keys(dependencies).filter(
  (key) => key === 'react' || key.startsWith('react-'),
);

const manualChunks = {
  // 'vendor' chunk에 모든 React 관련 의존성 포함
  vendor: reactDeps,
  // 나머지 의존성에 대해 추가적인 chunk 생성
  ...Object.keys(dependencies).reduce((chunks, name) => {
    // 'vendor'에 이미 포함된 의존성은 건너뛰기
    if (!reactDeps.includes(name)) chunks[name] = [name];
    return chunks;
  }, {}),
};

export default defineConfig({
  plugins: [react()],
  build: { rollupOptions: { output: { manualChunks } } },
});

{
  vendor: [
    'react',
    'react-dom',
    'react-error-boundary',
    'react-hook-form',
    'react-router-dom',
    'react-tsparticles'
  ],
  '@chakra-ui/react': [ '@chakra-ui/react' ],
  '@fingerprintjs/fingerprintjs': [ '@fingerprintjs/fingerprintjs' ],
  '@formkit/auto-animate': [ '@formkit/auto-animate' ],
  '@hookform/resolvers': [ '@hookform/resolvers' ],
  '@tanstack/react-query': [ '@tanstack/react-query' ],
  '@vercel/analytics': [ '@vercel/analytics' ],
  axios: [ 'axios' ],
  'date-fns': [ 'date-fns' ],
  'framer-motion': [ 'framer-motion' ],
  jotai: [ 'jotai' ],
  nanoid: [ 'nanoid' ],
  qs: [ 'qs' ],
  sass: [ 'sass' ],
  yup: [ 'yup' ]
}

 

위 설정을 적용하고 빌드해 보면 기존 781kB였던 vendor 청크가 약 290kB 크기의 리액트 관련 패키지로 그룹핑되고, vendor 청크에 있던 의존성들은 각각 개별 청크로 분리됐다. 이를 통해 초기 페이지 로딩 시간을 단축하고, 사용자는 필요한 리소스만 다운로드할 수 있게 된다.

# 빌드 결과
dist/registerSW.js                                      0.13 kB
dist/manifest.webmanifest                               0.15 kB
dist/index.html                                         2.60 kB │ gzip:   1.17 kB
dist/assets/index-df6d6f21.css                         12.84 kB │ gzip:   1.03 kB
dist/assets/@fingerprintjs/fingerprintjs-4ed993c7.js    0.00 kB │ gzip:   0.02 kB
dist/assets/@vercel/analytics-4ed993c7.js               0.00 kB │ gzip:   0.02 kB
dist/assets/sass-4ed993c7.js                            0.00 kB │ gzip:   0.02 kB
dist/assets/nanoid-20264c15.js                          0.44 kB │ gzip:   0.31 kB
dist/assets/@hookform/resolvers-6186e247.js             0.76 kB │ gzip:   0.43 kB
dist/assets/app-ee4ec089.js                             1.25 kB │ gzip:   0.59 kB
dist/assets/jotai-5371d6c6.js                           5.52 kB │ gzip:   2.42 kB
dist/assets/@formkit/auto-animate-99b7ba86.js           5.77 kB │ gzip:   2.45 kB
dist/assets/index-10a9dd48.js                           7.10 kB │ gzip:   2.68 kB
dist/assets/date-fns-1253a22e.js                       26.79 kB │ gzip:   7.52 kB
dist/assets/axios-599d2e10.js                          29.03 kB │ gzip:  11.62 kB
dist/assets/qs-c2440112.js                             31.85 kB │ gzip:  10.57 kB
dist/assets/yup-4151e337.js                            35.43 kB │ gzip:  11.58 kB
dist/assets/@tanstack/react-query-512219a8.js          39.93 kB │ gzip:  11.01 kB
dist/assets/index-653ca8f3.js                          56.92 kB │ gzip:  18.33 kB
dist/assets/framer-motion-5b367961.js                 101.02 kB │ gzip:  34.13 kB
dist/assets/vendor-ead95c8e.js                        290.76 kB │ gzip:  92.84 kB
dist/assets/@chakra-ui/react-03b491e2.js              300.44 kB │ gzip:  99.47 kB
dist/assets/index-7c561f25.js                         422.93 kB │ gzip: 109.15 kB

 

레퍼런스

---

• Splitting vendor chunk with Vite and loading them async
• Vite code splitting that just works | Sambit Sahoo
• Chunking-strategy | Vite

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요