Webpack기본 Minify plugin 비교

Taekyoung Moon·2022년 5월 29일

benchmark esbuild minifier terser uglify webpack

Webpack5로 사이드 프로젝트를 시작하였다.
필자에게 가장 익숙한 uglifyjs-webpack-plugin을 사용하려 했으나,
webpack4까지만 uglify-js를 사용하고, webpack5 부터는 es6를 지원하지 않는다는 이유로 terser로 교체되었다고 한다.

1. Minifier 비교

가장 효율적인 방법을 찾기 위해 Minifier 벤치마크 결과를 찾아보았다. 관련 링크

webpack4와 webpack5의 플러그인인 uglifyjs와 terser를 비교해 보았다.
React v17.0.2 Original Size: 72.14kB를 각각의 Minifier로 압축했을 경우 결과는 아래와 같다.

--------	Minified Size	Time
uglifyjs	-68% 22.75 kB	35x 821 ms
terser	-68% 23.12 kB	20x 465 ms

압축률은 무의미하지만 압축 시간이 821ms 에서 465ms로 절반정도 줄어들었다.
(다른 Minifier도 압축률 오차는 ±3% 정도로 무의미한 수준이었다.)

2. Webpack Minify Plugin 속도 테스트

압축률이 무의미한것을 확인했으니 속도만 테스트 하였다.
webpack 기본 Minify 플러그인이 실제 프로젝트에 적용하였을 경우 벤치마크와 동일한지 확인하기 위해 직접 테스트 해 보았다.
새로 시작한 프로젝트는 용량이 크지 않아 테스트 하여도 유의미한 결과가 확인되지 않아서,
3.4MB의 용량의 회사 프로덕트로 테스트를 해 보았다.

환경

Bundler: Webpack 5.x
Original Size: 3.4MB
Production Build

ugifyjs-webpack-plugin (Deprecated)

14108 ms
3876 ms
3854 ms
3847 ms
3887 ms

terser-webpack-plugin

11444 ms
11790 ms
13527 ms
11515 ms
13506 ms

결과

terser-webpack-plugin에서 cache 옵션이 사라졌다.

webpack4를 사용할 때는 uglifyjs-webpack-plugin 플러그인 옵션을 아래와 같이 설정하였다

parallel: true // multicore
cache: true

webpack4 에서는 첫번째 Build 후, cache가 되어 build 속도가 단축되는 것을 확인할 수 있다.
webpack5에서는 공식 문서처럼 terser-webpack-plugin 을 설치 후 위 옵션을 찾아보았더니 parallel 옵션은 default가 true가 되었는데, cache 옵션이 사라져 build 속도 단축이 되지 않는다.
terser-webpack-plugin의 테스트 결과를 보면 uglifyjs-webpack-plugin의 첫번째 테스트(cache 전) 시간과 비슷하게 걸린다.

3. 해결

Build 속도 단축을 위해 Deprecated 된 uglifyjs-webpack-plugin을 사용하고 싶지 않았다.

참고한 벤치마크에서 esbuild가 가장 빠른 Minifier로 견론이 났다.
webpack 기본 Minifier가 아니라 비교하지 않았지만, 빌드 속도에서 거의 1~3등을 차지하였으며, 회사에서 담당중인 프로덕트도 누군가 esbuild-loader와 ESBuildMinifyPlugin으로 바꾼 후 build 속도가 빨라졌었다.