Vite 팀은 Vite 5.1이 공식적으로 출시되었음을 공식적으로 발표했습니다 .
Vite(프랑스어로 "빠른",
/vit/"veet"로 발음)는 프런트엔드 개발 경험을 크게 향상시키는 새로운 프런트엔드 구축 도구입니다. 주로 두 부분으로 구성됩니다.
믿을 수 없을 만큼 빠른 HMR(핫 모듈 업데이트)과 같은 기본 ES 모듈을 기반으로 풍부한 내장 기능을 제공하는 개발 서버입니다.
롤업을 사용하여 코드를 패키징하고 프로덕션 환경에 고도로 최적화된 정적 리소스를 출력하도록 사전 구성된 빌드 지침 세트입니다.
Vite는 플러그인 API 및 JavaScript API를 통해 강력한 확장성을 제공하며 완전한 유형 지원을 제공합니다.
Vite 런타임 API
Vite 5.1에는 새로운 Vite Runtime API에 대한 실험적 지원이 추가되었습니다. 먼저 Vite 플러그인을 사용하여 모든 코드를 처리한 다음 실행할 수 있습니다. server.ssrLoadModule런타임 구현이 서버와 분리되어 있기 때문에 이는 매우 다릅니다. 이를 통해 라이브러리 및 프레임워크 작성자는 서버와 런타임 간에 자체 통신 계층을 구현할 수 있습니다. 새로운 Vite 런타임 API는 안정화 후 Vite의 현재 SSR 프리미티브(서버 측 렌더링 프리미티브)를 대체하도록 설계되었습니다.
새로운 Vite Runtime API는 용의 해에 많은 혜택을 제공합니다:
-
SSR 중 HMR(핫 모듈 교체) 지원
-
서버와 분리되어 있으므로 단일 서버를 사용할 수 있는 클라이언트 수에는 제한이 없습니다. 각 클라이언트는 자체 모듈 캐시를 가지며 개인 취향에 따라 통신할 수도 있습니다. 메시지 채널/
fetch호출/직접 함수 호출/웹소켓을 사용합니다. -
내장된 API 에 의존하지 않으므로
node/bun/deno어떤 환경에서도 실행될 수 있습니다. -
코드 실행을 위한 자체 메커니즘이 있는 도구와 쉽게 통합될 수 있습니다. 예를 들어
eval대신 를 사용하여 실행기를 제공할 수 있습니다new AsyncFunction.
초기 아이디어는 PP에서 제안되었고 vite-nodeAntFu에서 패키지로 구현되었으며, 이는 Nuxt 3 Dev SSR을 구동하고 나중에 Vitest의 인프라로 사용되었습니다. 따라서 vite-node전반적인 사고는 "멀리서 코드를 아는 것"이라는 장기 테스트를 통과했습니다. 이는 VS에서 API의 새로운 반복으로 Vitest에서 재현되었으며 vite-nodeVite 코어 라이브러리에 통합할 때 과거가 바뀌어 Vite Runtime API가 더욱 유연하고 강력해졌습니다. 이 PR(Pull Request)은 1년 동안 기다려 왔습니다.
기능
향상된 .css?url지원
이제 CSS 파일을 URL로 가져오는 것이 성공적으로 작동합니다. 이것이 Remix를 Vite로 마이그레이션하는 데 있어 마지막 장애물입니다.
build.assetsInlineLimit이제 콜백이 지원됩니다
이제 사용자는 특정 리소스에 대한 인라인을 활성화하거나 비활성화하기 위해 부울 값을 반환하는 콜백 함수를 제공할 수 있습니다. 반환되면 undefined기본 논리가 적용됩니다.
루프 가져오기용 HMR 개선
Vite 5.0에서 순환 가져오기에 허용된 모듈은 클라이언트 측에서 정상적으로 처리될 수 있는 경우에도 항상 전체 페이지 다시 로드를 트리거합니다. 이제 이 문제는 해결되어 전체 페이지를 다시 로드하지 않고도 HMR을 적용할 수 있지만, HMR 도중 오류가 발생하면 페이지가 다시 로드됩니다.
ssr.external: true모든 SSR 패키지 외부화 지원
역사적으로 Vite는 링크된 패키지를 제외한 모든 패키지를 외부화했습니다. 이 새로운 ssr.external: true옵션은 연결된 패키지를 포함하여 모든 패키지를 강제로 외부화하는 데 사용할 수 있습니다. 이는 모든 외부 패키지의 일반적인 사례를 시뮬레이션하려는 모노레포(다중 라이브러리 개발) 테스트 또는 ssrLoadModule임의의 파일을 사용하고 HMR에 신경 쓰지 않기 때문에 항상 외부 패키지를 사용하려는 경우에 편리합니다.
미리보기 서버에 close메서드 노출
이제 미리보기 서버는 close열려 있는 모든 소켓 연결을 포함하여 서버를 정상적으로 종료하는 메서드를 공개합니다.
성능 최적화
Vite는 출시될 때마다 점점 더 빨라지고 있으며 Vite 5.1에는 성능 최적화가 포함되어 있습니다. vite-dev-server-perfVite 4.0 이후 모든 Vite 마이너 버전을 사용하여 2510K 모듈(레이어 깊이 트리)의 로드 시간을 측정 했습니다 . 이는 Vite의 패키지되지 않은 솔루션의 효율성을 측정하는 탁월한 벤치마크입니다. 각 모듈은 카운터를 전달하고 모듈 트리의 다른 파일을 가져오는 미니 TS 파일이므로 주로 개별 모듈에 대한 요청을 실행하는 데 소요되는 시간 오버헤드를 측정합니다. Vite 4.0에서는 8얇고 가벼운 게이밍 노트북에 10K 모듈을 로드하는 데 몇 초가 걸립니다 . 성능 중심의 Vite 4.3을 사용하면 더욱 향상되었으며 6.35몇 초 만에 로드할 수 있습니다. Vite 5.1에서는 또 다른 성능 도약을 이루었습니다. Vite는 이제 5.35몇 초 만에 10K 모듈을 제공할 수 있습니다.
이 벤치마크의 결과는 버전 벤치마킹을 위한 탁월한 솔루션인 Headless Puppeteer에서 실행됩니다. 그러나 이는 사용자 경험의 길이를 나타내지는 않습니다. Chrome의 시크릿 창에서 동일한 수의 10K 모듈을 실행하면 다음과 같습니다.
| 10K 모듈 | 빨리 5.0 | 빨리 5.1 |
|---|---|---|
| 로딩 시간 | 2892ms | 2765ms |
| 로딩 시간(캐시) | 2778ms | 2477ms |
| 완전 재장전 | 2003ms | 1878ms |
| 전체 새로 로드(캐시) | 1682ms | 1604ms |
스레드에서 CSS 전처리기 실행
이제 Vite는 스레드에서 CSS 전처리기 실행을 선택적으로 지원합니다. 를 사용하여 활성화 할 수 있습니다 css.preprocessorMaxWorkers: true. Vuetify 2 프로젝트의 경우 이 기능을 활성화한 후 개발 시작 시간이 40% 단축되었습니다.
서버 콜드 스타트를 개선하는 새로운 옵션
optimizeDeps.holdUntilCrawlEnd: false대규모 프로젝트에 도움이 될 수 있는 새로운 유형의 종속성 최적화 전략으로의 전환을 설정할 수 있습니다 . 향후에는 이 정책을 기본적으로 전환하는 것을 고려하고 있습니다.
더 빠른 구문 분석을 위한 캐시 검사
fs.cachedChecks이제 최적화가 기본적으로 활성화됩니다. Windows에서는 tryFsResolve속도가 약 14100% 증가했으며, 트라이앵글 벤치마크의 ID 구문 분석이 5전반적으로 약 100% 증가했습니다.
내부 성능 최적화
개발 서버 성능이 몇 가지 점진적인 개선을 이루었습니다. 새로운 유형의 미들웨어는 304에서 단락될 수 있습니다. 우리는 핫 패스를 피합니다 parseRequest. 이제 롤업이 올바르게 지연 로드됩니다.
더 이상 사용되지 않는 기능
우리는 Vite가 장기적으로 유지될 수 있도록 Vite의 API 인터페이스를 계속해서 최소화할 것입니다.
더 이상 사용되지 않는 옵션 import.meta.glob_as
표준은 (속성 가져오기)로 이동되었지만 import Attributes현재는 새 옵션으로 대체할 계획이 없습니다 as. 대신 사용자가 로 전환하는 것이 좋습니다 query.
실험적인 빌드 시간 사전 패키징을 제거했습니다.
빌드 시 사전 패키징은 Vite 3에 추가된 실험적 기능이었으며 현재는 제거되었습니다. Rollup 4가 파서를 기본으로 전환하고 Rolldown이 개발 중이므로 이 기능의 성능과 개발 및 빌드 불일치가 더 이상 작동하지 않습니다. 우리는 개발/빌드 일관성을 지속적으로 개선하기를 희망하며 "개발 시간 사전 패키징" 및 "프로덕션 빌드"에 롤다운을 사용하는 것이 더 나은 선택이라는 결론을 내렸습니다. 롤다운은 빌드 시 캐싱을 구현할 수도 있는데, 이는 사전 패키징에 의존하는 것보다 더 효율적입니다.