서버리스 Webpack vs Esbuild

들어가며

안녕하세요! 원더월에서 백엔드 서비스를 개발하고 있는 유근수라고 합니다.
원더월 백엔드 서비스는 대부분 서버리스로 구성되어 있고, serverless-webpack를 활용하고 있었습니다.
최근에 ts-loader/ts-jest 를 swc-loader/swc-jest 로 변경했었고,
이번에 serverless-esbuild 로 바꾸게 된 과정과 효과를 소개해보려고 합니다.

• NestJS
• typeorm / MySQL
• Serverless Framework
  • serverless-webpack
  • ts-loader
  • swc-loader
  • serverless-esbuild

비교 결과부터 미리 보고 싶으시면, 아래 링크를 눌러보세요~

비교 결과 보기

SWC

SWC는 Rust로 제작된 빌드툴입니다. 번들러는 아직 작업중으로 되어있어서, webpack에 swc-loader만 적용해서 사용했습니다.

기존에 사용하던 nest build와 속도를 비교해보면, 엄청난 속도 향상을 느낄 수 있습니다.
게다가 ts-jest도 swc-jest로 대체할 수 있습니다. 마찬가지로 굉장히 빨라진 걸 알 수 있습니다.

	nest build	swc
빌드 시간	10.41s	0.67s
	ts-jest	swc-jest
테스트 시간	16s	5s

사용된 package.json script는 아래와 같습니다.

    "build:webpack": "nest build --webpack",
    "build:swc": "swc --ignore \"**/*.spec.ts\" --delete-dir-on-start --out-dir dist/src/ src/",

테스트는 jest 설정의 transform 부분만 변경하면 됩니다.

    "transform": {
        "^.+\\.(t|j)s$": "ts-jest"
    },

    "transform": {
        "^.+\\.(t|j)s$": "swc-jest"
    },

사용한 swc 설정 파일(.swcrc)는 아래와 같습니다.

{
    "sourceMaps": true,
    "module": {
        "type": "commonjs",
        "lazy": true
    },
    "jsc": {
        "target": "es2021",
        "parser": {
            "syntax": "typescript",
            "tsx": false,
            "decorators": true,
            "baseUrl": "./"
        },
        "transform": {
            "legacyDecorator": true,
            "decoratorMetadata": true
        },
        "paths": {
            "@src/*": ["./src/*"]
        },
        "keepClassNames": true
    }
}

로컬 환경에서의 빌드 속도와 테스트 속도는 큰 향상이 있었지만, 실제 배포에서는 큰 차이를 느낄 수 없었습니다.

Esbuild

esbuild는 Go 언어로 작성된 빌드툴입니다. serverless-esbuild라는 플러그인도 있어서 serverless-webpack을 대체할 수 있습니다.

serverless.yml 에 esbuild 항목 설정이 필요합니다.

plugins:
    - serverless-esbuild

custom:
    esbuild:
        bundle: true
        minify: false
        target: 'node16'
        packager: yarn
        plugins: plugins.js
        external:
            - '@nestjs/microservices'
            - '@nestjs/websockets/socket-module'
            - 'class-transformer/storage'
            - 'nock'
            - 'mock-aws-s3'
            - 'fastify-swagger'
            - 'pg-native'

• 처음에 external 설정없이 serverless package 명령을 실행하면 Error가 발생합니다. 하나씩 external로 설정해주면 잘 동작합니다.

esbuild는 decorator 지원이 되지 않아서, esbuild-plugin-tsc를 사용했습니다.
또 .env 파일을 빌드 시점에 포함시키기 위한 plugin도 필요했습니다.

plugins.js

const esbuildPluginTsc = require('esbuild-plugin-tsc');

module.exports = serverless => {
    const envCopyPlugin = {
        name: 'env-copy',
        setup(build) {
            build.onEnd(() => {
                const fs = require('fs');
                const path = require('path');
                fs.cpSync(`.env.${serverless.service.provider.stage}`, path.join('.esbuild/.build', '.env'), {
                    force: true,
                    dereference: true
                });
            });
        }
    };

    return [esbuildPluginTsc(), envCopyPlugin];
};

로컬 빌드를 위한 esbuild.js 파일을 만들어줍니다.

const esbuild = require('esbuild');
const path = require('node:path');
const esbuildPluginTsc = require('esbuild-plugin-tsc');

const cwd = process.cwd();
const outfile = path.resolve(cwd, 'dist/src/main.js');
const tsconfig = path.resolve(cwd, 'tsconfig.json');
const entryPoints = [path.resolve(cwd, 'src/main.ts')];
const config = {
    platform: 'node',
    target: ['node16'],
    bundle: true,
    keepNames: true,
    plugins: [esbuildPluginTsc()],
    tsconfig,
    entryPoints,
    outfile,
    external: ['./node_modules/*']
};

(async () => {
    await esbuild.build(config);
})();

package.json

    "build:esbuild": "node esbuild.js",

	nest build	swc	esbuild
빌드 시간	10.41s	0.67s	1.1s

빌드 시간은 swc보다 약간 느리지만, 기존 nest build와 비교하면 엄청 빨라진 걸 볼 수 있습니다.
또 하나의 효과는 번들링 용량이 굉장히 줄어들었습니다.

NestJS 이슈

https://github.com/nestjs/nest-cli/issues/731#issuecomment-772330860

빌드 시간이 많이 단축됐지만, swc와 esbuild 모두 type checking이 되지 않기 때문에, nest에서 공식적으로 지원하지 않는다고 합니다.

Webpack vs Esbuild

저희 API 서비스들은 도메인 별로 분리가 되어 있는데, 그 중 간단한 도메인 하나를 비교해보겠습니다.

	serverless-webpack (ts-loader)	serverless-webpack (swc-loader)	serverless-esbuild
빌드+배포 시간 (serverless deploy)	82s	82s	61s
테스트(57 tests) 시간	16s (ts-jest)	5s (swc-jest)	5s (swc-jest)
용량	14.9MB	14.9MB	2.9MB

• 테스트 환경
  • MacBook Pro 2019
  • 2.6 GHz 6-Core Intel Core i7
  • 16 GB 2667 MHz DDR4
  • macOS Ventura 13.0

마무리

빌드 시간은 큰 차이는 나지 않았지만, 번들링된 용량이 크게 줄어든 효과가 있어서 최종적으로 serverless-esbuild 사용하기로 결정하게 되었습니다.

test 툴도 esbuild로 가능한게 있을까 해서 esbuild-jest를 시도해봤지만, 설정에 어려움을 겪다가 이미 잘 사용하고 있던 swc-jest를 사용하기로 결정했습니다.

여담이지만 원래는 esbuild 도입은 우연히 이루어졌습니다. 처음 목표는 원래 yarn berry의 PnP 도입이 목적이었고, webpack에서 yarn berry 설정의 어려움을 겪다가 esbuild가 yarn berry 지원이 잘된다고 해서 esbuild를 테스트해보게 되었습니다.

결과적으로 yarn berry 도입은 실패했습니다. 빌드와 배포까지 성공했지만, runtime에서 해결하지 못한 오류들이 계속 발생했습니다.
하지만 덕분에 esbuild를 테스트해 본 계기가 됐고, 번들링 용량이 크게 줄어든 효과를 볼 수 있어서 삽질의 시간들이 헛되진 않았던 것 같습니다.

끝까지 읽어주셔서 감사합니다~ 😆