Vite로 개발환경 개선하기
이번 포스팅에서는 Webpack 기반의 프로젝트를 Vite로 전환한 이유와 그로 인해 얼마나 개선되었는지를 다뤄보겠습니다.
제가 담당하는 관리자 프로젝트는 MUI 템플릿을 기반으로 하고 있어, 파일 수가 많아 프로젝트가 무겁습니다.
현재 이 프로젝트는 CRA 환경인 Webpack을 사용 중인데, Webpack은 개발 서버의 구동 속도가 너무 느려 Cold Start Time이 10초나 걸리고, HMR(Hot Module Replacement)도 저장할 때마다 오래 걸립니다. 심지어 가끔은 저장이 되지 않아 VSCode를 껐다 켜야 하는 상황도 발생했습니다.
그러던 중 눈에 뛴것이 바로 Vite라는 빌드 툴입니다.
Vite는 프랑스어로 "빠르다"라는 의미라고 합니다. 본인들이 차세대 빌드 툴이라고 소개한 만큼 자신이 넘쳐 보였습니다.
우선 Vite의 논란 중 하나인 발음부터 짚어봅시다. 많은 개발자 분들이 "바이트", "비트" 두 발음에 대해 논란이 많습니다.
하지만 공식문서에 따르면, 발음은 veet에 가까운 "비트"가 맞다고 합니다. 못 믿겠다면! 바이트 공식문서를 첨부하겠습니다.
우선 개발환경 개선을 위해 Vite로 변경해도 좋겠다 생각한 이유가 있습니다.
1. 공식문서가 굉장히 잘 되어있다. ( 한국어 지원 )
2. 많은 기업에서 채택할 만큼 인기가 있어 다양한 레퍼런스가 있다.
3. Webpack은 자바스크립트 기반으로 싱글 스레드이지만 Vite는 Go언어 기반으로 멀티 스레드이다.
4. Cold Start Time 시간이 거의 제로에 가깝다. ( 이게 제일 좋다 )
5. HRM(Hot Module Replacement)이 Native ESM 방식을 채용하기 때문에 속도가 빠르다
5. 유명한 조사 사이트에서 빌드 툴 사용량에 비해 만족도가 굉장히 높다.
서론이 너무 길었고, 이제부터 Vite에 대한 소개와 Webpack과 무엇이 다른지, 어떤 부분이 개선되었는지를 알아보도록 합시다.
📌 Vite란 무엇인가?
Vite는 EsBuild를 기반으로 만들어진 차세대 프론트엔드 빌드툴입니다.
Esbuild는 Go언어로 만든 번들링 툴입니다. 자바스크립트 기반으로 만들어진 빌드 툴은 싱글 스레드이기 때문에 멀티 스레드인 Go 언어는 속도가 10~100배 빠른 장점이 존재하지만,
단점은 ES5이하 문법 미지원 등 ( 최근 모든 브라우저가 ES6이상을 지원하기에 괜찮아짐 ) 아직까진 개발환경에만 최적화되어 있고, 몇몇 기업에선 프로덕트 빌드 시에는 안정적인 Rollup을 사용한다는 점을 꼽을 수 있습니다. ( 이 부분 또한 많이 개선됨 )
📌 Vite와 Webpack 차이점
모듈 처리 방식
Vite: 애플리케이션을 두 가지 카테고리 dependencies (종속성), source code (소스코드)로 나누어, esbuild라는 고성능 빌드 도구를 사용하여 종속성을 미리 번들링 하고, 소스코드를 브라우저가 Native ESM 방식을 지원하여 바뀐 부분만 필요할 때마다 제공됩니다.
Dependencies : Vite는 처음 한 번만 종속성을 번들링 하고, 이후에는 캐시된 번들을 사용하여, 번들링 과정을 크게 줄입니다.
Source Code : Vite는 소스 코드를 번들링 하지 않고, ES 모듈을 그대로 브라우저에 제공하여 필요한 파일만 동적으로 가져옵니다. 이 과정에서 HMR(Hot Module Replacement)도 빠르게 이루어집니다.
Webpack: 웹팩은 모듈 시스템을 사용하여 애플리케이션의 모든 파일을 하나의 번들로 묶습니다. 개발 중에도 모든 모듈을 번들링하고, 변경 사항이 발생할 때마다 전체 애플리케이션을 재번들링합니다. 이 과정이 개발 속도를 굉장히 늦추게 만듭니다.
번들링 : 웹팩은 소스 코드와 종속성을 모두 포함하여 번들링을 수행합니다. 프로젝트 규모가 클수록 번들링 시간이 길어집니다.
HMR : 웹팩은 HMR의 변화된 모듈만을 갱신하지만, 모듈 의존성을 분석하고 번들링 과정을 거치기에 속도가 느립니다.
📌 프로덕션 빌드 환경
번들링 도구
Vite : Vite의 프로덕션 빌드에는 Rollup을 사용합니다. Rollup은 Tree Shaking의 강점이 있어 작은 번들을 생성하는데 최적화되어있습니다. Rollup 또한 웹팩처럼 다양한 생태계를 갖추고 있지만, 웹팩만큼 강력한 생태계를 갖추고 있지 않아, 특정 기능을 구현하려면 추가적인 플러그인이 필요할 수 있습니다. ( 플러그인 설정이 번거롭지만 그만큼 확장성도 높아 라이브러리를 만들 때 최고의 빌드 도구입니다. )
플러그인 : Rollup은 경량화 번들러이기 때문에 빌드속도가 매우 빠르지만, 프로젝트의 복잡도가 높아질수록 필요 플러그인의 개수가 증가할수록 빌드 속도가 느려질 수 있습니다.
Webpack : 웹팩은 자체 번들러를 사용하여 개발과 프로덕션 빌드 시 동일한 번들러를 사용합니다. 웹팩은 매우 유연하며, 이미 강력한 플러그인 생태계덕에 다양한 기능을 기본적으로 제공하기 때문에, 별도의 플러그인 설치 없이 대부분의 요구사항을 충족할 수 있습니다. 때문에, 복잡한 애플리케이션 프로젝트에 웹팩이 선호될 수 있는 이유입니다.
플러그인 : 웹팩은 이미 좋은 플러그인 생태계를 가지고 있어, 코드 스플리팅, 트리 쉐이킹, CSS 처리, 최적화등 다양한 기능을 이미 제공합니다. 또한 플로그인 확장을 쉽게 할 수 있습니다.
초기 설정 복잡성
Vite : 비트는 기본적으로 매우 간편하게 초기 설정을 하고 Rollup의 설정을 통해 세부적인 조정이 가능합니다. 그러나 Rollup의 플러그인의 수가 늘어날수록 복잡해질 가능성이 있습니다.
간편성 : Vite의 공식문서를 통해 첫 프로젝트를 시작하면 처음에는 별도의 설정이 필요 없이 빠른 시작이 가능합니다.
Webpack : 웹팩은 매우 강력한 도구이지만, 초기 설정이 매우 어렵습니다. 특히 큰 프로젝트 일 수록 설정 파일이 복잡해 기지 쉽습니다.
간편성 : 웹팩은 CRA를 이용하면 초기 설정이 간편한 보일러 플레이트를 제공하지만, 단점으로는 CRA의 웹팩 설정을 건드리려면 craco와 같은 라이브러리를 사용해서 커스터마이징을 해야 하고 또한 복잡합니다.
📌 결론
Vite와 Webpack은 각각의 장단점이 존재하지만, 최근 많은 테크 기업에서 Vite를 선택하는 추세를 보면, Vite의 단점이 많이 보완되고 있다는 것을 알 수 있습니다.
두 빌드 툴의 등장 시기가 다른 만큼, Vite는 차세대 빌드 툴로 주목받고 있으며, 프로덕션 빌드에서도 큰 문제가 없어 보입니다. 또한, 개발 환경이 크게 개선된다는 점에서 Vite는 개발자들에게 높은 만족도를 제공하는 도구라고 생각합니다.
물론, 각 프로젝트의 특성과 요구 사항에 따라 적절한 도구를 선택하는 것이 중요하지만, Vite로 전환한다면 만족스러운 결과를 얻을 수 있을 것입니다.
여담으로 저희 관리자페이지 웹팩과 마이그레이션 한 비트의 빌드 시간 결과입니다. ( 6배 정도 차이 납니다. )
Webpack
Vite
📌 마무리
이번 포스팅에서는 회사의 개발 환경을 개선하기 위해 진행했던 기록들을 정리해 보았습니다. 이 글이 마이그레이션을 고민 중인 개발자분들께 도움이 되기를 바라며, 이만 마치겠습니다.
PS. 아직 인텔 맥북을 사용 중이시라면, 놀라운 Cold Start를 느끼실 겁니다.