19. Vite 사용 시 성능 최적화 팁 - 1

성능을 높이기 위한 설정 및 전략

Vite는 기본적으로 빠른 개발 경험을 제공하도록 설계되었지만, 성능을 극대화하기 위해 몇 가지 설정 및 전략을 활용할 수 있습니다. 이 섹션에서는 Vite에서 성능을 높이는 다양한 방법에 대해 설명하고, 구체적인 설정과 코드 예제를 통해 실질적인 적용 방법을 제시하겠습니다.

1. 최적화된 빌드 설정

Vite는 Rollup을 사용하여 프로덕션 빌드를 생성합니다. 이때 몇 가지 기본적인 최적화 설정을 통해 빌드 성능과 최종 번들 크기를 줄일 수 있습니다.

예시: vite.config.ts에서 최적화 설정

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 코드 스플리팅을 활성화하여 각 페이지에 필요한 코드만 번들에 포함
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id
              .toString()
              .split('node_modules/')[1]
              .split('/')[0]
              .toString(); // 모듈을 기본적으로 별도의 청크로 분리
          }
        },
      },
    },
    // 압축 설정
    terserOptions: {
      compress: {
        drop_console: true, // console.log 제거
      },
    },
  },
});

위의 설정은 node_modules에서 가져온 라이브러리를 별도의 청크로 분리하여 로딩 속도를 높입니다. 또한, terserOptions를 통해 프로덕션 빌드에서 불필요한 console.log를 제거할 수 있습니다.

2. 코드 스플리팅

코드 스플리팅은 사용자가 필요로 하는 코드만 로딩하여 초기 로딩 시간을 단축시킬 수 있는 유용한 기술입니다. Vite는 자동으로 코드 스플리팅을 지원하지만, 수동으로도 설정할 수 있습니다.

예시: 동적 임포트 사용하기

// 라우터 설정에서 동적 임포트 활용
const routes = [
  {
    path: '/about',
    component: () => import('./views/About.vue'), // About.vue를 동적으로 임포트
  },
  {
    path: '/contact',
    component: () => import('./views/Contact.vue'), // Contact.vue를 동적으로 임포트
  },
];

이렇게 설정하면 /about 또는 /contact 경로로 접근할 때 해당 컴포넌트만 로딩되며, 초기 로딩 속도가 개선됩니다.

3. 캐싱 전략

브라우저 캐싱은 성능을 높이는 중요한 요소입니다. Vite는 HTTP 캐시를 활용하여 이미 로드된 리소스를 재사용할 수 있도록 도와줍니다.

예시: 캐시 설정

Vite는 HTTP 캐시를 설정하기 위한 옵션을 제공하지 않지만, 이를 위한 전략으로는 서버 사이드에서 Cache-Control 헤더를 설정하는 것이 있습니다. 이를 통해 정적 자원이 브라우저에 캐시될 수 있도록 합니다.

// Express.js와 같은 서버에서 Cache-Control 설정
app.get('/dist/:file', (req, res) => {
  res.set('Cache-Control', 'public, max-age=31557600'); // 1년 동안 캐시
  res.sendFile(path.join(__dirname, 'dist', req.params.file));
});

위의 예시는 Express.js 서버에서 정적 파일에 대해 캐시 헤더를 설정하는 방법입니다. 이를 통해 클라이언트는 캐시된 자원을 사용할 수 있어 성능이 향상됩니다.

4. Lazy Loading

Lazy loading은 페이지가 실제로 필요할 때만 컴포넌트를 로딩하는 방식으로, 초기 로딩 시간을 단축하는 데 효과적입니다. Vite에서는 Vue의 <Suspense>와 defineAsyncComponent를 사용하여 쉽게 구현할 수 있습니다.

예시: Lazy Loading을 활용한 Vue 컴포넌트

<template>
  <div>
    <h1>홈페이지</h1>
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>로딩 중...</div>
      </template>
    </Suspense>
  </div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/HeavyComponent.vue')
);

export default {
  components: {
    AsyncComponent,
  },
};
</script>

위의 코드에서 HeavyComponent는 실제로 필요할 때만 로딩되며, 로딩 중에는 "로딩 중..." 메시지가 표시됩니다. 이렇게 하면 초기 로딩 시간을 대폭 줄일 수 있습니다.

5. 이미지 최적화

웹에서 이미지 최적화는 성능에 큰 영향을 미칩니다. Vite는 이미지 최적화를 위한 플러그인을 제공하며, 이를 통해 자동으로 이미지를 압축하고 크기를 조정할 수 있습니다.

예시: 이미지 최적화 플러그인 사용하기

npm install vite-plugin-imagemin --save-dev

import { defineConfig } from 'vite';
import imagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    imagemin({
      gifsicle: {
        interlaced: true,
      },
      optipng: {
        optimizationLevel: 5,
      },
      pngquant: {
        quality: [0.8, 0.9],
      },
      // 추가 이미지 최적화 설정
    }),
  ],
});

위의 예제에서는 vite-plugin-imagemin을 사용하여 이미지 파일을 자동으로 최적화하고 있습니다. 이를 통해 이미지의 용량을 줄이고, 페이지 로딩 속도를 개선할 수 있습니다.

6. 결론

Vite에서 성능을 높이기 위한 설정 및 전략은 다양한 측면에서 접근할 수 있습니다. 최적화된 빌드 설정, 코드 스플리팅, 캐싱 전략, Lazy loading, 이미지 최적화 등을 통해 개발자는 사용자에게 빠르고 원활한 경험을 제공할 수 있습니다. 이러한 전략을 적절히 활용하면 Vite의 성능을 극대화하고, 사용자 경험을 향상시킬 수 있습니다. Vite의 강력한 기능을 활용하여 최적화된 웹 애플리케이션을 구축해보세요!