vite 이미지 최적화

 

⭐️ vite 이미지 최적화

 

[ 최적화 결과 ]

 

[package.json]

{
  "name": "react-project-lab5",
  "private": true,
  "version": "0.0.0",
  "description": "비트와 타입스크립트 등 리액트 프로젝트 개발에 필요한 환경을 직접 구성합니다.",
  "engines": {
    "node": "v19.0.0",
    "vscode": "1.76.0"
  },
  "type": "module",
  "scripts": {
    "start": "npm run dev -- --open",
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview --port 3000"
  },
  "dependencies": {
    "axios": "1.3.4",
    "firebase": "^9.17.2",
    "kakao-map-api": "^0.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-kakao-maps-sdk": "^1.1.6",
    "react-router-dom": "6.8.2",
    "recoil": "0.7.7",
    "swiper": "9.1.0",
    "sass": "1.58.3",
    "recoil-persist": "4.2.0"
  },
  "devDependencies": {
    "@vheemstra/vite-plugin-imagemin": "1.0.8",
    "imagemin-gifsicle": "7.0.0",
    "imagemin-mozjpeg": "10.0.0",
    "imagemin-pngquant": "9.0.2",
    "imagemin-svgo": "10.0.1",
    "imagemin-webp": "8.0.0",

		...
        
  },
  "keywords": [
    "react",
    "typescript",
    "firebase"
  ]
}

 

[vite.config.ts]

import path from 'path';
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';
import imageminSvgo from 'imagemin-svgo';
import imageminWebp from 'imagemin-webp';
import react from '@vitejs/plugin-react-swc';
import imageminMozjpeg from 'imagemin-mozjpeg';
import imageminPngQuant from 'imagemin-pngquant';
import imageminGifSicle from 'imagemin-gifsicle';
import viteImagemin from '@vheemstra/vite-plugin-imagemin';

export default defineConfig({
  resolve: {
    alias: [{ find: '@', replacement: path.resolve('src') }],
  },
  define: {
    'process.env': {},
  },
  plugins: [
    react(),
    svgr(),
    viteImagemin({
      plugins: {
        jpg: imageminMozjpeg(),
        png: imageminPngQuant(),
        gif: imageminGifSicle(),
        svg: imageminSvgo(),
      },
    //makeWebp 프로퍼티는 WebP 이미지를 생성하기 위한 설정을 제공합니다.
      makeWebp: {
        plugins: {
          jpg: imageminWebp(),
          png: imageminWebp(),
        },
      },
    }),
  ],
  server: {
    host: 'localhost',
    port: 3000,
  },
  css: {
    devSourcemap: true,
  },

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          reactRouter: ['react-router-dom'],
          axios: ['axios'],
          fbApp: ['@firebase/app'],
          fbAuth: ['@firebase/auth'],
          fbStore: ['@firebase/firestore'],
          fbStorage: ['@firebase/storage'],
          swiper: ['swiper'],
        },
      },
    },
  },
});

 

 

---

📌 @vheemstra/vite-plugin-imagemin

Vite 빌드 도구를 위한 플러그인으로, imagemin을 사용하여 프로젝트의 이미지를 최적화하는 기능을 제공합니다.

 

@vheemstra/vite-plugin-imagemin

 

📌 imagemin-gifsicle

 imagemin의 플러그인 중 하나로, GIF 이미지를 최적화하기 위해 gifsicle이라는 도구를 사용합니다. gifsicle은 GIF 이미지의 크기를 줄이고 애니메이션 속도를 조정하며, 기타 여러 가지 유용한 기능을 제공합니다. 따라서 imagemin-gifsicle은 이미지를 최적화하고 프로젝트의 로딩 속도를 향상시키는 데 도움이 됩니다.

 

imagemin-gifsicle

 

📌 imagemin-mozjpeg

JPEG 이미지를 최적화합니다. 최신 버전의 mozjpeg 알고리즘을 사용하여 높은 압축률과 이미지 품질을 유지합니다.

 

imagemin-mozjpeg

 

📌 imagemin-pngquant

PNG 이미지를 최적화합니다. pngquant 도구를 사용하여 이미지 품질을 유지하면서 파일 크기를 줄입니다.

 

imagemin-pngquant - npm search

 

 

 

📌 imagemin-svgo

SVG 이미지를 최적화합니다. svgo 도구를 사용하여 SVG 코드를 최적화하고 불필요한 요소를 제거하여 파일 크기를 줄입니다.

 

imagemin-svgo

 

📌 imagemin-webp

WebP 이미지를 최적화합니다. webp 도구를 사용하여 이미지 품질을 유지하면서 파일 크기를 줄입니다.

imagemin-webp