Module Bundler Parcel 그리고 Webpack 4
들어가기 전
작년 말 Parcel이 나와 엄청난 Star를 받으며 큰 인기를 얻었습니다.
그리고 지난달 Webpack 4가 발표되었습니다!
이런 상황에 떠오르는 생각을 포스트로 간단하게 정리해 봤습니다.
Parcel
Parcel - Homepage
Parcel - Github
Parcel[파설, /parsəl/]은 개발 경험에서 차이를 느낄 수 있는 웹 애플리케이션 번들러 입니다.
멀티 코어 프로세싱으로 불꽃 튀게 빠른 성능을 제공하고 그 어떤 설정도 요구하지 않습니다.
- Parcel
엄청나게 빠른 번들, 적은 설정과 기본적으로 제공하는 HMR! 등을 표방하며 나온 모듈번들러 Parcel.
Webpack, gulp, grunt등의 복잡한 설정과 점점 느려지는 속도에 지친 사용자들이 많이 몰려 엄청난 인기를 구가하게 됩니다.
Github을 보니 작년 말에 나왔음에도 불구하고 벌써 20000개의 별을 받았습니다.
Parcel 사용 후기
parcel-redux-boilerplate - Github
Boiler Plate Sample
실제로 Parcel을 사용해서 Redux Boilerplate를 만들어 보니 정말 편하다는 느낌을 받기도 했습니다.
정말 빠른 번들링 속도, 설정도 간편.
얼마나 간편하냐면 그냥 entry 파일 지정, 포트 번호 선택, 필요에 따라 output 경로를 추가해주면 그만입니다.
개인 프로젝트는 복잡한 설정을 필요로하지 않기 때문에, 새로운 개인 프로젝트는 Parcel을 이용하면 되겠다고 생각한 찰나...
Webpack 4
Webpack - homepage
Webpack - Doc
Webpack 4.0 Release: What's New?
많은 분이 이미 사용해보셨을 Webpack이기 때문에 부연설명은 패스.
1~2달쯤 전 Webpack 4가 발표됩니다!
아무리 봐도 Parcel을 의식하고 나온듯한 변경 점들!
- 번들링 속도 98% 향상
- 줄어든 Output 사이즈
- Zero Config Module Bundler
- Web Assembly 지원 (이를 통해 네이티브에 필적하는 애플리케이션 배포형식 구현 가능)
- 다양한 모듈 유형 지원
- mode 속성 추가 (production, development)
다시 보니 대놓고 겨냥했네요.
이걸 보고 나니 든 생각, 다시 옮겨야 하나?
그러면 무엇을 사용할까?
개발 직군이라면
Webpack 4와 Parcel 둘 중에 하나를 선택한다면 Webpack의 손을 들어주고 싶습니다.
가장 큰 이유는 Parcel의 장점이 다 흡수돼버린 모양이라 Parcel을 선택할 이유가 없어졌다는 것.
Webpack에 대한 경험이 기존에 있다면 고민할 필요는 더욱 없겠네요.
사실 Webpack 4가 나오기 전까지는 Webpack에서 이렇게 대놓고 Parcel의 장점을 흡수해 버릴 줄 몰랐는데...
당황스럽긴 해도 결국 무얼 쓸지 고민이 줄어들어 좋긴 하네요.
디자인 직군이라면
다만 개발 직군이 아닌 디자인 쪽에서 Vue나 ES6를 사용하기 위해 번들러를 찾고 있다면, 다소 복잡한 설정이 필요 없고 설정 하나 없이 HRM을 지원하는 Parcel을 적극 추천해드리고 싶습니다.
Webpack이 예전보다 편리해지고 문서화가 친절해졌다 하더라도, 개발 직군이 아닐 경우 Parcel이 더 편리하게 느껴질 것 같네요.
마치며
작년 말에 나와 귀신같은 인기를 끌었으나 Webpack에서 이런 초강수를 둬버릴 줄이야.
웹팩4 발표 이전에는 새로 나온 Parcel의 장점이냐 기존 Webpack 3의 기능, 네임밸류 그리고 익숙함이냐 때문에 뭘 쓸지 고민도 하고 그랬는데, 바로 고민 해결.
허무하네요 :(