React 성능 개선을 고려한 배포(build) 최적화

⭐️  코드 스플리팅

        각각의 페이지, 컴포넌트,라이브러리를 쪼개줌 ➡️ 500kb이하의 작은 청크파일로 유지하고있기 때문에 효과적으로 렌딩속도 개선!

 

React 성능 개선을 고려한 배포(build) 최적화

 

[ 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: {
        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'],
        },
      },
    },
  },
});

---

 

 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'],
        },
      },
    },
  },

위 코드는 Rollup의 설정 중 하나인 manualChunks를 설정하는 예시입니다. 

manualChunks는 번들링된 파일에서 직접적인 의존성이 없는 모듈을 분리하여 별도의 청크(chunk)로 생성하도록 지시합니다. 

이를 통해 초기 로딩 시간을 줄일 수 있습니다.

 

위 설정 예시에서는 다음과 같은 모듈들을 분리하여 별도의 청크로 생성합니다.

위와 같은 설정을 통해 초기 로딩 시간을 줄일 수 있고, 필요한 모듈만 사용하도록 청크를 최적화할 수 있습니다.

 

---

✅ 참고

https://rollupjs.org/configuration-options/

Configuration Options | Rollup

https://vitejs.dev/config/build-options.html#build-rollupoptions

Vite

 

https://hyebeen2658.tistory.com/52