stonesy

📌빌드란?웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다. ✔👀 Webpack가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다. ✔👀 ViteVite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한..

CRA란 JavaScript로 구성된 Webpack(웹팩)을 사용하는데 속도가 느린편이다. 코드의 양이 많아질수록 느린 속도를 체감할 수 있다. 위의 단점을 해결하기 위해 Esbuild를 기반으로 만들어진 빌드툴인 vite를 사용한다.*Esbuild: Go 언어로 작성된 JavaScript 빌드툴, 속도가 빠름 📌Webpack과 Vite의 차이점개발서버Webpack: 소스 코드와 모든 종속 관계의 모든 번들링 후 서버가 준비된다.Vite: Esbuild로 미리 번들링한 모듈을 필요할 때 동적으로 가져오기 때문에 즉각적으로 서버가 구동된다.프로덕션 빌드Webpack: 각 모듈을 범위마다 함수로 매핑하여 결합한다.Vite: 하나의 파일에 모든 종속 모듈을 전역 범위로 선언하여 결합한다. 중복을 제거하기 때..