Vue의 생산성을 위해 vite를 사용하는 이유

 vue를 개발한지는 몇 년 되었지만 vue project를 구동할 때 느리다고 생각했던 적이 없었다. 늘 그렇듯 어떤 서버를 구동하든지 컴파일되고 올라가는 데에 어느 정도 시간이 걸렸기 때문에 vue를 구동하는데도 크게 신경을 쓰지 않았던 것 같다.
이번 프로젝트를 진행하면서 vite 정보를 얻고 알아보다가 과감하게 vite를 이용해서 project 세팅을 하게되면서 차이를 느끼고 정리를 하게 되었다. (http://econoflow.co.kr)
vite를 사용하여 프로젝트를 진행한 결과 기존의 구동 방식과는 다르게 엄청난 속도 차이가 난 것이다. 기존에는 별 생각없이 보낸 시간들이 아까울 지경이었다.
서버 구동 명령어를 통해서 실행하고 콘솔이 올라갈 때에는 속도를 제외하고는 어떤 부분이 바뀌었는지 알 수 없지만, 내부적으로 처리되는 방식 자체가 다르다고 한다.

 

vite의 장단점

장점
1. vite는 개발자가 빠르게 개발할 수 있도록 빠르게 반응하는 환경을 제공하여 생산성을 향상시켜준다.
2. 소스 코드를 번들링하는 대신 빌드 시간을 최소화하기 위해 Native ESM을 사용하여 필요한 모듈만 제공하여 빠른 빌드를 제공한다.
3. 코드를 수정할 때 실시간으로 화면을 갱신하여 수정 사항을 즉시 반영시켜 준다.
4. 빠른 개발 및 빌드 속도를 제공하면서 우수한 성능을 유지한다.

단점
1. 아직 초기 단계의 개발중인 프로젝트이기 때문에 일부 기능의 제한과 안정성 및 보안 문제가 발생할 수 있다.
2. vite는 상대적으로 새로운 도구이기 때문에 현재 vue 생태계 내에서는 기능의 지원이 제한될 수 있다.
3. 기존의 Webpack 또는 vue CLI를 사용하던 개발자들에게 적응할 기간이 필요하다.

위와 같이 vite의 장단점을 간단히 정리해 보았다. 직접 프로젝트에 적용을 해서 개발 및 운영해 본 결과 아직까지 위의 단점들이 영향을 주지는 않았던 것 같다.

그렇다면 vite와 기존의 bundle 구동 방식은 어떤 부분이 다르게 구동되는 건지 아래 화면을 통해 정리해 보았다.

Bundle 구동 방식

bundle 구동 방식

위의 화면은 일반적인 bundle 방식이다. 화면과 같이 프로젝트 전체를 기반으로 bundling한 다음 서버 실행을 하기 때문에 속도가 매우 느린 편이다.

Native ESM 구동 방식

Native ESM 구동 방식

위의 방식은 vite에서 사용되는 Native ESM 구동 방식이다. 서버가 먼저 구동되고 변경된 부분만 변경되기 때문에 속도가 매우 빠르다.

 

기존의 방식은 위의 이미지처럼 소스 코드를 번들링하여 업데이트가 되도록 처리하는 방식이라 속도가 떨어지게 된다. 소스 코드를 변경하게 되면 갱신되는 시간 또한 선형적으로 증가하게 되기 때문에 서비스가 커질수록 매우 비효율적인 구동 방식이라고 볼 수 있다.

반면에 vite의 경우는 Native ESM 방식을 통해 구동되기 때문에 속도가 빠를 수밖에 없다. 번들링 방식이 아닌 서버를 먼저 구동시키고 변경된 부분만 교체되는 방식이라 굉장히 효율적인 방식이라고 생각할 수 있다.

내부적으로 이런 큰 차이점을 가지고 있어 이번 프로젝트를 통해 vite로 구축을 하였고, 업무의 생산성 또한 많이 올라가게 되었다.


조금 더 차이를 알기 위해 기존의 번들링 방식과 vite를 사용했을 때의 방식을 실제 적용했을 때 차이를 확인해 보자.

---

화면 구동 차이

vue 실행 화면

 

vite 실행 화면

위의 결과를 통해, Vue로 실행했을 때 약 21초가 걸리는 반면, Vite로 실행했을 때는 약 0.7초만 소요되었다. 코드의 복잡성과 포함된 컴포넌트 및 라이브러리의 수가 증가함에 따라 실행 시간이 더욱 길어질 수 있다.

이러한 이유로 Vite를 도입하게 되었는데, 단점보다는 효율성과 생산성을 크게 향상시킬 수 있다는 점을 느꼈다.

개발자로서, 시간 효율성과 생산성이 매우 중요하다고 생각한다. 특히, 동일한 개발 작업이라도 업무 환경에 따라서 결과물이 크게 달라진다. 그러므로 항상 시간을 효율적으로 활용하고 생산성을 높일 수 있는 방법을 고민하고 적용하고자 한다. 이번에 Vite를 도입하면서 개발 환경의 향상과 함께 더 나은 개발 경험을 얻을 수 있었던 계기가 되었다.

 

 

 

 

Economy FLow