react vite 비트 이미지 최적화 방법

원래는 이미지 불러올떄 이렇게 쓰는데 

<div>

        <img src={"/emotion1.png"} />

        <img src={"/emotion1.png"} />

        <img src={"/emotion1.png"} />

        <img src={"/emotion1.png"} />

        <img src={"/emotion1.png"} />

      </div>

 

vite 이미지를 최적화하기 위해서는 이렇게 불러와놓고 하단에 넣어주는 형식으로 해야하는데

만약 이미지가 100개면 다 이런식으로 하면 너무 많을꺼 같아서 다른방법을 찾아보았다.

import emotion1 from './assets/emotion1.png';

import emotion2 from './assets/emotion2.png';

import emotion3 from './assets/emotion3.png';

import emotion4 from './assets/emotion4.png';

import emotion5 from './assets/emotion5.png';

//vite 비트 안에서 이미지 최적화 시킬려면 이렇게 해야한다

<div>

        <img src={emotion1} />

        <img src={emotion2} />

        <img src={emotion3} />

        <img src={emotion4} />

        <img src={emotion5} />

      </div>

 

 

 

 

실무에서 더 자주 사용되는 방법은 상황에 따라 다를 수 있지만,

동적 임포트와 require.context를 이용한 자동화된 방법이 더 많이 사용됩니다.

이는 유지보수와 확장성 측면에서 유리하기 때문입니다.

또한, 이미지 최적화를 위해 vite-plugin-imagemin 같은 플러그인을 사용하는 것도 일반적입니다.

1. 동적 임포트 및 require.context 사용

동적 임포트를 통해 디렉토리 내의 모든 이미지를 한 번에 가져오는 방식은

코드의 가독성을 높이고 유지보수를 쉽게 만듭니다.

이 방법은 새로운 이미지를 추가할 때마다 코드 수정이 필요 없다는 장점이 있습니다.

const importAll = (r) => r.keys().map(r);
const images = importAll(require.context('./assets', false, /\.(png|jpe?g|svg)$/));
 
// images 배열을 사용하여 필요할 때 이미지를 참조
images.forEach((image) => {
  console.log(image);
});
 

 

2. vite-plugin-imagemin 사용

이미지 최적화는 성능 향상에 매우 중요합니다. vite-plugin-imagemin 같은 플러그인을 사용하면

빌드 과정에서 자동으로 이미지가 최적화되므로, 별도로 이미지를 최적화할 필요가 없습니다.

import { defineConfig } from 'vite';
import viteImagemin from 'vite-plugin-imagemin';
 
export default defineConfig({
  plugins: [
    viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.65, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ],
});

요약

1. 동적 임포트 및 require.context 사용: 유지보수와 확장성을 고려할 때 자주 사용됩니다.
2. 이미지 최적화 플러그인 사용 (vite-plugin-imagemin): 성능 최적화를 위해 일반적으로 사용됩니다.

이 두 가지 방법을 결합하면 코드 관리와 성능 최적화 모두에서 큰 이점을 얻을 수 있습니다.