Web/React

React 번들링

재시민 2024. 12. 1. 21:10
반응형

번들링이란?

여러 제품이나 코드, 프로그램을 묶어서 패키지로 제공하는 행위, 웹 애플리케이션을 제공하기 위한 파일 묶음

 

번들링에는 다양한 방법이 있습니다. 대표적으로 Webpack, Vite 등이 있죠

Webpack

Webpack 이란 여러 개의 파일을 하나의 파일로 합쳐주는 모듈 번들러

모듈 번들러

  • HTML, CSS, JS 등의 자원을 전부 각각의 모듈로 보고 이를 조합해 하나의 묶음으로 번들링하는 도구
  • 변수들의 스코프 문제 해결
  • 각 자원을 호출할 떄 생겨나는 네트워크 쪽의 코스트도 신경써야 하기에 등장

등장 배경

  • 웹 앱의 빠른 로딩 속도와 높은 성능을 위해서 필요한 파일들을 묶어 제공
  • 두개의 다른 js 파일에서 같은 변수를 사용할 경우 충돌

빌드와 번들링

  1. 빌드
    • 개발이 완료된 앱을 배포하기 위해 하나의 폴더로 구성하여 준비하는 작업
  2. 번들링
    • 파일을 묶는 작업, 모듈간의 의존성 관계를 파악해 그룹화하는 작업

Webpack 핵심개념

module.exports = {
  target: ["web", "es5"],
  entry: "./src/script.js",
  output: {
    path: path.resolve(__dirname, "docs"),
    filename: "app.bundle.js",
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
    new MiniCssExtractPlugin(),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ]
  }
};

 

Target

웹팩은 다양한 환경과 target을 컴파일한다.

  • target의 기본값은 web
  • esX 를 넣으면 지정된 ECMAScript 버전으로 컴파일

Entry

개발자가 작성한 코드의 시작점

  • 리액트의 경우 index.js 에서 HTML 엘리먼트 하나에 리액트 코드를 적용하는것 부터 시작
  • Entry 속성은 Entry point 라고 한다.
    • Webpack 은 Entry point 를 기반으로 직간접적 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음

Output

생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 웹팩에 알려주는 역할

Loaders

loader를 사용하면 웹팩이 다른 유형의 파일을 처리하거나, 유효한 모듈로 변환해 애플리케이션에 사용하거나 디펜던시 그래프에 추가할 수 있다.

Plugins

번들을 최적화하거나 애셋을 관리하고, 또는 환경변수 주입 등 광범위한 작업을 수행한다.

  • require 을 통해 플러그인 요청

Mode

Browser Compatibility

 

Vite

빠르고 만능, Esbuild와 Rollup의 장점을 합쳤다.

  • ES 모듈 시스템을 사용하여 필요한 모듈만 로드하고, 핫모듈 리플레이스먼트 (HMR) 성능이 뛰어나 빠른 개발 서버 속도를 자랑

특징

  • 빠른 개발 서버 : 모듈을 ESM 형식으로 제공해, 필요한 모듈만 즉시 로드
  • HMR : 코드 변경 사항을 즉시 반영하여 브라우저 새로고침 없이도 UI 업데이트 가능
  • 빠른 번들링 : Esbuild를 사용해 번들링 속도 향상

흔히 리액트 프로젝트를 만드는데 create-react-app 혹은 vite 로 생성하게 되는데 이 둘의 차이가 극명하다.

CRA vs Vite

항목 Create React App (CRA) Vite
번들링 도구 Webpack ESBuild 또는 Rollup
빌드 속도 상대적으로 느림 매우 빠름 (ESBuild 기반)
개발 서버 성능 느린 초기 빌드와 Hot Module Replacement(HMR) 속도 빠른 초기 빌드와 즉각적인 HMR
설치 및 구성 자동화된 설정, 시작하기 쉬움 간단한 설정, 플러그인 기반으로 높은 확장성 제공
출력 번들 크기 기본적으로 최적화가 부족할 수 있음 작은 번들 크기, Tree Shaking 및 코드 분할 기본 제공
플러그인 지원 제한적 (Webpack 플러그인에 의존) 풍부한 플러그인 생태계
ESM 지원 제한적 (CommonJS 중심) 기본적으로 ES Module 지원
구성 유연성 제한적 (eject를 해야 커스텀 가능) 유연한 설정 파일 (vite.config.js)로 커스텀 가능
로드 시간 번들 파일 크기에 따라 느릴 수 있음 ESBuild 기반으로 빠른 로드 시간
SSR(서버 사이드 렌더링) 직접 지원하지 않음 내장된 SSR 지원
사용 사례 기존 React 프로젝트에서 간편한 시작을 원할 때 빠른 개발 환경과 최적화된 번들링이 필요한 프로젝트
커뮤니티 더 많은 사용 사례와 기존 자료 빠르게 성장하는 커뮤니티
호환성 오래된 브라우저 및 라이브러리와 높은 호환성 최신 브라우저 중심, 구형 브라우저와의 호환성은 Polyfill 필요

 

결론

CRA는 설정 없이 바로 사용할 수 있으며, React의 공식 지원 도구이지만, 대규모 프로젝트에서는 빌드 속도가 느려질 수 있고, 설정을 변경하려면 eject 명령이 필요하는 단점이 있고,

 

Vite는 매우 빠른 개발 서버와 빌드 성능을 제공하며, 설정 파일을 통해 유연하게 설정을 변경할 수 있고, 다양한 모던 프레임워크를 지원하는 동시에 빠르게 성장하는 도구다.

 

둘 중의 프로젝트에 맞는 번들링 방식을 적용하면 된다.

반응형
저작자표시