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 구성 요소의 <script> 코드)으로 직접 제공하므로 최소한의 처리로 신속한 브라우저 업데이트가 가능합니다.</script>

실제로 Vite는 TypeScript 코드를 브라우저 호환 JavaScript로 변환합니다. 개발 빌드에는 프로덕션보다 더 적은 단계가 필요하지만(곧 살펴보겠습니다) 코드를 신속하게 변환하는 것은 여전히 ​​까다롭습니다. 특히 변경 사항이 몇 초 내에 브라우저에 나타나야 하기 때문에 더욱 그렇습니다.

이것이 바로 Vite가 Go로 작성된 고성능 도구인 esbuild를 사용하는 이유입니다. Go는 기계어(프로세서가 실행할 수 있는 하위 수준 바이너리 명령어)로 직접 컴파일하므로 esbuild는 최신 개발 서버 설정에 중요한 요구 사항인 뛰어난 속도를 제공합니다.

---

생산 모드의 VITE

프로덕션에서는 빌드 속도가 중요하지만 최우선 순위는 아닙니다. 프로덕션 빌드를 생성할 때 빌드 도구에 관계없이 약간의 대기 시간이 예상될 수 있습니다. 한 번에 하나의 파일과 해당 종속성만 처리하는 개발 모드와 달리 프로덕션 빌드는 모든 코드를 처음부터 번들로 묶어야 하므로 즉각적인 빌드가 불가능합니다.

또한 프로덕션 빌드에는 추가 단계가 필요한 경우가 많습니다. 예를 들어, 오래된 브라우저용 JavaScript 코드를 트랜스파일해야 할 수도 있습니다. 이는 단순히 최신 브라우저를 사용할 수 있다면 개발 중에는 불필요한 일입니다.

기타 중요한 프로덕션 빌드 단계에는 축소(기능을 유지하면서 코드에서 불필요한 문자 제거) 및 코드 분할(요구 시 로드되는 더 작은 덩어리로 코드 나누기)이 포함됩니다. 이러한 프로세스는 코드의 런타임 성능에 직접적인 영향을 미칩니다.

프로덕션 빌드의 최우선 순위는 사용자 브라우저에서 코드가 효율적으로 실행되도록 하는 것입니다. 사용자가 사이트에 자주 액세스하는 동안 프로덕션 빌드가 가끔씩 발생하므로 이는 빌드 속도보다 우선합니다.

Vite는 Vite와 직접 사용할 수 있는 풍부한 플러그인 생태계 때문에 프로덕션 번들링을 위해 Rollup을 선택했습니다. Vite의 플러그인 아키텍처는 Rollup의 아키텍처를 반영하므로 이러한 호환성은 번성하는 플러그인 커뮤니티를 육성하는 데 도움이 되었으며 Vite의 광범위한 채택에 기여했습니다.

?
요약하자면: Vite는 개발 빌드에 esbuild(속도에 최적화됨)를 사용하고 프로덕션 빌드에 Rollup(플러그인으로 알려짐)을 사용합니다.

이 설정은 잘 작동했지만 중요한 변화가 다가오고 있습니다. Vite는 곧 esbuild 와 Rollup을 Rolldown이라는 새로운 도구로 대체할 예정입니다.

Rolldown을 살펴보기 전에 Rolldown의 발명으로 이어진 Vite의 현재 설정과 관련된 과제를 살펴보겠습니다.

---

Vite의 문제점

빌드 도구나 번들러는 소스 코드를 처리할 때 먼저 코드의 구문과 구조를 나타내는 트리 형식의 데이터 구조인 AST(추상 구문 트리)를 생성합니다. 예를 들어, 함수 선언은 AST에서 "FunctionDeclaration" 노드가 되며 해당 매개변수 및 본문에 대한 하위 노드가 있습니다.

두 가지 다른 도구를 사용하여 동일한 소스 코드를 구문 분석하는 것은 코드 변환에 비효율적입니다. 단일 도구(또는 호환 도구 세트)가 프로세스 전체에서 구문 분석된 결과를 재사용할 수 있기 때문입니다.

esbuild는 Vite의 개발 모드를 처리하는 동시에 축소를 통해 프로덕션 모드에서도 역할을 합니다. 이는 esbuild와 Rollup이 빌드 프로세스에서 순차적으로 작동함을 의미합니다. React 애플리케이션의 경우 esbuild 및 Rollup과 함께 SWC(Rust로 작성된 또 다른 빌드 도구)를 추가하면 프로세스가 더욱 복잡해집니다.

여러 도구를 순서대로 사용하면 각 도구가 독립적으로 코드를 구문 분석하고 도구 간에 결과를 전달해야 하므로 비효율성이 발생합니다. Rollup의 강력한 플러그인 에코시스템은 프로덕션 빌드에 유용하지만 esbuild에 비해 속도가 느리다는 단점이 있습니다. 이상적인 솔루션은 esbuild의 성능과 Rollup의 확장성을 결합한 도구이며, 이것이 바로 Rolldown이 달성하려는 목표입니다.

---

롤다운 소개

Rolldown은 Go와 마찬가지로 기계어 코드로 직접 컴파일되는 프로그래밍 언어인 Rust로 작성된 번들러입니다. 이는 롤다운이 esbuild와 유사한 속도를 달성한다는 것을 의미합니다.

Rolldown은 Rollup과 유사한 플러그인 API를 공유하므로 대부분의 기존 Vite 호환 플러그인은 새로운 Rolldown 기반 Vite 버전과 원활하게 작동합니다.

기본적으로 성능만 향상되면 지금과 동일한 방식으로 Vite를 사용할 수 있습니다.

얼마나 빨라진다고 말하는 걸까요? 속도가 주요 장점이라면 새로운 도구를 채택하는 것을 정당화하려면 속도가 훨씬 빨라야겠죠?

Evan You의 벤치마크에 따르면 Vue 핵심 소스 코드의 번들링 속도를 테스트할 때 Rolldown의 빌드 설정은 Rollup 기반 설정보다 7배 이상 빠르게 수행됩니다.

이 벤치마크는 특히 프로덕션 빌드 시간을 측정합니다. 개발은 어떻습니까?

현재 Vite는 개발에 esbuild를 사용하고 있습니다. Evan You의 벤치마크에 따르면 Rolldown은 esbuild보다 거의 두 배 빠른 성능을 발휘합니다. esbuild는 이미 성능이 뛰어나므로 이러한 개선은 롤업 비교보다 미미합니다.

이러한 모든 성능 업그레이드는 Rolldown의 기본 도구 모음을 통해 제공됩니다. 여기에는 새로운 파서, 린터, 리졸버, 변환기 등이 포함되며 모두 Oxc 프로젝트(롤다운 팀에서 생성)의 일부입니다.

Oxc는 JavaScript 언어 도구 세트입니다. 이러한 도구는 롤다운에서 사용되지만 비롤다운 컨텍스트에서 개별적으로 사용될 수도 있습니다. 예를 들어, Oxc 린터는 ESLint보다 빠르므로 CI 워크플로에서 ESLint를 실행하기 전에 신속하게 코드 오류를 찾아내는 데 사용할 수 있습니다.

Oxc 도구는 성능을 기본 목표로 처음부터 작성되었기 때문에 일반적으로 다른 유사한 도구보다 빠릅니다.

---

Vite의 미래

Rolldown은 아직 프로덕션 준비가 되지 않았지만 Rolldown 통합 기능을 갖춘 Vite의 알파 릴리스는 2024년 말 이전에 출시될 예정입니다. 앞으로 몇 달 동안 Vue, Vite 및 Rolldown의 최신 개발에 대해 계속 보고하겠습니다.

Vite에 대해 자세히 알아보려면 Vue Mastery에서 Vite 제작자 Evan You가 직접 가르치는 Lightning Fast Builds 과정을 확인하세요.

2024년 12월 4일 https://www.vuemastery.com 에 원본 게시.

---

위 내용은 Vue 앱의 빌드 프로세스: 롤업과 롤다운의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!