[node.js] webpack 말고 parcel 번들러 사용하기

관련 지식
node.js, parcel

node.js 개발을 하면서 누구나 한번쯤은 webpack을 사용하거나 들어보셨을 것입니다. angular나 vue.js를 사용했다면 확실히 사용하셨을 겁니다. 그리고 웹팩을 공부해야겠다는 마음을 먹었을 것이고 많은 분들은 공부를 포기했을 것입니다.

그만큼 웹팩은 성능 만큼이나 복잡한 설정으로도 유명한데 파설이라고 읽는 parcel 번들러는 매우 쉽게 사용할수 있는 번들러입니다. 게다가 한글문서도 있습니다!

https://parceljs.org/

설치방법

yarn 과 npm 설치를 지원합니다.

yarn global add parcel-bundler
npm install -g parcel-bundler

실행방법

설치후 번들링하고자 하는 진입 파일을 실행하면 됩니다.

참고 : 파설은 설정이 아닌 파일의 내용을 통해 js, css, html 의존성을 분석하고 번들링 합니다. 그를 위한 최초 한개 파일은 직접 지정이 필요한데 그 파일을 진입 파일이라고 합니다.

예)

parcel index.html

개발중엔 파일을 수정하면 웹서버 재기동 없이 자동으로 리빌드(rebuild) 하고 싶겠죠? 아래는 진입 파일이 index.js 인 경우입니다.

parcel watch index.js

cli 도구를 통해 만들어지는 웹 프로젝트는 웹팩 기본설정과 함께 package.json 설정도 해주지만 파설은 수동으로 해주어야 합니다. 번들링을 하는 build와 자동 리빌드는 package.json에 아래와 같이 설정 할 수 있습니다.

{
  "scripts": {
    "watch": "parcel watch index.js",
    "build": "parcel build index.js",
  }
}

위의 설정은 아래와 같이 실행합니다.

npm run watch
npm run build

빌드 파일의 경로나 파일명을 지정하고 싶을떈 --out-dir, --out-file 옵션을 사용합니다.

parcel watch index.js --out-dir public/js --out-file app.js

성능

각 번들러는 성능의 우수성을 홍보하지만 실제 성능은 어떨까요? 외국에서 세개의 번들러 rollup, webpack, parcel 의 성능을 비교한 내용이 있습니다.

https://x-team.com/blog/rollup-webpack-parcel-comparison/

각 번들러의 성능을 최대한 활용하는 설정을 했는지는 알수 없지만 롤업이 가장 빠르고 파설이 가장 느린것으로 나와있습니다. 테스트 환경의 공평성을 생각하지 않아도 별다른 설정을 요구하지 않고 파일 내용을 통한 의존성 분석을 하는 파설의 특성 상 최초 빌드는 파설이 가장 느릴수 밖에 없을듯 합니다.
하지만 빌드할 대상이 적은 작은 규모의 프로젝트 환경이라면 성능 차이가 크지 않을것 같습니다.

정리

만약 마이크로 사이트를 개발하며 웹팩설정이 부담스럽다면 파설을 고려해보시는걸 추천드립니다