Vite 3.0이 출시되었습니다!
2022년 7월 23일 - Vite 4.0 발표도 확인해보세요
작년 2월, Evan You가 Vite 2를 릴리스했습니다. 그 이후로 Vite의 채택은 멈추지 않고 성장하여 주당 100만 건 이상의 npm 다운로드를 기록하고 있습니다. 릴리스 후 방대한 생태계가 빠르게 형성되었습니다. Vite는 웹 프레임워크에서 새로운 혁신 경쟁을 이끌고 있습니다. Nuxt 3는 기본적으로 Vite를 사용합니다. SvelteKit, Astro, Hydrogen, SolidStart는 모두 Vite로 구축되었습니다. Laravel은 이제 기본적으로 Vite를 사용하기로 결정했습니다. Vite Ruby는 Vite가 Rails DX를 어떻게 개선할 수 있는지 보여줍니다. Vitest는 Jest의 Vite 네이티브 대안으로 진전을 이루고 있습니다. Vite는 Cypress와 Playwright의 새로운 컴포넌트 테스팅 기능을 뒷받침하고 있으며, Storybook은 Vite를 공식 빌더로 채택했습니다. 그리고 목록은 계속됩니다. 이러한 프로젝트 대부분의 메인테이너들이 Vite 코어 자체를 개선하는 데 참여하여 Vite 팀 및 다른 기여자들과 긴밀히 협력하고 있습니다.
오늘, v2 출시로부터 16개월 후 Vite 3의 릴리스를 발표하게 되어 기쁩니다. 저희는 Node.js의 EOL에 맞춰 최소 매년 새로운 Vite 메이저 버전을 릴리스하기로 결정했으며, 생태계 프로젝트들을 위한 간단한 마이그레이션 가이드와 함께 Vite의 API를 정기적으로 검토할 기회를 갖기로 했습니다.
빠른 링크:
Vite를 처음 접하신다면 Why Vite 가이드를 읽어보시기를 권합니다. 그런 다음 시작하기와 기능 가이드를 확인하여 Vite가 제공하는 것들을 살펴보세요. 언제나 그렇듯이 GitHub에서의 기여를 환영합니다. 지금까지 600명 이상의 협력자가 Vite 개선에 도움을 주었습니다. Twitter에서 업데이트를 팔로우하거나 Discord 채팅 서버에서 다른 Vite 사용자들과 토론에 참여하세요.
새로운 문서
vite.dev로 이동하여 새로운 v3 문서를 즐겨보세요. Vite는 이제 새로운 VitePress 기본 테마를 사용하며, 다른 기능들과 함께 멋진 다크 모드를 제공합니다.
생태계의 여러 프로젝트들이 이미 이 테마로 마이그레이션했습니다(Vitest, vite-plugin-pwa, VitePress 자체 포함).
Vite 2 문서에 접근해야 한다면 v2.vite.dev에서 온라인으로 계속 이용할 수 있습니다. 또한 새로운 main.vite.dev 서브도메인이 있으며, 여기서는 Vite의 main 브랜치에 대한 각 커밋이 자동으로 배포됩니다. 이는 베타 버전을 테스트하거나 코어 개발에 기여할 때 유용합니다.
이제 이전의 중국어 및 일본어 번역에 추가하여 공식 스페인어 번역도 있습니다:
Create Vite 스타터 템플릿
create-vite 템플릿은 좋아하는 프레임워크로 Vite를 빠르게 테스트할 수 있는 훌륭한 도구였습니다. Vite 3에서는 모든 템플릿이 새로운 문서에 맞춘 새로운 테마를 얻었습니다. 온라인에서 열어보고 지금 Vite 3으로 체험해보세요:
'/%3e%3cpath%20d='M292.965%201.5744L156.801%2028.2552C154.563%2028.6937%20152.906%2030.5903%20152.771%2032.8664L144.395%20174.33C144.198%20177.662%20147.258%20180.248%20150.51%20179.498L188.42%20170.749C191.967%20169.931%20195.172%20173.055%20194.443%20176.622L183.18%20231.775C182.422%20235.487%20185.907%20238.661%20189.532%20237.56L212.947%20230.446C216.577%20229.344%20220.065%20232.527%20219.297%20236.242L201.398%20322.875C200.278%20328.294%20207.486%20331.249%20210.492%20326.603L212.5%20323.5L323.454%20102.072C325.312%2098.3645%20322.108%2094.137%20318.036%2094.9228L279.014%20102.454C275.347%20103.161%20272.227%2099.746%20273.262%2096.1583L298.731%207.86689C299.767%204.27314%20296.636%200.855181%20292.965%201.5744Z'%20fill='url(%23paint1_linear)'/%3e%3cdefs%3e%3clinearGradient%20id='paint0_linear'%20x1='6.00017'%20y1='32.9999'%20x2='235'%20y2='344'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%2341D1FF'/%3e%3cstop%20offset='1'%20stop-color='%23BD34FE'/%3e%3c/linearGradient%3e%3clinearGradient%20id='paint1_linear'%20x1='194.651'%20y1='8.81818'%20x2='236.076'%20y2='292.989'%20gradientUnits='userSpaceOnUse'%3e%3cstop%20stop-color='%23FFEA83'/%3e%3cstop%20offset='0.0833333'%20stop-color='%23FFDD35'/%3e%3cstop%20offset='1'%20stop-color='%23FFA800'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e)
이제 테마가 모든 템플릿에서 공유됩니다. 이는 이러한 스타터들이 Vite로 시작하기 위한 최소한의 템플릿이라는 범위를 더 잘 전달하는 데 도움이 됩니다. 린팅, 테스팅 설정 및 기타 기능을 포함한 더 완전한 솔루션의 경우, create-vue 및 create-svelte와 같은 일부 프레임워크를 위한 공식 Vite 기반 템플릿이 있습니다. Awesome Vite에는 커뮤니티가 관리하는 템플릿 목록이 있습니다.
개발 개선사항
Vite CLI
VITE v3.0.0 ready in 320 ms ➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose
CLI의 미적 개선사항 외에도, 기본 개발 서버 포트가 이제 5173이고 프리뷰 서버가 4173에서 수신 대기한다는 것을 알 수 있습니다. 이 변경은 Vite가 다른 도구들과의 충돌을 피할 수 있도록 보장합니다.
개선된 WebSocket 연결 전략
Vite 2의 문제점 중 하나는 프록시 뒤에서 실행할 때 서버를 구성하는 것이었습니다. Vite 3는 기본 연결 스키마를 변경하여 대부분의 시나리오에서 작동하도록 했습니다. 이러한 모든 설정은 이제 vite-setup-catalogue를 통해 Vite 생태계 CI의 일부로 테스트됩니다.
콜드 스타트 개선사항
Vite는 이제 초기 정적으로 가져온 모듈을 크롤링하는 동안 플러그인이 의존성을 주입하더라도, 콜드 스타트 시 전체 페이지 리로드가 발생하지 않도록 방지합니다(#8869).
자세히 알아보기
Vite 2.9에서는 스캐너와 옵티마이저가 모두 백그라운드에서 실행되었습니다. 스캐너가 모든 의존성을 찾는 최선의 시나리오에서는 콜드 스타트에서 리로드가 필요하지 않았습니다. 하지만 스캐너가 의존성을 놓친 경우, 새로운 최적화 단계와 그 다음 리로드가 필요했습니다. Vite는 v2.9에서 새로 최적화된 청크가 브라우저가 가진 것과 호환되는지 감지하여 이러한 리로드 중 일부를 피할 수 있었습니다. 하지만 공통 의존성이 있는 경우, 하위 청크가 변경될 수 있어 중복된 상태를 피하기 위해 리로드가 필요했습니다. Vite 3에서는 정적 가져오기의 크롤링이 완료될 때까지 최적화된 의존성이 브라우저에 전달되지 않습니다. 누락된 의존성이 있는 경우(예: 플러그인에 의해 주입된 경우) 빠른 최적화 단계가 실행되고, 그 후에만 번들된 의존성이 전송됩니다. 따라서 이러한 경우에는 더 이상 페이지 리로드가 필요하지 않습니다.
import.meta.glob
import.meta.glob 지원이 다시 작성되었습니다. Glob Import 가이드에서 새로운 기능들을 읽어보세요:
다중 패턴을 배열로 전달할 수 있습니다
import.meta.glob(['./dir/*.js', './another/*.js'])특정 파일을 무시하기 위한 부정 패턴(!로 시작하는)이 이제 지원됩니다
import.meta.glob(['./dir/*.js', '!**/bar.js'])명명된 가져오기를 지정하여 트리 쉐이킹을 개선할 수 있습니다
import.meta.glob('./dir/*.js', { import: 'setup' })사용자 정의 쿼리를 전달하여 메타데이터를 첨부할 수 있습니다
import.meta.glob('./dir/*.js', { query: { custom: 'data' } })즉시 가져오기는 이제 플래그로 전달됩니다
import.meta.glob('./dir/*.js', { eager: true })미래 표준과 WASM Import 정렬
WebAssembly 가져오기 API가 미래 표준과의 충돌을 피하고 더 유연하게 만들기 위해 수정되었습니다:
import init from './example.wasm?init'
init().then((instance) => {
instance.exports.test()
})WebAssembly 가이드에서 자세히 알아보세요
빌드 개선사항
기본적으로 ESM SSR 빌드
생태계의 대부분 SSR 프레임워크는 이미 ESM 빌드를 사용하고 있었습니다. 따라서 Vite 3는 ESM을 SSR 빌드의 기본 형식으로 만듭니다. 이를 통해 이전의 SSR 외부화 휴리스틱을 간소화하여 기본적으로 의존성을 외부화할 수 있습니다.
개선된 상대 Base 지원
Vite 3는 이제 상대 base(base: '' 사용)를 적절히 지원하여 빌드된 에셋을 다시 빌드하지 않고 다른 base에 배포할 수 있습니다. 이는 빌드 시점에 base를 알 수 없는 경우, 예를 들어 IPFS와 같은 콘텐츠 주소 지정 가능한 네트워크에 배포할 때 유용합니다.
실험적 기능
빌드된 에셋에 대한 세밀한 경로 제어 (실험적)
이것만으로는 충분하지 않은 다른 배포 시나리오들이 있습니다. 예를 들어, 생성된 해시된 에셋을 공용 파일과 다른 CDN에 배포해야 하는 경우, 빌드 시점에 경로 생성에 대한 더 세밀한 제어가 필요합니다. Vite 3는 빌드된 파일 경로를 수정하는 실험적 API를 제공합니다. 자세한 내용은 빌드 고급 Base 옵션을 확인하세요.
빌드 시점의 Esbuild 의존성 최적화 (실험적)
개발과 빌드 시점의 주요 차이점 중 하나는 Vite가 의존성을 처리하는 방식입니다. 빌드 시점에는 @rollup/plugin-commonjs를 사용하여 CJS 전용 의존성(React와 같은)을 가져올 수 있습니다. 개발 서버를 사용할 때는 대신 esbuild를 사용하여 의존성을 사전 번들링하고 최적화하며, CJS 의존성을 가져오는 사용자 코드를 변환하는 동안 인라인 상호 운용 스키마가 적용됩니다. Vite 3 개발 중에 빌드 시점에도 esbuild를 사용하여 의존성을 최적화할 수 있도록 필요한 변경사항을 도입했습니다. 그러면 @rollup/plugin-commonjs를 피할 수 있어 개발과 빌드 시점이 동일한 방식으로 작동하게 됩니다.
Rollup v3가 앞으로 몇 달 안에 출시될 예정이고, 우리는 또 다른 Vite 메이저로 후속 작업을 진행할 예정이므로, v3 범위를 줄이고 Vite와 생태계가 빌드 시점의 새로운 CJS 상호 운용 접근법과 관련된 잠재적 문제를 해결할 시간을 더 주기 위해 이 모드를 선택 사항으로 만들기로 결정했습니다. 프레임워크들은 Vite 4 이전에 자신들의 속도에 맞춰 빌드 시점에 esbuild 의존성 최적화를 기본으로 사용하도록 전환할 수 있습니다.
HMR 부분 수용 (실험적)
HMR 부분 수용에 대한 옵트인 지원이 있습니다. 이 기능은 동일한 모듈에서 여러 바인딩을 내보내는 프레임워크 컴포넌트에 대해 더 세밀한 HMR을 가능하게 할 수 있습니다. 이 제안에 대한 토론에서 자세히 알아볼 수 있습니다.
번들 크기 감소
Vite는 배포 및 설치 용량을 중요하게 생각합니다. 새 앱의 빠른 설치는 하나의 기능입니다. Vite는 대부분의 의존성을 번들링하고 가능한 곳에서는 현대적이고 가벼운 대안을 사용하려고 합니다. 이러한 지속적인 목표를 계속하여, Vite 3 배포 용량은 v2보다 30% 작습니다.
| 배포 용량 | 설치 용량 | |
|---|---|---|
| Vite 2.9.14 | 4.38MB | 19.1MB |
| Vite 3.0.0 | 3.05MB | 17.8MB |
| 감소 | -30% | -7% |
부분적으로, 이 감소는 대부분의 사용자가 필요로 하지 않는 일부 의존성을 선택 사항으로 만든 것으로 가능했습니다. 먼저, Terser는 더 이상 기본적으로 설치되지 않습니다. 이 의존성은 Vite 2에서 이미 esbuild를 JS와 CSS 모두의 기본 미니파이어로 만들었기 때문에 더 이상 필요하지 않았습니다. build.minify: 'terser'를 사용한다면 설치해야 합니다(npm add -D terser). 또한 node-forge를 모노레포에서 제거하고, 자동 https 인증서 생성 지원을 새로운 플러그인으로 구현했습니다: @vitejs/plugin-basic-ssl. 이 기능은 로컬 저장소에 추가되지 않는 신뢰할 수 없는 인증서만 생성하므로, 추가된 크기를 정당화하지 못했습니다.
버그 수정
최근 Vite 팀에 합류한 @bluwyoo, @sapphi_red가 주도한 트리아징 마라톤이 있었습니다. 지난 3개월 동안 Vite 열린 이슈는 770개에서 400개로 줄었습니다. 그리고 이 감소는 새로 열린 PR이 역대 최고치를 기록하는 동안 달성되었습니다. 동시에 @haoqunjiang도 Vite 이슈의 포괄적인 개요를 큐레이션했습니다.
호환성 참고사항
- Vite는 더 이상 EOL에 도달한 Node.js 12 / 13 / 15를 지원하지 않습니다. 이제 Node.js 14.18+ / 16+가 필요합니다.
- Vite는 이제 ESM으로 배포되며, 호환성을 위해 ESM 엔트리에 대한 CJS 프록시가 있습니다.
- 현대 브라우저 베이스라인은 이제 네이티브 ES 모듈, 네이티브 ESM 동적 가져오기,
import.meta기능을 지원하는 브라우저를 대상으로 합니다. - SSR 및 라이브러리 모드의 JS 파일 확장자는 이제 형식과 패키지 타입에 따라 출력 JS 엔트리와 청크에 대해 유효한 확장자(
js,mjs, 또는cjs)를 사용합니다.
마이그레이션 가이드에서 자세히 알아보세요.
Vite 코어 업그레이드
Vite 3를 작업하면서 Vite 코어 협력자들의 기여 경험도 개선했습니다.
- 단위 및 E2E 테스트가 Vitest로 마이그레이션되어 더 빠르고 안정적인 DX를 제공합니다. 이 이동은 생태계의 중요한 인프라 프로젝트에 대한 도그푸딩 역할도 합니다.
- VitePress 빌드가 이제 CI의 일부로 테스트됩니다.
- Vite가 생태계의 나머지를 따라 pnpm 7로 업그레이드되었습니다.
- 플레이그라운드가 packages 디렉터리에서
/playgrounds로 이동되었습니다. - 패키지와 플레이그라운드가 이제
"type": "module"입니다. - 플러그인이 이제 unbuild를 사용하여 번들링되며, plugin-vue-jsx와 plugin-legacy가 TypeScript로 이동되었습니다.
생태계가 v3에 준비되었습니다
우리는 생태계의 프로젝트들과 긴밀히 협력하여 Vite 기반 프레임워크들이 Vite 3에 준비되도록 했습니다. vite-ecosystem-ci를 통해 생태계의 주요 플레이어들의 CI를 Vite의 main 브랜치에 대해 실행하고 회귀를 도입하기 전에 시기적절한 보고서를 받을 수 있습니다. 오늘의 릴리스는 곧 Vite를 사용하는 대부분의 프로젝트와 호환될 것입니다.
감사의 말
Vite 3는 Vite 팀 구성원들이 생태계 프로젝트 메인테이너들 및 Vite 코어의 다른 협력자들과 함께 작업한 총합적인 노력의 결과입니다.
Vite 3에 기능을 구현하고, 수정하고, 피드백을 제공하고, 참여해주신 모든 분들께 감사드립니다:
- Vite 팀 구성원들 @youyuxi, @patak_dev, @antfu7, @bluwyoo, @sapphi_red, @haoqunjiang, @poyoho, @Shini_92, @retropragma.
- @benmccann, @danielcroe, @brillout, @sheremet_va, @userquin, @enzoinnocenzi, @maximomussini, @IanVanSchooten, Astro 팀, 그리고 v3를 형성하는 데 도움을 준 생태계의 모든 다른 프레임워크 및 플러그인 메인테이너들.
- vite-ecosystem-ci에 대한 작업을 해주신 @dominikg.
- pnpm에 대한 작업과 우리가 지원이 필요할 때의 반응성을 보여주신 @ZoltanKochan.
- HMR 부분 수용 지원을 해주신 @rixo.
- Vite 3 릴리스를 위해 테마를 준비해주신 @KiaKing85와 VitePress 내부 작업을 해주신 @_brc_dd.
- 새로운 스페인어 번역을 해주신 @CodingWithCego와 중국어 및 일본어 번역 팀의 @ShenQingchuan, @hiro-lapis 및 번역된 문서를 최신 상태로 유지해주신 다른 분들.
또한 Vite 팀을 후원하는 개인과 회사들, 그리고 Vite 개발에 투자하는 회사들에게도 감사드립니다: @antfu7의 Vite 및 생태계에 대한 작업 중 일부는 Nuxt Labs에서의 그의 업무의 일부이며, StackBlitz는 @patak_dev를 Vite에서 풀타임으로 작업하도록 고용했습니다.
다음은 무엇인가요
우리는 앞으로 몇 달 동안 Vite 위에 구축된 모든 프로젝트들의 원활한 전환을 보장하는 데 집중할 것입니다. 따라서 첫 번째 마이너 버전들은 새로 열린 이슈에 집중하여 트리아징 노력을 계속하는 데 중점을 둘 것입니다.
Rollup 팀은 다음 메이저 작업을 진행하고 있으며, 앞으로 몇 달 안에 릴리스될 예정입니다. Rollup 플러그인 생태계가 업데이트할 시간을 가진 후, 우리는 새로운 Vite 메이저로 후속 작업을 진행할 것입니다. 이는 올해 더 중요한 변경사항을 도입할 또 다른 기회를 제공할 것이며, 이번 릴리스에서 도입된 일부 실험적 기능들을 안정화하는 데 활용할 수 있습니다.
Vite 개선에 도움을 주고 싶으시다면, 이슈 트리아징을 도와주시는 것이 참여하는 가장 좋은 방법입니다. Discord에 참여하여 #contributing 채널을 찾아보세요. 또는 #docs, #help 다른 사람들을 도와주거나 플러그인을 만드는 것에 참여하세요. 우리는 이제 막 시작했습니다. Vite의 DX를 계속 개선할 수 있는 많은 열린 아이디어들이 있습니다.