프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교

 

🐣모듈 번들러?

모듈 번들러는 분리된 코드 조각들을 하나로 압축 하는 개발 도구입니다.

핵심 작업은 HTML, CSS, JAVASCRIPT 여러 파일을 하나로 결합하여 단일 파일로 만드는 것이다.

압축시킨 단일 파일을 브라우저에서 하나의 단일 파일을 로드함으로써 애플리케이션이 동작하게된다.

 

🐣빌드 도구란?

애플리케이션을 개발할 때 사용하는 도구이다. 위에 언급한 번들링을 위한 도구다.

이 도구는 프론트엔드 코드를 빌드하고 번들링하며, 최적화하고, 테스트하고, 배포하는 데 사용된다.

프론트엔드에서 가장 많이 사용되는 빌드 도구로는 Webpack, Parcel, Rollup, Gulp, Grunt, Vite 등이 있다.

요즘은 webpack, vite 많이 사용된다.

이 도구들은 각각의 장단점이 있으며, 프로젝트의 요구사항에 따라 선택할 수 있다.

이러한 빌드 도구를 사용하면 개발자는 코드를 더욱 효율적으로 작성할 수 있으며, 애플리케이션의 성능을 최적화할 수 있다.

 

---

 

🐥vite vs webpack

vite

• Vite는 초고속 개발 서버와 최적화된 빌드 프로세스를 제공하는 최신 빌드 도구로, 사용자가 워크플로우를 간소화하고 최종 사용자 경험을 개선할 수 있도록 지원한다.
• Vite는 기본적으로 ESM (ECMAScript Modules)을 사용하며, Rollup을 기반으로 하여 빌드한다.
• Vite는 Webpack과 같은 다른 빌드 도구와 달리, Hot Module Replacement (HMR)을 사용하여 더욱 빠른 개발 속도를 제공한다.
• Vite는 Vue.js, React, Preact, Svelte, LitElement, Stencil 등의 프레임워크와 함께 사용할 수 있다.
• Vite는 개발자가 코드를 더욱 효율적으로 작성할 수 있도록 지원하며, 애플리케이션의 성능을 최적화할 수 있다.

 

webpack

• Webpack은 JavaScript 파일을 번들링하고, 최적화하며, 테스트하고, 배포하는 데 사용된다.
• Webpack은 entry, output, loader, plugin 등의 개념을 사용하여 프로젝트를 구성한다.
• Webpack은 다양한 로더와 플러그인을 제공하여 프로젝트의 요구사항에 따라 선택할 수 있다.
• Webpack은 Hot Module Replacement (HMR)을 지원하여 더욱 빠른 개발 속도를 제공한다.
• Webpack은 React, Angular, Vue.js 등의 프레임워크와 함께 사용할 수 있다.
• Webpack은 프론트엔드 개발자가 코드를 더욱 효율적으로 작성할 수 있도록 지원하며, 애플리케이션의 성능을 최적화할 수 있다.

---

webpack와 vite 어느 빌드도구를 선택해야 할까?

vite는 최신 빌드 도구이며 최신이다보니 typescript 호환에 오류가 발생하는 경우도 있다.

반면 webpack 안정화가 되있으면 2012년부터 프론트엔드 개발에서 사용되어온 빌드 도구이다.

 

차이점

• Vite는 Webpack보다 더욱 빠른 개발 속도를 제공합니다. 이는 Vite가 ESM을 사용하고, HMR을 지원하기 때문이다.
• Webpack은 Vite보다 더 많은 로더와 플러그인을 제공합니다. 이는 Webpack이 오랜 기간동안 사용되어왔기 때문이다.
• Vite는 Vue.js 창시자인 Evan You가 만든 도구이며, Vue.js와 함께 사용할 때 더욱 효율적이다.

 

프로젝트 요구사항에 따라 선택할 수있다.

개발 속도가 중요하면 vue 프레임워크를 쓴다면 vite 선택하는것이 좋다.

반면 커스텀이나 다양한 로더와 플러그인이 필요하다면 webpack을 선택하는것이 좋다.

 

---

 

재밌는 오늘의 운세 보고가세요! 

 

 

 

 

https://cometruedream.tistory.com/223

immer를 사용해서 불변성을 지켜야하는 이유와 얕은 복사의 개념

 

https://cometruedream.tistory.com/220

SEO 최적화 블로그 글자수 꿀팁

 

https://cometruedream.tistory.com/218

내 아이피 확인 (My IP Address) 안전하고 빠르고 쉽게 아는 방법