전통적인 JavaScript 번들러 및 빌드 도구들은 상대적으로 느린 빌드 시간을 가지고 있다. 이러한 도구들은 인터프리터 언어인 JavaScript로 작성되어 있어서 크고 복잡한 프로젝트에는 빌드 시간이 길어지는 경향이 있었다.
esbuild 창시자인 Evan Wallace는 이러한 문제를 해결하기 위해 새로운 접근 방식을 모색했다. 그는 esbuild를 Go 언어로 개발함으로써 다음과 같은 장점을 제공하는 도구로 만들었다.
- 성능 향상: Go 언어는 컴파일 언어로 상당히 빠른 실행 속도를 제공한다. esbuild는 기존의 JavaScript 기반 도구들 보다 몇 배 빠른 속도로 코드를 번들링 하고 빌드 할 수 있다.
- 병렬 처리: Go 언어의 강력한 동시성(concurrency) 지원 덕분에 esbuild는 효율적인 멀티 코어 처리를 활용하여 작업을 빠르게 수행할 수 있다.
- 효율적인 프로세스: esbuild는 번들링, 경량화(minification), 코드 변환 등 여러가지 빌드 관련 작업을 하나의 단계에서 처리하여 프로세스를 간소화하고 있다.
이러한 특징들은 esbuild가 개발 커뮤니티에서 주목을 받았고 대규모 프로젝트나 성능에 민감한 환경에서 큰 장점을 제공하고 있다. 그렇게 esbuild는 현대 웹 개발에 있어서 번들링 및 빌드 과정을 개선한 주요 도구로 자리 잡고 있다.
esbuild를 활용한 React 개발 환경 구성
React 개발에 있어서 Vite는 인기 있는 번들링 도구 중 하나이다. Vite는 esbuild를 사용해 번들링 속도를 크게 향상시켰다. 이러한 장점을 이해하고 활용하기 위해 esbuild로 직접 React 개발 환경을 구성해 보자.
// package.json
{
...
"scripts": {
"dev": "node esbuild/serve.js",
"build": "node esbuild/build.js"
},
"devDependencies": {
"@types/react": "^18.2.33",
"@types/react-dom": "^18.2.14",
"esbuild": "^0.19.7",
"typescript": "^5.2.2"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
...
}// esbuild/serve.js
async () => {
try {
const context = await esbuild.context({
entryPoints: ["src/main.ts"],
bundle: true,
sourcemap: true,
logLevel: "info",
outfile: 'dist/bundle.js',
banner: {
js: `new EventSource('/esbuild').addEventListener('change', () => location.reload());`,
},
});
await context.watch(); // Detecting Source Code Changes
await context.serve({ // Running a development server
port: 3000,
servedir: "dist",
fallback: "dist/index.html",
});
} catch (err) {
console.error("Failed to build client:", err);
process.exit(1);
}
}entryPoints를 통해 메인 소스 파일을 지정하고, bundle, sourcemap, logLevel과 같은 옵션들로 번들링 과정을 제어하며, outfile을 통해 번들링된 파일의 출력 경로를 설정한다.
esbuild는 개발 서버를 구동하고, 소스 코드가 변경될 때마다 웹 페이지를 자동으로 새로고침 하는 기능을 제공 한다. context.watch() 메소드는 파일 변경을 감지하고, context.serve()는 개발 서버를 구동하는 역할을 한다.
esbuild를 활용한 프로덕션 환경을 위한 빌드
// esbuild/build.js
async () => {
try {
const result = await esbuild.build({
entryPoints: ["src/main.ts"],
bundle: true,
minify: true,
metafile: true,
logLevel: "debug",
outfile: "dist/bundle.js",
});
console.log(await esbuild.analyzeMetafile(result.metafile));
} catch (error) {
console.error("Build failed:", error);
process.exit(1);
}
};esbuild를 사용하여 프로덕션 빌드를 구성하는 예시로 entryPoints를 통해 메인 소스 파일을 지정하고, bundle , minify ,outfile 옵션들로 번들링 과정을 제어한다.
logLevel 옵션에서 debug 설정은 빌드 과정에서 발생할 수 있는 문제를 해결하는 데 유용한 정보를 제공한다.
metafile 분석 기능을 사용하면 빌드의 세부 사항을 확인하고 최적화 할 수 있다. analyzeMetafile 메소드를 사용하여 빌드 정보를 출력 할 수 있다.
esbuild와 React를 결합한 개발 환경 구성 및 빌드 배포는 성능과 효율성을 향상시키는 데 중요한 역할을 한다. esbuild는 다양한 플러그인과 확장 기능을 제공하여 각기 다른 개발 요구사항에 맞춰 작업할 수 있도록 하고 있다. 하지만 일부 고급 기능이나 플러그인에서는 Webpack 같은 다른 도구에 비해 부족한 부분이 있을 수 있다. 그렇기 때문에 프로젝트의 특성에 맞게 적절한 도구 선택이 필요하겠다.
본문에 나온 예시 코드의 전체 내용은 아래 링크를 참조.
- GitHub: esbuild-react-starter
