VITE

Vite(비트)는 차세대 프론트엔드 빌드 툴입니다.
기존의 CRA(Create React App)보다 훨씬 빠르고 가볍고 유연한 개발환경을 제공합니다.

 

특징	설명
빠른 개발 서버 구동	번들링 없이 바로 실행 (ESM 기반)
빠른 HMR (Hot Module Replacement)	코드 바꿔도 브라우저 바로 갱신됨
최적화된 빌드 속도	Rollup 기반의 고속 빌드
구성 간단함	설정 파일 (vite.config.js)로 유연하게 설정 가능
TypeScript, JSX 기본 지원	React와 바로 호환됨

 

vite 외부모듈 번들링

 

📦 번들링 / 모듈 로딩 방식 정리

 

구분	설명
ESM (ECMAScript Module)	import/export 문법, 브라우저에서도 네이티브 지원, Vite·Rollup·modern Webpack에서 주로 사용
CJS (CommonJS)	require/module.exports 문법, Node.js에서 오래된 방식, Webpack이 변환해서 사용할 수 있음

 

 

📊 요약 비교표

 

항복	Webpack (dev)	Webpack (build)	Vite (dev)	Vite (build)
외부 모듈 처리	번들링 필요	최종 번들링	ESM으로 직접 import (Pre-bundling 시 존재)	Rollup 번들링
번들링 방식	Webpack 자체	Webpack 자체	개발 시 번들링 없음 (optimizeDeps 있음)	Rollup 번들
CJS 모듈 처리	내부적으로 변환	내부적으로 변환	optimizeDeps로 CJS → ESM 변환	Rollup이 처리

 

vite는 개발환경에서 외부모듈을 ESM방식으로 로드합니다. 예를들어 Vite는 기본적으로 ESM (ES Modules)을 선호하는데, 만약 `@mui/icons-material`이 CJS (CommonJS) 모듈로 되어 있으면  개발환경인 SSR에서는 Vite가 이를 제대로 처리하지 못할 수 있습니다.

 

아래와 같이 미리 번들링 대상에 추가하면 이를 해결할 수 있습니다.

 

vite.config.js

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
  ssr: {
    noExternal: [process.env.NODE_ENV === 'development' ? '@mui/icons-material' :' /^@mui\//'],
  },
});

 

vite 번들링 대상

1. Entry Points에 의한 분리

 

엔트리 포인트(즉, 애플리케이션의 진입점)가 여러 개일 때, 각 엔트리 포인트는 독립적인 청크로 처리될 수 있습니다. 예를 들어, index.html 파일에 여러 엔트리 포인트가 설정되어 있으면, 각 파일이 별도의 번들로 분리됩니다.

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: {
        main: 'src/main.tsx',
        admin: 'src/admin.tsx'
      }
    }
  }
}

 

위와 같이 설정하면, main.tsx와 admin.tsx는 각각 독립적인 청크로 번들링되어, main.js와 admin.js라는 파일이 생성됩니다.

 

2. 동적 import에 의한 분리

 

동적 import(import())를 사용하면 Vite는 해당 모듈을 다른 청크로 분리하여 필요한 시점에 로드합니다. 예를 들어, 라우팅을 사용하는 경우 페이지별로 동적으로 로드되는 컴포넌트들이 각각 청크로 분리됩니다.

// React Router 예시
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

 

이 경우, Home과 About은 각각 별도의 청크로 분리되며, 파일 이름은 보통 home.js, about.js와 같은 형식으로 생성됩니다.

 

3. 공유된 모듈

 

애플리케이션의 여러 부분에서 공유되는 모듈(예: 라이브러리나 공통 유틸리티 함수 등)은 Vite가 이를 최적화하여 하나의 청크로 분리할 수 있습니다. 이러한 공유 모듈은 여러 엔트리 포인트나 동적 import를 통해 로드되기 때문에, 중복을 줄이기 위해 하나의 청크로 합쳐질 수 있습니다.

 

예를 들어, 여러 페이지 컴포넌트에서 동일한 라이브러리를 사용한다면, 해당 라이브러리는 별도의 청크로 분리되어 캐시되게 됩니다.

 

4. 외부 라이브러리 ( DEV환경에서는 번들링되지 않음 )

 

Vite는 외부 라이브러리들을 외부 청크로 처리할 수도 있습니다. build.rollupOptions.external 옵션을 사용하여 외부 종속성을 제외하거나 별도로 분리할 수 있습니다.

 

// vite.config.js
export default {
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'] // react와 react-dom을 별도의 외부 청크로 처리
    }
  }
}

 

이렇게 설정하면 react와 react-dom은 번들에 포함되지 않고, 별도의 외부 청크로 로드됩니다.

 

React와 React Router는 자동으로 번들링됩니다. 기본적으로 Vite는 React와 React Router를 node_modules에서 미리 최적화(트랜스파일링, 압축 등)하여, 애플리케이션 코드에서 사용하는 모듈을 포함합니다. 예를 들어:

• react
• react-dom
• react-router-dom (React Router v7)

 

chunk로 생성되는 파일은 동적 import, 여러 엔트리 포인트, 공통 모듈, 외부 라이브러리 등으로 분리됩니다.

chunk된 파일들은 처음 접속 시에 모두 다운로드되지 않으며, 동적으로 필요할 때만 다운로드됩니다. 예를 들어, 동적 import로 분리된 모듈은 해당 모듈이 필요한 시점에 로드됩니다.

 

---

청크 종류

Vite에서 생성되는 청크는 보통 다음과 같은 종류로 나뉩니다:

• Main Chunk: 기본적인 애플리케이션 코드가 포함된 메인 번들.
• Lazy-loaded Chunk: 동적 import나 코드 스플리팅에 의해 분리된 파일들.
• Vendor Chunk: 외부 라이브러리나 공통 모듈들이 포함된 번들.
• CSS Chunk: CSS 파일이 별도로 분리되는 경우.

 

 

---