React - 번들러와 빌드

Hunjin·2025년 11월 2일

SOPT

목록 보기

5/6

SOPT 37기 WEB 파트 호기심스 스터디 내용 정리 아티클입니다

번들러란?

리액트에서 번들러(Bundler)는 애플리케이션 개발에 필수적인 도구로,
최종 사용자에게 배포하기 위해 프로젝트의 모든 소스 코드와 에셋을 효율적으로 하나 또는 몇 개의 파일로 묶어주는 역할을 합니다.

그럼 번들러의 주요 역할에 대해 알아보곘습니다.

번들러의 주 역할

의존성 해결 및 모듈 병합 (Bundling)

역할: 리액트 프로젝트는 여러 개의 JavaScript, CSS, 이미지, 그리고 node_modules의 라이브러리 등 수많은 모듈로 구성되며 번들러는 이 파일들을 추적하여 모든 의존성을 파악합니다.
기능: 분리된 모듈들을 브라우저가 로드할 수 있는 단일 파일(번들)로 합칩니다. 이는 브라우저가 수많은 개별 HTTP 요청을 보내는 대신, 몇 개의 요청만으로 모든 코드를 로드하게 하여 초기 로딩 속도를 크게 개선합니다.

코드 변환

역할: 최신 리액트 코드, JSX (JavaScript XML) 문법, ES6+ 문법, TypeScript 등을 사용합니다.
하지만 모든 브라우저가 이 최신 문법을 완벽하게 지원하지 않을 수 있습니다.
기능: 번들러는 최신 문법으로 작성된 코드를 모든 브라우저에서 호환 가능한 표준 JavaScript 형태로 변환해줍니다.

🚚 번들러를 쉽게 말하면 집을 이사하기 위해 이삿짐을 싸는데 짐들에는
컴포넌트 파일 (JavaScript/JSX) 짐, 스타일 파일 (CSS/Sass) 짐, 이미지/폰트 짐 등이 있습니다.
그래서 이삿짐 센터에서 이 짐들을 새로운 집으로 옮기기 위해 하나 또는 여러개의 박스에 짐들을 담아 정리하는 과정(번들링)을 가지며 상자의 여유공간 낭비를 최소화하기 위해 최대한 촘촘하게 박스를 채웁니다(최적화 및 압축)
그리고 오래된 트럭에도 물건을 담을 수 있도록 짐들을 더 안전하게 변환(트랜스파일링)해줍니다.

Webpack

Webpack은 오랫동안 JavaScript 생태계에서 가장 널리 사용되어 온 번들러입니다.
Webpack은 프로젝트의 모든 자산(JavaScript, CSS, 이미지 등)을 모듈로 취급하고,
이 모듈들의 의존성 그래프를 생성하여 브라우저가 로드할 수 있는 최적의 번들 파일로 묶어주는 도구입니다.

Webpack 핵심 개념

Entry

엔트리 속성은 웹팩에서 웹 자원을 변환하기 위해 필요한 최초 진입점

module.exports = {
  entry: {
    login: './src/LoginView.js',
    main: './src/MainView.js'
  }
}

Output

Webpack이 번들링 작업을 완료한 후, 결과물(번들 파일)을 저장할 경로와 파일명을 지정

module.exports = {
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist')
  }
}

Loader

웹팩이 애플리케이션을 해석할때 자바스크립트 파일이 아닌 HTML, CSS, Images, font 등을 변환할 수 있게 도와주는 속성입니다.
Webpack은 기본적으로 JavaScript와 JSON만 이해합니다. 로더는 다른 유형의 파일을 읽고, 이를 JavaScript 모듈로 변환하거나 브라우저가 이해할 수 있는 형태로 트랜스파일(Transpile)하는 역할을 합니다.

Plugin

웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성으로,
로더가 파일 단위의 변환을 담당한다면, 플러그인은 번들된 청크나 전체 빌드 프로세스에 개입합니다.

esbuild

esbuild는 최근 몇 년간 등장한 번들러로, Webpack의 느린 처리 속도 문제를 해결하기 위해 설계되었습니다.

esbuild의 핵심 특징

빠른 속도

Go 언어 기반: Webpack이나 Babel처럼 JavaScript 기반이 아닌 Go 언어로 작성되었습니다. Go 언어는 컴파일 언어로 JavaScript 엔진의 제약에서 벗어나 효율적인 멀티 스레딩과 병렬 처리가 가능합니다.
병렬 처리 극대화: 코드를 읽고 분석하고 변환하는 모든 과정을 병렬로 처리하여, 기존 JavaScript 기반 도구들에 비해 빌드 속도가 10배에서 100배까지 빠를 수 있습니다.

간결한 설계와 통합

기능 내장: 핵심 기능(트랜스파일링, 번들링, 축소화 등)을 자체적으로 내장하고 있어, 별도의 Babel 설정 파일이나 복잡한 webpack.config.js가 필요 없습니다.
쉬운 설정: 대부분의 기능을 커맨드라인 옵션이나 간단한 API로 설정할 수 있어, 빌드 환경 구성의 복잡성을 크게 낮춥니다.

Vite

Vite는 기존 번들러(Webpack, Rollup, Parcel 등)가 가진 근본적인 성능 문제를 해결하고, 브라우저의 새로운 기술을 활용하여 개발자의 생산성과 만족도를 극적으로 향상시키기 위해 등장했습니다.

Vite를 사용해야 하는 이유

문제점

긴 서버 구동 시간: 콜드 스타트 방식으로 개발 서버를 구동할 때, 모든 소스 코드에 대해 크롤링 및 빌드 작업을 마쳐야만 페이지를 제공할 수 있었습니다.

느린 소스 코드 갱신 시간: 소스 코드를 업데이트할 때마다 전체 또는 영향받는 파일들을 다시 번들링해야 했으며,
애플리케이션이 커질수록 갱신 시간이 선형적으로 증가했습니다. 이로 인해 HMR조차도 명확한 해결책이 되지 못했습니다.

그래서 vite는 애플리케이션의 모듈을 디펜던시와 소스 코드 두 가지 카테고리로 나누어 개발 서버의 시작 시간을 개선하였습니다.

디펜던시 처리: esbuild 활용

Esbuild 사전 번들링: Vite는 Go로 작성된 Esbuild를 사용하여 디펜던시를 사전 번들링합니다.
초고속 성능: Esbuild는 Webpack 같은 기존 번들러 대비 10배에서 100배 빠른 속도를 제공하여, 수백 개의 모듈을 가진 큰 디펜던시 번들링 과정을 매우 효율적으로 만듭니다.

소스 코드 처리: Native ESM 활용

Native ESM 제공: Vite는 소스 코드를 Native ESM을 이용해 제공합니다. 이것은 본질적으로 브라우저가 번들러 작업의 일부를 담당하도록 합니다.

요청 시 변환: Vite는 브라우저가 요청하는 대로 소스 코드를 변환하고 제공하기만 하면 됩니다. 조건부 동적 import 이후의 코드는 현재 화면에서 실제로 사용되는 경우에만 처리됩니다.

HMR

ESM 기반 HMR: Vite는 번들러가 아닌 ESM을 이용한 HMR을 지원하며, 어떤 모듈이 수정되면 그저 수정된 모듈과 관련된 부분만을 교체하고, 브라우저에서 요청 시 교체된 모듈을 전달할 뿐입니다. 앱 사이즈가 커져도 갱신 시간에는 영향을 끼치지 않습니다.