반응형
원래는 이미지 불러올떄 이렇게 쓰는데
<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 사용
동적 임포트를 통해 디렉토리 내의 모든 이미지를 한 번에 가져오는 방식은
코드의 가독성을 높이고 유지보수를 쉽게 만듭니다.
이 방법은 새로운 이미지를 추가할 때마다 코드 수정이 필요 없다는 장점이 있습니다.
1
2
3
4
5
6
7
8
|
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);
});
|
cs |
2. vite-plugin-imagemin 사용
이미지 최적화는 성능 향상에 매우 중요합니다. vite-plugin-imagemin 같은 플러그인을 사용하면
빌드 과정에서 자동으로 이미지가 최적화되므로, 별도로 이미지를 최적화할 필요가 없습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
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,
},
],
},
}),
],
});
|
cs |
요약
- 동적 임포트 및 require.context 사용: 유지보수와 확장성을 고려할 때 자주 사용됩니다.
- 이미지 최적화 플러그인 사용 (vite-plugin-imagemin): 성능 최적화를 위해 일반적으로 사용됩니다.
이 두 가지 방법을 결합하면 코드 관리와 성능 최적화 모두에서 큰 이점을 얻을 수 있습니다.
반응형
'react' 카테고리의 다른 글
react+storybook+tailwind (0) | 2024.06.16 |
---|