Skip to main content

개발 경험 개선을 위한 차세대 빌드 소개

React - 차세대 Build Tool 비교​

who: Alex

build-tools.png

기존 빌드 방식​

개발 서버에 webpack, rollup, parcel 을 사용하여 소스코드와 node_modules 폴더의 전체 코드를 번들로 제공해 Babel, Typescript, PostCSS 빌드 프로세스를 통해 실행한 후 번들된 코드를 브라우저에 푸시하는 방식. → 모든 작업이 완료되어야 하고 캐싱 및 최적화 작업을 모두 마친 후에도 개발 서버 코드베이스가 커져 속도가 점점 늦춰지게 됨.

차세대 빌드 방식​

snowpack, vite, wmr 등이 생겨났는데 이 방식은 기존과 달리 브라우저가 대신 import 문을 찾아 모듈에 대한 http 요청을 할 때까지 기다리고 이 요청이 이뤄진 후에만 요청된 모듈과 모듈의 가져오기 트리에 있는 leaf nodes 에 변환을 적용해 브라우저에 제공합니다. → 개발 서버로의 푸시 과정이 굉장히 줄어들어 작업 속도가 현저히 빨리집니다. esbuild를 부분적으로 사용하는데 많은 비용이 드는 변환은 피하고 병렬화를 활용해 Go언어를 사용함으로써 매우 빠르게 코드를 작성합니다.

esbuild​

Untitled

  • 특징

    • esbuild는 피그마의 CTO(Evan Wallace)에 의해 만들어졌고 주요 특징은 노드 기반 번들러보다 10~100배 빠른 빌드를 제공한다는 것.
    • create-react-app에서 사용되지 않아 사용을 위해 create-react-app-esbuild, estrella 를 대신 사용하기도 하며 빌드 단계에서는 esbuild를 사용하는 snowpack을 사용하기도 한다.
    • esbuild는 번들러 속도가 엄청나게 빨라 개발자들이 빠른 개발을 할 수 있도록 돕는다. 번외지만 번들 크기를 줄이는데는 Rollup, terser 를 사용해 줄이기도 한다.
    • esbuild는 —serve 옵션을 통해 개발서버도 제공한다. 개발 서버의 경우 파일 시스템을 사용하지 않고 메모리에 직접 제공한다.(브라우저가 최신 모듈 버전을 가져오는 것을 보장함)
    • live/hot-reload 를 지원하진 않고 저장 후 브라우저를 새로고침할 때마다 새롭게 빌드됨을 확인할 수 있음.(esbuild가 적용되고 hot reload 및 react 기본이 포함된 저장소)

  • 사용법

    # 설치 및 확인
    npm install esbuild, react, react-dom
    ./node_modules/.bin/esbuild --version
    import * as React from "react";
    import * as Server from "react-dom/server";

    let Greet = () => <h1>Hello, world!</h1>;
    console.log(Server.renderToString(<Greet />));
    # 번들 파일 생성
    ./node_modules/.bin/esbuild app.jsx --bundle --outfile=out.js
    // 결과
    <h1 data-reactroot="">Hello, world!</h1>

  • 빌드

    {
      "scripts": {
        "build": "esbuild app.jsx --bundle --outfile=out.js"
      }
    }

snowpack​

Untitled

  • 특징
  • 사용법 
    # 설치
    npm i -D snowpack
    "scripts": {
        "start": "snowpack dev",
        "build": "snowpack build"
    }
    // source: remote는 streaming imports를 활성화한다.
    // streaming imports는 Snowpack이 기존 import 구문(예: import React from 'react')을 Skypack에 있는 CDN import 구문으로 변환해서 npm 설치를 우회할 수 있도록 활성화한다.
    // snowpack build 명령은 기본적으로 소스파일구조를 출력 폴더에 복사한다. 자바스크립트로 컴파일되는 파일(tsx,ts,jsx,js,json,vue,svelte)은 브라우저 친화적인 자바스크립트 모듈로 변환한다.
    // 만약 소스코드가 많은 파일로 분할 시 많은 요청이 발생할 수 있다. 하지만 esbuild를 의존성으로 가지고 있기 때문에 optimize객체를 이용해 esbuild가 코드를 번들, 축소, 컴파일 하도록 할 수 있다.
    module.exports = {
      packageOptions: {
        source: "remote",
      },
      optimize: {
        bundle: true,
        minify: true,
        target: "es2018",
      },
    };

vite​

Untitled

  • 특징
    • vite는 Vue제작자(Evan You)가 개발했다.
    • esbuild가 빌드에 집중하고 snowpack이 개발서버에 집중하는 반면 vite는 개발서버와 rollup을 이용한 최적화된 빌드 커맨드 모두를 지원한다.
    • 작은, 큰 프로젝트 모두 적합하며 아주 빠른 번들속도와 간편한 구성이 특징.
    • 모든 의존성을 esbuild를 이용해 단일 자바스크립트 모듈로 사전 번들링을 진행하고 그 후 캐시된 http헤더와 함께 제공된다.
    • 명확한 에러 메시지를 제공해 코드블록과 줄번호까지 보여줌.
    • streaming imports를 지원하진 않아 npm 의존성을 설치해줘야 함.
    • CSS 코드 스플릿팅 지원.
  • 사용법 
    # 쉽게 프로젝트를 생성할 수 있고 다양한 템플릿을 선택할 수 있음.(vanilla, vanilla-ts, vue, vue-ts, react, react-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts)
    npm create vite@latest
    {
      "scripts": {
        "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
        "build": "vite build", // build for production
        "preview": "vite preview" // locally preview production build
      }
    }

    wmr​

    Untitled
    • 특징
      • wmr(web modules runtime)은 vite와 같이 개발서버, 빌드 단계를 모두 제공하는 빌드 도구이다.
      • Preact 개발자에게 아주 적합한 도구다.
      • npm 의존성이 없음에도 hot-module-replacing개발 서버와 최적화된 빌드를 포함하고 있음.
      • 빠른 프로토타입 개발 필요 시 사용하기 좋음.
      • 하지만 문서가 상세하지 않고 커스터마이징이 많이 필요할수록 사용하기 힘듬.
    • 사용법 
      npm init wmr [project-name]
      // 아래와 같이 별칭을 지정해줘야 한다.
      "alias": {
        "htm/preact": "htm/react",
        "react": "es-react"
      },
      // 별칭이 지정된대로 사용해야 함.
      import { React, ReactDOM,} from 'es-react';

    결론​

    설치 개발서버 프로덕션 빌드 추가 기능 아직 많은 것들이 개선되어야 하고 계속 좋은 기능들이 추가되고 있지만 기존의 느린 번들링 속도와 프러덕션 빌드로 인해 고통받고 있다면 좋은 해결책이 될 것으로 보인다.