Vue 앱의 빌드 프로세스: 롤업과 롤다운

작가: Andy Li

빌드 도구는 원시 코드를 브라우저가 이해하고 효율적으로 실행할 수 있는 코드로 변환하는 엔진 역할을 하는 최신 웹 개발에 필수적입니다. 빠르고 안정적인 빌드 도구가 없으면 개발 서버를 시작할 때 시작 시간이 너무 길어질 수 있으며 간단한 코드 변경이라도 브라우저에 반영되는 데 귀중한 시간이 걸려 개발 흐름과 생산성이 저하될 수 있습니다.

이 기사에서는 Vite, esbuild, Rollup 및 up-and-app을 포함하여 Vue.js 앱(또는 React.js 앱)의 빌드 프로세스와 관련된 모든 사항에 대해 설명합니다. Evan You(Vue.js 및 Vite.js 제작자)가 제작 중인 Rolldown이라는 새로운 도구입니다.

먼저 Vite부터 시작해 보겠습니다.

Vite의 현재 빌드 프로세스

다른 많은 프레임워크와 마찬가지로 Vue.js는 Vite를 빌드 도구로 사용합니다.

Vite에는 개발과 생산이라는 두 가지 모드가 있습니다. 뒤에서는 다르게 구현됩니다.

Vite는 개발 환경과 프로덕션 환경에 대해 서로 다른 빌드 전략을 사용하여 고유한 요구 사항에 맞게 최적화합니다. 개발 중에는 원활한 개발자 경험을 위해 빠른 피드백과 빠른 HMR(핫 모듈 교체)을 제공하는 데 중점을 둡니다. 프로덕션에서는 최종 사용자를 위해 최적화되고 성능이 뛰어난 번들을 생성하는 데 우선순위가 맞춰집니다.

Vite의 혁신적인 접근 방식이 실제로 빛나는 개발 빌드를 처리하는 방법을 살펴보겠습니다.

개발 모드의 Vite

개발 모드에서는 빌드 속도가 중요합니다. Vite는 모든 변경 후에 코드를 묶는 대신 수정된 파일을 ESM 형식(예: Vue 구성 요소의