Skip to content

Vite 4.3이 출시되었습니다!

2023년 4월 20일

Vite 4.3 Announcement Cover Image

빠른 링크:

성능 향상

이번 마이너 릴리스에서는 개발 서버 성능 향상에 집중했습니다. 리졸버 로직을 간소화하여 핫 패스를 개선하고, package.json, TypeScript 설정 파일, 그리고 일반적인 URL 해석을 위한 더 스마트한 캐싱을 구현했습니다.

Vite 기여자 중 한 명이 작성한 이 블로그 포스트에서 성능 작업에 대한 자세한 설명을 읽을 수 있습니다: How we made Vite 4.3 faaaaster 🚀.

이번 스프린트는 Vite 4.2와 비교하여 전반적인 속도 향상을 가져왔습니다.

다음은 sapphi-red/performance-compare로 측정한 성능 향상 결과입니다. 이 도구는 1000개의 React 컴포넌트가 있는 앱을 대상으로 콜드 및 웜 개발 서버 시작 시간과 루트 및 리프 컴포넌트의 HMR 시간을 테스트합니다:

Vite (babel)Vite 4.2Vite 4.3향상
dev cold start17249.0ms5132.4ms-70.2%
dev warm start6027.8ms4536.1ms-24.7%
Root HMR46.8ms26.7ms-42.9%
Leaf HMR27.0ms12.9ms-52.2%
Vite (swc)Vite 4.2Vite 4.3향상
dev cold start13552.5ms3201.0ms-76.4%
dev warm start4625.5ms2834.4ms-38.7%
Root HMR30.5ms24.0ms-21.3%
Leaf HMR16.9ms10.0ms-40.8%

Vite 4.3 vs 4.2 startup time comparison

Vite 4.3 vs 4.2 HMR time comparison

벤치마크에 대한 자세한 정보는 여기에서 확인할 수 있습니다. 이 성능 테스트의 사양과 버전:

  • CPU: Ryzen 9 5900X, Memory: DDR4-3600 32GB, SSD: WD Blue SN550 NVME SSD
  • Windows 10 Pro 21H2 19044.2846
  • Node.js 18.16.0
  • Vite 및 React 플러그인 버전
    • Vite 4.2 (babel): Vite 4.2.1 + plugin-react 3.1.0
    • Vite 4.3 (babel): Vite 4.3.0 + plugin-react 4.0.0-beta.1
    • Vite 4.2 (swc): Vite 4.2.1 + plugin-react-swc 3.2.0
    • Vite 4.3 (swc): Vite 4.3.0 + plugin-react-swc 3.3.0

얼리 어답터들도 Vite 4.3 베타를 테스트하면서 실제 앱에서 1.5x-2x의 개발 시작 시간 향상을 보고했습니다. 여러분의 앱에서의 결과를 알려주시면 좋겠습니다.

프로파일링

Vite의 성능 향상 작업을 계속 진행할 예정입니다. 각 Pull Request에 대한 성능 메트릭을 얻을 수 있는 공식 벤치마크 도구를 작업하고 있습니다.

그리고 vite-plugin-inspect는 이제 어떤 플러그인이나 미들웨어가 애플리케이션의 병목인지 식별하는 데 도움이 되는 더 많은 성능 관련 기능을 제공합니다.

페이지가 로드된 후 vite --profile을 사용하고 (그 다음 p를 누르면) 개발 서버 시작의 CPU 프로파일이 저장됩니다. speedscope와 같은 앱에서 열어 성능 문제를 식별할 수 있습니다. 그리고 Discussion이나 Vite Discord에서 Vite 팀과 발견한 내용을 공유할 수 있습니다.

다음 단계

올해는 9월에 있을 Node.js 16의 EOL에 맞춰 단일 Vite 메이저 버전을 한 번만 출시하기로 결정했으며, 이 릴리스에서 Node.js 14와 16 모두에 대한 지원을 중단할 예정입니다. 참여하고 싶으시다면, 초기 피드백을 수집하기 위해 Vite 5 Discussion을 시작했습니다.

Released under the MIT License. (08070b7e)