🔵 레벨로그의 타입스크립트 -1-

저번에 말했던 “레벨로그의 타입스크립트”의 변천사를 다루어 볼텐데 오늘은 1편이다.

주제는 “타입스크립트 컴파일 전략” 이고, webpack과 함께 빌드 환경에 따라 타입스크립트를 어떻게 컴파일 하는지 살펴보도록 하자.

혹시 기존의 레벨로그의 타입스크립트 컴파일 전략을 모른다면 보고오는 것을 추천한다.

➡️ 레벨로그의 타입스크립트

---

🚀 개발부터 배포까지의 빌드 상황

먼저 레벨로그에서 개발부터 배포까지 주로 마주치게 되는 빌드 상황을 나열해보았다.
local, dev, prod 환경에서 각각 자주 마주치는 빌드 상황에 맞게 컴파일 전략을 구성해볼 예정이다.

• Dev Server Hot Module Replacement Time
  웹팩 개발 서버가 시작되고 난 후 HMR 기능이 동작하기 위해 리빌드되는 시간
• Build Time On Local Machine
  프로젝트 빌드 명령어를 통해 로컬 머신에서 웹팩 빌드 프로세스가 완료되는 시간
• Build Time On Github Actions CI
  프로젝트 빌드 명령어를 통해 Github Actions CI 환경상에서 웹팩 빌드 프로세스가 완료되는 시간

---

💻 local

로컬 빌드는 아무래도 아래의 두 개의 상황에서 자주 이루어진다.

• Dev Server Hot Module Replacement Time
• Build Time On Local Machine

기존 전략의 의도에 따르면 local에서는 타입체크를 포기하더라도 (VSCode의 ts-server에게 맡기긴한다.) 개발하는 동안 불편하지 않도록 빠른 빌드 + 타입 오류를 만나지 않음이 우선시 되었다.

위 그래프는 “Build Time On Local Machine” 에서의 비교인데, 대략 esbuild-loader 가 3배 정도 빠름을 알 수 있다. 조건이 맞지 않아 (타입체크를 포함함) 비교에는 포함되지 않았지만 ts-loader + fork-ts-checker-webpack-plugin 보다 babal-loader 는 조금 빠른 수준이었다.

추가로 “Dev Server Hot Module Replacement Time” 에서의 비교에서도 react-refresh-webpack-plugin 를 사용한 babel-loader 가 esbuild-loader 보다 느렸다. 그러다 보통 100ms도 안 되는 미비한 차이라 따로 그래프를 제작하지는 않았다.

그러다 초기 빌드를 자주 하지는 않고, HMR 상황에서는 크게 속도 차이가 나지 않는다.
게다가 babel-loader 는 react-refresh-webpack-plugin 을 통해 코드 수정이 발생할 때 화면 깜빡임이 일어나는 없이 편안하게 작업할 수 있어 babel-loader 를 사용하기로 했다.

---

📡 dev, prod

아무래도 dev, prod는 개발 도중에 local Machine에서 빌드를 할 상황이 거의 없었던 것 같다.

• Build Time On Github Actions CI

그래서 주로 Github Actions CI 에서의 상황을 살펴보는게 맞을 것이다.
그러나… 당장 여러번 PR을 보내는 것말고는 Github Actions CI 에서의 속도 차이를 비교하기는 힘들 것 같다.

그래서 어쩔수 없이 local Machine에서의 빌드로 대체했다.

dev, prod에서는 ts-loader 를 유지한 뒤, 타입 검사를 별도의 프로세스로 옮겨서 진행하게 해주는 fork-ts-checker-webpack-plugin 을 추가했다. 그리고 esbuild-loader에도 같은 플러그인을 적용해준 뒤 추가로 ESBuildMinifyPlugin 까지 적용해주었다.

Webpack 빌드시 Esbuild의 속도를 통해 Transpilation과 Minification
단계에 대한 더 빠른 대안을 제공합니다.

확실히 “Build Time On Local Machine” 에서의 비교만 봐도 기존에 비해 속도가 빨라진 걸 알 수 있다. dev 빌드는 따로 비교하지 않고 prod 빌드만 비교했다.

"Github Actions CI" 에서 빌드했을 때, dev빌드는 속도 차이가 거의 없었지만, prod빌드에서 속도가 유의미하게 줄어든 것을 볼 수 있다.

---

🧐 정리

여기까지 변화된 레벨로그의 타입스크립트 컴파일 전략을 살펴봤다.

결론은 아래와 같다

• local
  babel-loader (타입체크X + HMR 고려)
• dev, prod
  esbuild-loader + fork-ts-checker-webpack-plugin + ESBuildMinifyPlugin

다음에는 상황을 보고 레벨로그의 타입스크립트 “코드 스타일” 편으로 돌아오겠다.

---

📖 참고 자료

• babel-loader와 ts-loader의 빌드 결과가 다른 현상
• 바벨과 타입스크립트의 아름다운 결혼
• Webpack 빌드에 날개를 달아줄 Esbuild-Loader
• 제품 운영 잘하기 | 우아한형제들 기술블로그