15. Vite의 빌드 과정 - 1

Rollup을 통한 빌드 프로세스

Vite는 개발 중에 매우 빠른 속도를 제공하는 것뿐만 아니라, 빌드 프로세스에서도 Rollup을 활용하여 뛰어난 최적화를 이루어냅니다. Rollup은 ES 모듈을 기반으로 한 모듈 번들러로, 코드의 구조와 효율성을 극대화하는 데 탁월한 성능을 보입니다. 이 섹션에서는 Vite의 빌드 프로세스에서 Rollup이 어떻게 작동하는지, 그리고 그로 인해 얻어지는 이점에 대해 자세히 살펴보겠습니다.

1. Rollup의 기본 개념

Rollup은 JavaScript 모듈을 번들링하기 위한 도구로, ES 모듈을 사용하여 입력된 파일을 분석하고 의존성 그래프를 생성합니다. 그 후, 이 그래프를 기반으로 최적화된 단일 파일로 출력을 생성합니다. Rollup은 Tree-shaking과 같은 고급 최적화 기법을 사용하여 불필요한 코드를 제거하고, 결과적으로 경량화된 번들을 생성할 수 있습니다.

2. Vite에서의 Rollup 사용

Vite는 개발 환경에서는 빠른 빌드를 위해 ES 모듈을 그대로 사용하지만, 프로덕션 빌드에서는 Rollup을 사용하여 최종 번들을 생성합니다. Vite의 vite.config.js 파일에서 Rollup 관련 설정을 통해 다양한 옵션을 조정할 수 있습니다.

예시: Rollup 설정

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: 'src/main.js',
        nested: 'src/nested/index.js',
      },
      output: {
        // 출력 형식 설정
        format: 'es',
        entryFileNames: '[name].[hash].js',
      },
    },
  },
});

위의 예제에서 rollupOptions 객체를 통해 Rollup의 입력 및 출력 설정을 구성합니다. 이렇게 함으로써, Vite는 번들링 과정에서 Rollup의 강력한 기능을 활용하여 효율적인 결과를 생성합니다.

3. Tree Shaking과 코드 분할

Rollup의 가장 큰 장점 중 하나는 Tree Shaking 기능입니다. 이는 사용되지 않는 코드를 자동으로 제거하여 최종 번들의 크기를 줄이는 기능입니다. Vite는 이 기능을 통해, 코드의 각 모듈을 분석하고 실제로 사용되지 않는 부분을 제거합니다. 이렇게 하면 애플리케이션의 성능이 향상되고, 로딩 시간이 줄어듭니다.

또한, Rollup은 코드 분할(code splitting) 기능을 제공하여, 대형 애플리케이션의 경우 필요한 모듈만을 로드하도록 합니다. 이를 통해 초기 로딩 시 불필요한 코드가 포함되지 않도록 하여 사용자 경험을 개선합니다.

예시: 코드 분할

// src/main.js
import(/* webpackChunkName: "myModule" */ './myModule.js').then((module) => {
  // 모듈 사용
  const myFunction = module.default;
  myFunction();
});

위의 예제에서 import()를 사용하여 동적으로 모듈을 로드하는 방식입니다. Rollup은 이 코드를 분석하여, 최적의 분할 방식으로 번들링을 수행합니다.

4. 최적화 및 플러그인 활용

Vite에서 Rollup을 사용할 때, 여러 플러그인을 통해 추가적인 최적화를 수행할 수 있습니다. Vite는 기본적으로 여러 Rollup 플러그인을 지원하여, 이미지 최적화, CSS 전처리, TypeScript 변환 등을 쉽게 처리할 수 있습니다.

예시: Rollup 플러그인 설정

import { defineConfig } from 'vite';
import { terser } from 'rollup-plugin-terser';

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [terser()], // 코드 압축 플러그인
    },
  },
});

위의 예제에서는 rollup-plugin-terser를 사용하여 최종 번들을 압축합니다. 이는 코드의 크기를 줄이고, 성능을 향상시키는 데 도움을 줍니다.

5. 결론

Vite는 Rollup을 통해 강력한 빌드 프로세스를 제공함으로써, 개발자들에게 빠르고 효율적인 개발 환경을 만들어 줍니다. Rollup의 Tree Shaking, 코드 분할, 플러그인 지원 등의 기능을 통해 최적화된 결과물을 생성하여, 최종 사용자에게 우수한 성능을 제공할 수 있습니다. 이러한 이유로 Vite는 현대 웹 애플리케이션 개발에 있어 필수적인 도구로 자리 잡고 있습니다.