20. Vite 사용 시 성능 최적화 팁 - 2

캐싱, 트리 쉐이킹 등 빌드 성능 향상 기법

Vite는 현대적인 웹 애플리케이션의 요구를 충족하기 위해 다양한 빌드 성능 향상 기법을 지원합니다. 이 섹션에서는 Vite의 캐싱, 트리 쉐이킹(Tree Shaking) 및 기타 최적화 기술을 통해 어떻게 빌드 성능을 높일 수 있는지 자세히 설명하겠습니다.

1. 캐싱(Caching)

캐싱은 웹 애플리케이션의 성능을 향상시키는 중요한 기술 중 하나로, 이미 로드된 자원을 재사용함으로써 불필요한 네트워크 요청을 줄입니다. Vite는 HTTP 캐시를 활용하여 브라우저가 자원을 효율적으로 저장하고 사용할 수 있도록 도와줍니다.

HTTP 캐시 설정

Vite는 개발 환경에서 캐시를 자동으로 관리하지만, 프로덕션 빌드에서는 서버 측에서 Cache-Control 헤더를 설정하여 캐싱 전략을 최적화할 수 있습니다. 다음은 Express.js를 사용하여 정적 파일에 캐시를 설정하는 예입니다:

const express = require('express');
const path = require('path');

const app = express();

// 정적 파일 제공
app.use(express.static('dist'));

// 캐시 설정
app.get('/dist/*', (req, res) => {
  res.set('Cache-Control', 'public, max-age=31536000'); // 1년 동안 캐시
  res.sendFile(path.join(__dirname, 'dist', req.path));
});

// 서버 시작
app.listen(3000, () => {
  console.log('서버가 3000번 포트에서 실행 중입니다.');
});

위의 코드는 정적 파일에 대해 1년 동안 캐시를 설정하는 방법을 보여줍니다. 이렇게 설정하면 브라우저는 캐시된 파일을 재사용하여 페이지 로딩 속도를 크게 향상시킬 수 있습니다.

2. 트리 쉐이킹(Tree Shaking)

트리 쉐이킹은 사용되지 않는 코드(즉, "죽은 코드")를 제거하여 최종 번들 크기를 줄이는 기법입니다. Vite는 ES 모듈을 기반으로 하여 이 트리 쉐이킹을 자동으로 지원합니다.

트리 쉐이킹 예시

ES6 모듈을 사용하여 불필요한 코드를 제거하는 과정을 설명하겠습니다. 다음은 예시 코드입니다:

// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}

// main.js
import { add } from './math.js'; // subtract는 사용하지 않음

console.log(add(2, 3)); // 5

위의 예제에서 subtract 함수는 main.js에서 사용되지 않으므로, 최종 번들에서는 이 함수가 제거됩니다. Vite는 Rollup을 통해 이러한 최적화를 수행하며, 사용되지 않는 코드를 자동으로 제거하여 번들 크기를 줄입니다.

3. Pre-bundling

Vite는 사용자가 node_modules에서 가져온 종속성을 사전 번들링(pre-bundling)하여 성능을 개선합니다. 이 과정에서 종속성의 ESM(ES Modules) 변환 및 코드를 최적화하여 첫 로딩 시간을 단축시킵니다.

Pre-bundling 설정

Vite는 기본적으로 사전 번들링을 자동으로 수행하지만, 특정 패키지를 제외할 수도 있습니다. 예를 들어, 다음과 같이 설정할 수 있습니다:

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    exclude: ['some-excluded-package'], // 특정 패키지를 제외
  },
});

이 설정은 Vite가 특정 패키지를 사전 번들링하지 않도록 합니다. 이를 통해 더 유연한 종속성 관리를 할 수 있습니다.

4. 최적화된 빌드 설정

Vite는 Rollup을 기반으로 하여 다양한 빌드 최적화 옵션을 제공합니다. vite.config.js 파일에서 build 섹션을 활용하여 최적화를 설정할 수 있습니다.

예시: 빌드 성능 최적화

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'dist', // 빌드 결과물 디렉토리
    sourcemap: true, // 소스 맵 생성
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.split('node_modules/')[1].split('/')[0]; // 모듈별 청크 생성
          }
        },
      },
    },
  },
});

이 예제에서는 manualChunks 옵션을 사용하여 node_modules에서 가져온 종속성을 모듈별로 청크로 분리합니다. 이를 통해 각 페이지에서 필요한 라이브러리만 로딩하여 성능을 개선할 수 있습니다.

5. 전역 설정과 구성을 통한 성능 최적화

Vite는 구성 파일을 통해 전역적인 성능 최적화를 적용할 수 있습니다. 예를 들어, CSS 전처리기나 PostCSS를 설정하여 스타일을 최적화할 수 있습니다.

예시: PostCSS 설정

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'), // 브라우저 호환성을 위한 자동 접두사 추가
    require('cssnano')({ preset: 'default' }), // CSS 압축
  ],
};

위의 설정은 CSS 파일을 자동으로 최적화하고 압축합니다. 이를 통해 최종 번들의 크기를 줄이고 페이지 로딩 속도를 향상시킬 수 있습니다.

6. 결론

Vite는 성능을 극대화하기 위해 다양한 빌드 최적화 기법을 제공합니다. 캐싱, 트리 쉐이킹, 사전 번들링, 최적화된 빌드 설정 및 전역적인 성능 최적화는 개발자가 더 빠르고 효율적인 웹 애플리케이션을 구축할 수 있도록 돕습니다. 이러한 기법을 활용하여 최종 사용자에게 빠르고 매끄러운 경험을 제공하는 웹 애플리케이션을 개발해보세요. Vite의 기능을 최대한 활용하여 뛰어난 성능을 자랑하는 프로젝트를 만들어 가기를 바랍니다!