개발자
vite에 관하여 질문드립니다.
프로덕션에 vite를 사용하여 개발환경을 구성하려고 공부 중인데, 궁금한 점이 생겼으나 정보가 파편화되어있어 정확한 이해가 어려워 질문 올립니다! 제가 vite 공식 가이드와 구글링하면서 이해한 바로는 “기존 브라우저 환경에서는 모듈화된 코드들을 브라우저가 읽을 수 없어 webpack과 같은 번들러를 이용해 하나의 파일로 합치는 과정을 거쳤고, 이것이 일반적인 번들러의 역할이었으나 브라우저가 ESM을 지원하면서 import, export를 별도의 도구 없이 브라우저 자체에서 해석할 수 있고 처리할 수 있게 되었으며 vite는 이 점을 활용하여 번들링 과정 없이 바로 실행하여 파일이 import되어 필요할 때 불러오는 방식을 사용한다. “ 라고 이해했는데 혹시 맞을까요? 추가로 vite의 공식 가이드에는 “프로덕션에서 번들 되지 않은 ESM을 가져오는 것은 중첩된 import로 인한 추가 네트워크 통신으로 인해 여전히 비효율적입니다” 라고 나와있는것을 보았을때, 위에 적힌 번들링없이 실행하는 것은 개발모드에만 사용되며, 프로덕션에는 여전히 webpack과같이 번들링을 진행하며 webpack대신 Rollup을 사용한다는 점만 다르다고 이해하였는데 이부분에서 틀린내용이 있을까요? 만약 그렇다면 vite가 강조하는 장점이 프로덕션에는 크게 작용하지않는다고 느껴져서요. 질문 자체가 잘못되었거나 ,틀린내용이 있다면 편하게 지적주시고 알려주시면 감사드리겠습니다!
답변 1
vite가 빌드하는 스크립트에 답이 있습니다. 우리가 import를 할 때 사용하는 다양한 외부 모듈들은 다른 파일에 작성이 되며, vite는 아주 효율적으로 이 파일들을 각각의 js 파일로 빌드합니다. 그리고 전체적인 파일 사용의 조감도는 menifest.json이라는 파일에 저장해 두고요. 그렇기 때문에 프로덕션에서도 여전히 유효한 것입니다. 프로젝트의 모듈화가 진행될수록, 어떤 모듈의 재활용성이 높아지면 높아질수록 이 방식이 빛을 발하게 되지요.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 03월 06일
네, 말씀해주신 부분이 기본적으로는 맞습니다. Vite는 개발 단계에서 모듈 번들링에 대한 오버헤드를 줄이고자 하는 것이 주 목표인 도구입니다. 자바스크립트의 ESM (ECMAScript Modules)을 지원하는 최신 브라우저를 통해 우리가 직접 코드를 구성하고 디버깅 할 수 있게 하여 번들링 시간을 상당히 줄일 수 있습니다. 그러나 프로덕션 환경에서는 여전히 번들링이 필요합니다. 그 이유는 한 가지, 여러 파일과 코드 조각을 단일 또는 적은 수의 파일로 결합함으로써 네트워크 요청을 최소화할 수 있다는 점입니다. 이것은 페이지 로딩 속도에 큰 영향을 미칩니다. 두번째 이유로는 성능 최적화와 컴파일 타임 변환 등 다른 중요한 작업들이 첨부되기 때문입니다. Vite가 Rollup을 사용하는 것도 맞습니다. Vite는 개발 모드에서 그런 역할을 하며, 프로덕션용 빌드에 대해서는 Rollup을 사용하여 최적화된 애플리케이션 구축 단계를 담당합니다. Rollup은 트리 쉐이킹과 코드 분할 등 고급 기능을 제공해 성능 최적화에 뛰어납니다. Vite의 주요 강점 중 하나는 개발 환경에서의 빠른 시작 시간과 HMR (Hot Module Replacement) 속도입니다. 이는 Vite가 변경된 모듈만 다시 로드하고 번들하지 않기 때문입니다. 이것은 프로덕션용 빌드에 직접적인 영향은 없지만, 개발자 경험과 생산성을 크게 향상시킵니다. 따라서 Vite의 장점은 프로덕션 빌드보다는 주로 개발 과정에서 명확하게 드러납니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!