esbuild와 svgr 설정으로 SVG 파일 번들 최적화하기

리액트 프로젝트에서 SVG 파일을 사용할 때, svgr 플러그인을 사용해 SVG 파일을 리액트 컴포넌트로 변환하는 경우가 많다. 그러나 특정 SVG 파일은 크기가 커서 컴포넌트로 변환하면 번들 용량이 불필요하게 커지는 문제가 생길 수 있다. 이번 글에서는 esbuild와 svgr 설정에서 특정 SVG 파일만 외부 파일로 처리하는 방법을 다뤄보겠다.

문제 상황

esbuild와 esbuild-plugin-svgr를 사용하여 대부분의 SVG 파일을 리액트 컴포넌트로 변환해 사용했다. 하지만 일부 SVG 파일이 번들에 포함되어 용량이 크게 증가하는 문제가 발생했다. 예를 들어, assets/analysisfail.svg 파일이 번들 용량의 상당 부분을 차지하고 있었는데, 이 파일만 예외적으로 외부 파일로 처리하고 싶었다.

해결 방법

이 문제를 해결하기 위해, 특정 SVG 파일에 대해 svgr 플러그인이 적용되지 않도록 예외 처리를 설정하고, 해당 파일만 file 로더를 통해 외부 파일로 처리하도록 했다.

1. svgr 플러그인에서 특정 파일 예외 처리

먼저, esbuild-plugin-svgr 설정에서 filter와 exclude 옵션을 활용해 analysisfail.svg 파일을 예외 처리했다. 대부분의 SVG 파일은 여전히 리액트 컴포넌트로 변환하되, analysisfail.svg만 제외하여 file 로더로 처리될 수 있도록 설정했다.

import esbuild from 'esbuild';
import svgrPlugin from 'esbuild-plugin-svgr';

esbuild.build({
  entryPoints: ['./src/index.tsx'],
  bundle: true,
  outdir: 'dist',
  plugins: [
    svgrPlugin({
      // 기본적으로 .svg 파일을 리액트 컴포넌트로 변환
      filter: /\.svg$/,
      // 특정 파일은 예외 처리
      exclude: /analysisfail\.svg$/,
    }),
  ],
  loader: {
    // .svg 파일 중 예외 파일만 file 로더로 처리
    '.svg': 'file',
  },
  resolveExtensions: ['.js', '.jsx', '.ts', '.tsx'],
}).catch(() => process.exit(1));

이 설정을 통해 analysisfail.svg 파일은 svgrPlugin에 의해 리액트 컴포넌트로 변환되지 않고, file 로더를 통해 외부 파일로 처리되게 했다.

2. 결과 확인

설정 적용 후, 번들을 다시 생성해 보았다. 이제 assets/analysisfail.svg 파일이 번들에 포함되지 않고 외부 파일로 처리되어, 번들 용량이 줄어들었다. 번들 분석 도구에서도 이 파일이 포함되지 않음을 확인할 수 있었다.

마치며

esbuild와 svgr 플러그인을 사용할 때, 모든 SVG 파일을 리액트 컴포넌트로 변환하는 것이 아니라, 특정 파일은 외부 파일로 처리하는 방식으로 번들을 최적화할 수 있다. 큰 용량의 SVG 파일로 인해 번들 크기가 증가하는 문제가 있다면, 이번 설정 방법을 참고해 보길 바란다.