CRA는 사용하지 않기로 해요
최소한의 번들을 위해 Create React App은 사용하지 않기로 한다. CRA는 속도가 느리며, 프로젝트 크기가 커질수록 더 느려진다. 참고로, 여기서 느려진다는 것은 서버 시작 시 걸리는 시간 및 업데이트 시간이 느리다는 것을 의미한다.
Webpack? Rollup?
처음엔 Webpack 혹은 Rollup을 사용할까 했다. 하지만 더 찾아보니, Webpack은 애플리케이션을 번들링 할 때, Rollup은 라이브러리를 번들링할 때 주로 사용한다고 한다고 하여 Rollup으로 마음이 기울었다.
더불어, Webpack을 쓸 수도 있는데 Rollup을 쓰는 이유는 Webpack은 ES Module 형태로 번들을 할 수 없다는 이유도 있었다. Webpack을 사용 할 때에는 일반적으로 Commonjs 형태로 번들링을 하게 되는데, Commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용하게 되면 Tree-shaking이 지원되지 않는다.
예를 들어, 우리가 등록한 라이브러리를 설치하고 그 중에서 Button 컴포넌트만 사용을 했다고 가정을 해보자. Tree-shaking이 되었다면 프로젝트를 빌드했을 때, Modal 컴포넌트를 사용하지 않았기 때문에 빌드된 파일에도 Modal 관련 코드가 포함되지 않게 된다. 반면, Tree-shaking이 되지 않는다면 Modal을 사용하지 않았음에도 불구하고 Modal 관련 코드가 결과물 안에 포함되어 버려 용량이 커질 것이다.
Tree-shaking 이란?
트리 쉐이킹은 번들링 과정에서 불필요한 코드(사용되지 않는 모듈)를 식별하고 제거하는 기법이다. 이는 페이지 로딩 속도를 향상시키고, 사용자 경험을 개선하는 데 중요한 역할을 한다.
하지만 Vite로 결정한다.
그런.. Vite 또한 Rollup으로 번들링을 한다고 하니, 그냥 Vite를 쓰면 되겠다. Vite는 다른 번들러 기반 빌드 툴의 비효율적이고 느린 문제를 해결하기 위해 고안된 빌드 툴인데, Vite의 특징을 정리하자면 아래와 같다.
1.
개발 환경에서는 모듈 핫 리로딩을 지원한다. 즉, 코드를 수정하면 브라우저가 자동으로 해당 모듈만을 새로고침하여 변경사항을 반영한다. 이는 전체 페이지를 새로고침하는 것보다 빠르고 효율적이다.
2.
프로덕션 환경에서는 Rollup을 사용하여 코드를 번들링한다. 이는 코드를 최적화하고, 브라우저 호환성을 보장하며, 코드를 더 효율적으로 불러오는 데 도움이 된다.