typescript + webpack으로 프로젝트를 설정하다가 loader에 대해 궁금해졌다. typescript를 transpiling 하기 위해서 ts-loader를 설치하여 설정했는데 누구는 babel-loader로 하고 누구는 esbuild-loader로 트랜스파일하길래 각각의 용도와 장단점이 무엇이고 어떤게 최선의 선택일까를 찾아보기 위해 알게된 내용을 정리해보았다.
loader의 정의 및 각각의 loader 역할
loader란, Webpack과 같은 모듈 번들러를 통해 웹 애플리케이션을 빌드할때 특정 파일 형식을 다른 형식으로 변환하거나 처리해주는 도구이다.
babel-loader는 최신버전의 JavaScript 문법을 이전 버전의 JavaScript로 변환하는 역할을 갖지만, TypeScript를 type checking하기 위해서는 @babel/preset-typescript 프리셋이 필요하다.
ts-loader는 TypeScript 파일을 JavaScript 파일로 변환하기 위한 역할을 하며, type checking도 된다.
esbuild-loader는 esbuil는 Go언어로 작성된 Javscript번들러로 매우 빠른 ESNext 및 TypeScript변환과 JS축소를 지원한다. 단, type checking을 하기 위해서 fork-ts-checker-webpack-plugin을 설치해야한다.
esbuild-loader를 사용하면 빌드시간이 3배 이상이 빨라진다길래 나역시도 ts-loader와 esbuild-loader의 차이를 비교해볼려고한다.
ts-loader와 esbuild-loader의 빌드타임 비교
(빌드타임 비교한 프로젝트의 구성은 index.ts파일에 "hello world" 띄워주는 정도의 크기이다)
먼저, ts-loader 빌드결과는 2620ms인 2초정도 였고,
esbuild-loader의 빌드결과는 0.9초이다! (프로젝트구성이 워낙 작지만..그래도 와...)
esbuild-loader는 빌드타임을 줄여주는 효과도 있지만, JavaScript 및 CSS 압축도 지원하고 적용방법도 쉽다.
결론
webpack 설정을 직접 하나씩 하다가 궁금해졌던 loader에 대해 많이 알게된 계기였고, esbuild-loader가 DX(개발자경험)도 높여주고 여러가지 최적화를 할수있는 방법이 많았기에 안쓸 이유가 없었다.👍
관련 예시 프로젝트 깃헙주소는 다음과 같다. https://github.com/simjieun/webpack-test
