Overview

Introduction
Environment

Specs
Windows

Build Test

Using Babel
Using Esbuild

Conclusions

Pros
Cons

References

Introduction

Create React App(CRA)으로 구축된 개발환경의 빌드 시간 단축

Environment

Specs

프로세서	Intel(R) Core(TM) i5-9600K CPU @ 3.70GHz 3.70 GHz
RAM	32.0GB(31.9GB 사용 가능)
시스템 종류	64비트 운영 체제, x64 기반 프로세서

Windows

에디션	Windows 11 Pro
버전	22H2
설치 날짜	2023-‎02-‎03
OS 빌드	22621.1265

Build Test

Using Babel

빌드 시간을 측정하기 위해서 Speed Measure Plugin(SMP)을 이용한다

⚠️ SMP 자체가 빌드를 느리게 하기 때문에 참고만 해야 한다

SMP plugin 설치

$ yarn add -D speed-measure-webpack-plugin

CRA에서 웹팩 설정을 바꾸기 위해 CRACO를 사용하고 있다

CRACO 설정에 SMP를 넣어준다

// craco.config.js

...
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = {
  webpack: {
    configure: (webpackConfig) => smp.wrap(webpackConfig),
  },
	...
};

웹팩은 빌드 작업을 수행할 때 node_modules/.cache 폴더에 캐시를 생성한다

정확한 성능 측정을 위해서 .cache가 없을 때 성능과 있을 때 성능을 비교한다

.cache 없을 때 빌드 결과

6분 38.48초 걸렸다

.cache 있을 때 빌드 결과

3분 16.072초 걸렸다

babel-loader가 전체 시간의 2/3가량 차지했다

babel-loader를 esbuild로 대체해보자

Using Esbuild

Vite를 사용하면 좋겠지만 각종 설정이 웹팩에 크게 의존하고 있어 어려움이 있다

따라서 기존 환경에 esbuild plugin을 적용해 esbuild가 웹팩 대신 번들링하도록 만든다

craco-esbuild plugin 설치

> yarn add -D craco-esbuild

설정 파일에 plugin을 추가한다

// craco.config.js

...
const CracoEsbuildPlugin = require('craco-esbuild');

module.exports = {
	...
  plugins: [
		...
    {
      plugin: CracoEsbuildPlugin,
    },
  ],
};