2024년에는 라이브러리를 위해 어떤 모듈 번들러를 선택해야 할까?

SSAFY 자율 프로젝트는 오픈 소스를 하기로 결정했습니다!

본격적인 개발에 앞서, 모듈 번들러부터 선택하게 되었는데요. 어떤 과정을 거쳐 선택했을지 따라오시죠!

 

1. 모듈 번들러란?

모듈 번들러는 웹 개발에서 중요한 도구로, 개발자가 작성한 여러 개의 JavaScript 파일과 기타 자원(예: CSS, 이미지)을 하나의 파일 또는 몇 개의 파일로 결합하는 역할을 합니다. 이 과정은 웹 애플리케이션의 로딩 시간을 최적화하고, 파일 요청의 수를 줄여 네트워크 부담을 감소시킵니다.

모듈 번들러는 소스 코드를 모듈로 관리할 수 있게 해주며, 각 모듈은 독립적인 기능을 가진 단위로 개발될 수 있습니다. 이렇게 모듈화된 코드는 재사용성과 유지 관리가 용이해지며, 대규모 프로젝트에서 특히 유용합니다.

주요 모듈 번들러로는 Webpack, Rollup, Parcel 등이 있으며 각각의 특징과 장단점이 있습니다. 예를 들어, Webpack은 매우 유연하고 강력한 기능을 제공하지만 설정이 복잡할 수 있습니다. Rollup은 ES6 모듈을 중심으로 설계되어 효율적인 번들링이 가능하며, Parcel은 설정이 거의 필요 없는 제로 설정(zero configuration) 방식을 특징으로 합니다.

1.1 번들링이란? 

번들링은 웹 개발에서 자주 사용되는 과정으로, 여러 개의 파일(주로 JavaScript, CSS, HTML 등)을 하나 또는 소수의 파일로 결합하는 작업을 말합니다. 이 과정을 통해 개발자는 웹 애플리케이션의 로딩 속도를 향상시키고, 네트워크 요청의 수를 줄일 수 있습니다. 

예를 들어, 하나의 웹 페이지가 50개의 JavaScript 파일을 필요로 한다면, 브라우저는 각각의 파일을 개별적으로 서버에서 불러와야 합니다. 이러한 과정은 네트워크 지연(latency)을 증가시키고, 페이지의 로딩 시간을 길게 만듭니다. 번들링을 통해 이 50개의 파일을 하나 또는 몇 개의 파일로 합치면 브라우저의 요청 수가 현저히 감소하여 페이지 로딩 속도가 빨라집니다.

번들링은 단순히 파일을 합치는 것을 넘어서, 파일 내용을 최적화하는 작업도 포함할 수 있습니다. 이에는 코드 압축(공백 제거, 코드 단축 등), 불필요한 코드 제거, 코드의 변환(예: 최신 JavaScript 코드를 구형 브라우저에서도 작동할 수 있도록 변환) 등이 포함됩니다. 이러한 과정을 통해 최종적으로 생성되는 파일은 원본 파일보다 크기가 작고, 실행이 더 효율적일 수 있습니다.

번들러 도구를 사용하여 이러한 과정을 자동화하며, 개발자는 보다 효율적으로 웹 애플리케이션을 개발하고 배포할 수 있습니다.

1.2 번들링을 해야하는 이유

번들링은 웹 개발에서 여러 가지 이유로 필수적인 과정이 되었습니다. 주요 이유들을 살펴보면 다음과 같습니다:

1. 성능 향상: 번들링은 여러 개의 파일을 하나 또는 소수의 파일로 결합함으로써 웹 페이지의 로딩 시간을 크게 단축시킵니다. 이는 브라우저가 서버로부터 파일을 다운로드하는 요청의 수를 줄여 네트워크 지연을 감소시키기 때문입니다.

2. 최적화: 번들러는 코드를 압축하고 불필요한 코드를 제거하여 전체 파일 크기를 줄이는 역할을 합니다. 이로 인해 사용자의 데이터 사용량이 줄어들고, 애플리케이션이 더 빠르게 로딩됩니다.

3. 호환성 보장: 번들러를 사용하면 최신 JavaScript 문법이나 실험적인 기능을 사용한 코드를 모든 브라우저에서 호환되도록 변환할 수 있습니다. 예를 들어, Babel과 같은 도구를 번들러와 연동하여 ES6 이상의 코드를 ES5로 변환하여 오래된 브라우저에서도 실행할 수 있게 할 수 있습니다.

4. 개발 편의성: 개발자는 모듈화된 코드를 작성하여 재사용성과 유지보수성을 높일 수 있습니다. 번들러는 이러한 모듈들을 자동으로 결합하고 의존성을 관리하여, 개발 과정을 더욱 효율적으로 만들어 줍니다.

5. 보안: 번들링 과정에서 공개하지 않아야 할 코드나 중요한 데이터를 숨기는 등의 추가적인 보안 조치를 취할 수 있습니다. 또한, 외부 라이브러리의 코드를 한 곳에 포함시켜 보안 감사를 수월하게 할 수 있습니다.

6. 배포 용이성: 번들링은 배포 과정을 간소화합니다. 번들된 파일 몇 개만 호스팅 서버에 업로드하면 되기 때문에, 파일 관리와 업데이트가 용이해집니다.

이러한 이유들로 번들링은 현대 웹 개발의 중요한 부분이며, 웹 애플리케이션의 성능과 개발 효율성을 크게 향상시킵니다.

2. 모듈 번들러 선택이 중요한 이유

1. 파일 크기: 번들러가 생성하는 최종 파일의 크기는 웹 애플리케이션의 로딩 시간에 직접적인 영향을 미칩니다. 작은 파일 크기는 빠른 다운로드 시간과 초기 실행 속도를 의미합니다. 번들러마다 코드를 압축하고 불필요한 부분을 제거하는 방식이 다르며, 이에 따라 파일 크기도 달라집니다.

2. 트리 쉐이킹(Tree Shaking): ES6 모듈의 정적 구조를 활용하여 사용되지 않는 코드를 제거하는 기능입니다. 트리 쉐이킹을 얼마나 효율적으로 하는가가, 중복 제거를 얼마나 잘 하는지를 결정하는 요소중 큰 부분입니다.

3. 코드 스플리팅(Code Splitting): 번들러가 지원하는 코드 스플리팅 방식에 따라, 필요한 코드만 사용자의 브라우저로 전송되어 로딩 시간을 최적화할 수 있습니다. 예를 들어, Webpack은 동적 임포트(dynamic imports)를 통해 코드 스플리팅을 지원하며, 이는 특정 페이지나 컴포넌트에서만 필요한 코드 덩어리를 분리하여 로드할 수 있게 합니다. (Rollup도 코드 스플리팅을 지원합니다.)

4. 실행 시간(Runtime Performance): 코드가 브라우저에서 어떻게 실행되는지도 중요합니다. 번들러에 따라 생성된 코드의 구조가 다를 수 있고, 이는 자바스크립트 엔진에 의한 파싱과 실행 시간에 영향을 미칩니다. 예를 들어, 모듈의 의존성 해결 방식이 복잡하면 런타임 성능이 저하될 수 있습니다.

이러한 요소들은 웹 애플리케이션의 로딩 시간과 실행 성능에 직접적인 영향을 미치며, 프로젝트의 요구사항과 목표에 따라 적절한 번들러를 선택하는 것이 중요합니다. 각 번들러가 제공하는 최적화 기능과 설정을 잘 이해하고 활용하는 것이 성능을 최대화하는 열쇠입니다.

 

3. 본격 모듈 번들러 비교

모듈 번들러에는 여러 종류가 있지만, 저희는 그중 자료가 방대한 Vite, Webpack,Rollup에 대해 집중적으로 알아보았습니다.

 

 

Webpack vs Rollup

• Rollup은Webpack 보다는 가볍고 빠르지만, Webpack이 조금 더 안정적
• 일반적으로 라이브러리나 패키지 등을 개발하고 있다면 Rollup
• 복잡한 종속성, 높은 안전성이 요구되는 어플리케이션을 개발한다면 웹팩

https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c

Webpack and Rollup: the same but different

국내의 대부분의 블로그 게시글에서는 모듈 번들러 관련 내용이 전부 저 블로그의 내용 짜깁기로 이루어져 있었다.

저 게시글 내용의 한 줄 정리는

Use webpack for apps, and Rollup for libraries

 

앱 개발에는 Webpack을 사용하고, 라이브러리에는 Rollup을 사용하라는 것이었다.

 

webpack을 포함한 다른 모듈 번들러는 각 모듈을 함수로 래핑하고 브라우저 친화적인 구현을 사용하여 번들에 넣은 다음 require하나씩 평가하는 방식으로 작동합니다. 주문형 로딩과 같은 것이 필요한 경우에는 좋지만 그렇지 않으면 약간 낭비가 되며 모듈이 많으면 성능이 더 나빠집니다.

Rollup이 사용하는 접근방식인 ES2015 모듈은 다른 접근방식을 지원합니다. 모든 코드는 같은 위치에 배치되고 한번에 평가되므로 더 빠르게 시작되는, 더 간결하고 간단한 코드가 생성됩니다.  -> 하지만 이 문제로 인해 안정성이 떨어진다는 이슈가 있습니다.

 

 

여기까지는 맞는 이야기지만, 저 게시글은 2017년 게시글이기 때문에 맞지 않는 부분이 있다.

 

저 블로그의 내용에는 Rollup은 Code Splitting과 HMR(핫 모듈 교체)를 수행하지 않는다는 것이었지만 현재는 상황이 조금 다르다.

 

1. Code Splitting

이 부분은 Rollup에서 자체 지원하고 있다.

https://rollupjs.org/tutorial/#code-splitting

 

2. HMR

아직까진, Rollup이 자체적으로 수행하고 있지는 않다.

하지만 플러그인으로 해결 가능한 것으로 보인다.

https://github.com/rixo/rollup-plugin-hot

GitHub - rixo/rollup-plugin-hot: HMR plugin for Rollup, leveraging SystemJS (POC)

 

시간은 좀 지났지만 여전한 Webpack과 Rollup의 주요한 특징은 여전하기 때문에 우리는 Rollup을 선택했다.

 

3. 최종 선택

그래서 우리는 Vite를 선택했다.

 

https://ko.vitejs.dev/guide/why.html

Vite

 

?? : 아까 전만해도 Rollup을 선택했다면서요...?

 

Vite는 개발 진행중에는 ESBuild를 적용한 덕분에, HMR을 지원합니다. 그 덕분에 소스코드를 수정했을때 화면이 바로바로 바뀜을 체감할 수 있죠. (생각보다 차이가 엄청나게 큽니다)

그리고 중요한 번들링 과정에는 Rollup으로 번들링을 진행합니다! Vite를 사용하는 것 만으로도 ESBuild와 Rollup모두를 채택한 효과를 얻을 수 있는겁니다. 

 

심지어, Vite에는 라이브러리 모드까지 포함되어있습니다. 라이브러리 개발이라면 오히려 Vite를 선택하지 않을 이유가 없을 지경이죠. (App개발에는 위에서 이야기했던 안정성때문에 개발단계에서는 Vite, 배포시에는 Webpack을 사용하는 경우가 있다고 합니다.)

 

https://ko.vitejs.dev/guide/build.html#library-mode

 

여전히 한국 문서에는 라이브러리 개발에는 Rollup을 선택하라는 게시글이 많아서 혼선이 꽤나 있었습니다...

그래도 적절한 선택을 한 것 같아 기쁩니다.

 

끗!