❄️ Translation Batch - 2025-08-08

.vitepress/buildEnd.config.ts

@@ -14,7 +14,7 @@ export const buildEnd = async (config: SiteConfig): Promise<void> => {
     id: blogUrl,
     link: blogUrl,
     language: 'en',
-    image: 'https://vite.dev/og-image.png',
+    image: 'https://vite.dev/og-image.jpg',
     favicon: 'https://vite.dev/logo.svg',
     copyright: 'Copyright © 2019-present VoidZero Inc. & Vite Contributors',
   })

.vitepress/theme/components/AsideSponsors.vue

@@ -24,7 +24,12 @@ const sponsors = computed(() => {
     href="https://viteconf.org/?utm=vite-sidebar"
     target="_blank"
   >
-    <img width="22" height="22" src="/viteconf.svg" alt="ViteConf Logo" />
+    <img
+      width="22"
+      height="22"
+      src="../../../images/viteconf.svg"
+      alt="ViteConf Logo"
+    />
     <span>
       <p class="extra-info">Building Together</p>
       <p class="heading">ViteConf 2025</p>

.vitepress/theme/components/landing/1. hero-section/HeroDiagram.vue

@@ -470,7 +470,7 @@ onMounted(() => {
       </div>
       <div class="vite-chip__filter" />
       <img
-        :src="isUwu ? '/logo-uwu.png' : '/logo.svg'"
+        :src="isUwu ? '/logo-uwu.webp' : '/logo.svg'"
         :alt="isUwu ? 'Vite Kawaii Logo by @icarusgkx' : 'Vite Logo'"
         class="vite-chip__logo"
         :class="{ uwu: isUwu }"
@@ -715,7 +715,7 @@ onMounted(() => {
   }
 
   background:
-    url('/noise.png'),
+    url('../common/noise.webp'),
     radial-gradient(
       circle at right center,
       rgb(86, 50, 119) 0%,
@@ -732,7 +732,7 @@ onMounted(() => {
 
   @media (min-width: 1024px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -751,7 +751,7 @@ onMounted(() => {
 
   @media (min-width: 1500px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,
@@ -770,7 +770,7 @@ onMounted(() => {
 
   @media (min-width: 1800px) {
     background:
-      url('/noise.png'),
+      url('../common/noise.webp'),
       radial-gradient(
         circle at right center,
         rgba(75, 41, 105, 0.5) 0%,

.vitepress/theme/components/landing/1. hero-section/HeroSection.vue

@@ -11,7 +11,12 @@ import HeroDiagram from './HeroDiagram.vue'
         class="hero__pill"
         target="_blank"
       >
-        <img src="/viteconf.svg" alt="Viteconf logo" width="20" height="20" />
+        <img
+          src="../../../../../images/viteconf.svg"
+          alt="Viteconf logo"
+          width="20"
+          height="20"
+        />
         <span>ViteConf 2025</span>
       </a>
 
@@ -31,7 +36,7 @@ import HeroDiagram from './HeroDiagram.vue'
           class="btn btn--outline"
         >
           <img src="/github.svg" alt="GitHub logo" width="20" height="20" />
-          GitHub
+          <img src="./github.svg" alt="GitHub logo" width="20" height="20" />
         </a>
       </div>
     </div>

.vitepress/theme/components/landing/2. feature-section/FeatureInstantServerStart.vue

@@ -344,7 +344,7 @@ onUnmounted(() => {
       height: 100%;
       border-radius: 12px 0 0 12px;
       background:
-        url('/noise.png'),
+        url('../common/noise.webp'),
         radial-gradient(
           ellipse 140% 80% at 96% bottom,
           #13b351 0%,
@@ -381,7 +381,7 @@ onUnmounted(() => {
     right: 40px;
     width: 1px;
     height: calc(100% - 170px - 33px);
-    background: url('/noise.png'), #13b351;
+    background: url('../common/noise.webp'), #13b351;
     box-shadow: 0 0 10px 0 #13b351;
     transition: all 0.5s ease-in;
     will-change: transform, opacity;

.vitepress/theme/components/landing/5. sponsor-section/SponsorSection.vue

@@ -41,7 +41,7 @@ const { data } = useSponsor()
     <!-- Title Section -->
     <img
       class="icon-heart"
-      src="/heart.svg"
+      src="./heart.svg"
       alt="Vite is made possible by our contributors, partner companies, and sponsors"
       width="58"
       height="55"

.vitepress/theme/composables/sponsor.ts

@@ -1,4 +1,7 @@
 import { onMounted, onUnmounted, ref } from 'vue'
+import voidZeroSvg from './images/voidzero.svg'
+import boltSvg from './images/bolt.svg'
+import nuxtLabsSvg from './images/nuxtlabs.svg'
 
 interface Sponsors {
   special: Sponsor[]
@@ -28,7 +31,7 @@ const dataUrl = `${dataHost}/vite.json`
 export const voidZero = {
   name: 'VoidZero',
   url: 'https://voidzero.dev',
-  img: '/voidzero.svg',
+  img: voidZeroSvg,
 } satisfies Sponsor
 
 const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
@@ -37,13 +40,13 @@ const viteSponsors: Pick<Sponsors, 'special' | 'gold'> = {
     {
       name: 'Bolt',
       url: 'https://bolt.new',
-      img: '/bolt.svg',
+      img: boltSvg,
     },
     // sponsors antfu
     {
       name: 'NuxtLabs',
       url: 'https://nuxtlabs.com',
-      img: '/nuxtlabs.svg',
+      img: nuxtLabsSvg,
     },
   ],
   gold: [

blog/announcing-vite3.md

@@ -13,7 +13,7 @@ head:
       content: Vite 3.0이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite3.png
+      content: https://vite.dev/og-image-announcing-vite3.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite3
@@ -31,7 +31,7 @@ _2022년 7월 23일_ - [Vite 4.0 발표](./announcing-vite4.md)도 확인해보
 
 작년 2월, [Evan You](https://twitter.com/youyuxi)가 Vite 2를 릴리스했습니다. 그 이후로 Vite의 채택은 멈추지 않고 성장하여 주당 100만 건 이상의 npm 다운로드를 기록하고 있습니다. 릴리스 후 방대한 생태계가 빠르게 형성되었습니다. Vite는 웹 프레임워크에서 새로운 혁신 경쟁을 이끌고 있습니다. [Nuxt 3](https://v3.nuxtjs.org/)는 기본적으로 Vite를 사용합니다. [SvelteKit](https://kit.svelte.dev/), [Astro](https://astro.build/), [Hydrogen](https://hydrogen.shopify.dev/), [SolidStart](https://docs.solidjs.com/quick-start)는 모두 Vite로 구축되었습니다. [Laravel은 이제 기본적으로 Vite를 사용하기로 결정했습니다](https://laravel.com/docs/9.x/vite). [Vite Ruby](https://vite-ruby.netlify.app/)는 Vite가 Rails DX를 어떻게 개선할 수 있는지 보여줍니다. [Vitest](https://vitest.dev)는 Jest의 Vite 네이티브 대안으로 진전을 이루고 있습니다. Vite는 [Cypress](https://docs.cypress.io/guides/component-testing/writing-your-first-component-test)와 [Playwright](https://playwright.dev/docs/test-components)의 새로운 컴포넌트 테스팅 기능을 뒷받침하고 있으며, Storybook은 [Vite를 공식 빌더로](https://github.com/storybookjs/builder-vite) 채택했습니다. 그리고 [목록은 계속됩니다](https://patak.dev/vite/ecosystem.html). 이러한 프로젝트 대부분의 메인테이너들이 Vite 코어 자체를 개선하는 데 참여하여 Vite [팀](https://vite.dev/team) 및 다른 기여자들과 긴밀히 협력하고 있습니다.
 
-![Vite 3 발표 커버 이미지](/og-image-announcing-vite3.png)
+![Vite 3 Announcement Cover Image](/og-image-announcing-vite3.webp)
 
 오늘, v2 출시로부터 16개월 후 Vite 3의 릴리스를 발표하게 되어 기쁩니다. 저희는 [Node.js의 EOL](https://nodejs.org/en/about/releases/)에 맞춰 최소 매년 새로운 Vite 메이저 버전을 릴리스하기로 결정했으며, 생태계 프로젝트들을 위한 간단한 마이그레이션 가이드와 함께 Vite의 API를 정기적으로 검토할 기회를 갖기로 했습니다.
 
@@ -47,7 +47,7 @@ Vite를 처음 접하신다면 [Why Vite 가이드](https://vite.dev/guide/why.h
 
 [vite.dev](https://vite.dev)로 이동하여 새로운 v3 문서를 즐겨보세요. Vite는 이제 새로운 [VitePress](https://vitepress.vuejs.org) 기본 테마를 사용하며, 다른 기능들과 함께 멋진 다크 모드를 제공합니다.
 
-[![Vite 문서 첫 페이지](../images/v3-docs.png)](https://vite.dev)
+[![Vite documentation frontpage](../images/v3-docs.webp)](https://vite.dev)
 
 생태계의 여러 프로젝트들이 이미 이 테마로 마이그레이션했습니다([Vitest](https://vitest.dev), [vite-plugin-pwa](https://vite-plugin-pwa.netlify.app/), [VitePress](https://vitepress.vuejs.org/) 자체 포함).
 
@@ -223,9 +223,9 @@ Vite는 배포 및 설치 용량을 중요하게 생각합니다. 새 앱의 빠
 
 최근 Vite 팀에 합류한 [@bluwyoo](https://twitter.com/bluwyoo), [@sapphi_red](https://twitter.com/sapphi_red)가 주도한 트리아징 마라톤이 있었습니다. 지난 3개월 동안 Vite 열린 이슈는 770개에서 400개로 줄었습니다. 그리고 이 감소는 새로 열린 PR이 역대 최고치를 기록하는 동안 달성되었습니다. 동시에 [@haoqunjiang](https://twitter.com/haoqunjiang)도 [Vite 이슈의 포괄적인 개요](https://github.com/vitejs/vite/discussions/8232)를 큐레이션했습니다.
 
-[![Vite의 열린 이슈와 풀 리퀘스트 그래프](../images/v3-open-issues-and-PRs.png)](https://www.repotrends.com/vitejs/vite)
+[![Graph of open issues and pull requests in Vite](../images/v3-open-issues-and-PRs.webp)](https://www.repotrends.com/vitejs/vite)
 
-[![Vite의 새로운 이슈와 풀 리퀘스트 그래프](../images/v3-new-open-issues-and-PRs.png)](https://www.repotrends.com/vitejs/vite)
+[![Graph of new issues and pull requests in Vite](../images/v3-new-open-issues-and-PRs.webp)](https://www.repotrends.com/vitejs/vite)
 
 ## 호환성 참고사항 {#compatibility-notes}
 

blog/announcing-vite4-3.md

@@ -13,7 +13,7 @@ head:
       content: Vite 4.3이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite4-3.png
+      content: https://vite.dev/og-image-announcing-vite4-3.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite4-3
@@ -29,7 +29,7 @@ head:
 
 _2023년 4월 20일_
 
-![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.png)
+![Vite 4.3 Announcement Cover Image](/og-image-announcing-vite4-3.webp)
 
 빠른 링크:
 
@@ -60,9 +60,9 @@ Vite 기여자 중 한 명이 작성한 이 블로그 포스트에서 성능 작
 | **Root HMR**       |    30.5ms |   24.0ms |      -21.3% |
 | **Leaf HMR**       |    16.9ms |   10.0ms |      -40.8% |
 
-![Vite 4.3 vs 4.2 startup time comparison](/vite4-3-startup-time.png)
+![Vite 4.3 vs 4.2 startup time comparison](../images/vite4-3-startup-time.webp)
 
-![Vite 4.3 vs 4.2 HMR time comparison](/vite4-3-hmr-time.png)
+![Vite 4.3 vs 4.2 HMR time comparison](../images/vite4-3-hmr-time.webp)
 
 벤치마크에 대한 자세한 정보는 [여기](https://gist.github.com/sapphi-red/25be97327ee64a3c1dce793444afdf6e)에서 확인할 수 있습니다. 이 성능 테스트의 사양과 버전:
 

blog/announcing-vite4.md

@@ -13,7 +13,7 @@ head:
       content: Vite 4.0이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite4.png
+      content: https://vite.dev/og-image-announcing-vite4.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite4
@@ -31,13 +31,13 @@ _2022년 12월 9일_ - [Vite 5.0 발표](./announcing-vite5.md)도 확인해보
 
 Vite 3가 5개월 전에 [릴리스되었습니다](./announcing-vite3.md). 그 이후로 주간 npm 다운로드 수가 100만 건에서 250만 건으로 증가했습니다. 생태계도 성숙해졌으며 계속해서 성장하고 있습니다. 올해 [Jamstack Conf 설문조사](https://twitter.com/vite_js/status/1589665610119585793)에서 커뮤니티 사용률이 14%에서 32%로 급증했으며 9.7점의 높은 만족도를 유지했습니다. [Astro 1.0](https://astro.build/), [Nuxt 3](https://v3.nuxtjs.org/), 그리고 혁신하고 협력하는 다른 Vite 기반 프레임워크들의 안정적인 릴리스를 보았습니다: [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/). Storybook은 [Storybook 7.0](https://storybook.js.org/blog/first-class-vite-support-in-storybook/)의 주요 기능 중 하나로 Vite에 대한 일급 지원을 발표했습니다. Deno도 이제 [Vite를 지원합니다](https://www.youtube.com/watch?v=Zjojo9wdvmY). [Vitest](https://vitest.dev) 채택이 폭발적으로 증가하고 있으며, 곧 Vite npm 다운로드의 절반을 차지할 것입니다. Nx도 생태계에 투자하고 있으며 [공식적으로 Vite를 지원합니다](https://nx.dev/packages/vite).
 
-[![Vite 4 생태계](/ecosystem-vite4.png)](https://viteconf.org/2022/replay)
+[![Vite 4 Ecosystem](../images/ecosystem-vite4.webp)](https://viteconf.org/2022/replay)
 
 Vite와 관련 프로젝트들이 경험한 성장을 보여주는 사례로, Vite 생태계는 10월 11일 [ViteConf 2022](https://viteconf.org/2022/replay)에서 모였습니다. 주요 웹 프레임워크와 도구들의 대표자들이 혁신과 협력의 이야기를 들려주었습니다. 그리고 상징적인 움직임으로, Rollup 팀은 바로 그 날 [Rollup 3](https://rollupjs.org) 릴리스를 선택했습니다.
 
 오늘, Vite [팀](https://vite.dev/team)은 생태계 파트너들의 도움으로 빌드 시점에 Rollup 3로 구동되는 Vite 4의 릴리스를 발표하게 되어 기쁩니다. 저희는 이 새로운 메이저 버전을 위한 원활한 업그레이드 경로를 보장하기 위해 생태계와 함께 작업했습니다. Vite는 이제 [Rollup 3](https://github.com/vitejs/vite/issues/9870)를 사용하며, 이를 통해 Vite의 내부 에셋 처리를 단순화하고 많은 개선사항을 가져올 수 있었습니다. [Rollup 3 릴리스 노트는 여기에서](https://github.com/rollup/rollup/releases/tag/v3.0.0) 확인하세요.
 
-![Vite 4 발표 커버 이미지](/og-image-announcing-vite4.png)
+![Vite 4 Announcement Cover Image](/og-image-announcing-vite4.webp)
 
 빠른 링크:
 

blog/announcing-vite5-1.md

@@ -13,7 +13,7 @@ head:
       content: Vite 5.1이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite5-1.png
+      content: https://vite.dev/og-image-announcing-vite5-1.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite5-1
@@ -29,7 +29,7 @@ head:
 
 _2024년 2월 8일_
 
-![Vite 5.1 발표 커버 이미지](/og-image-announcing-vite5-1.png)
+![Vite 5.1 Announcement Cover Image](/og-image-announcing-vite5-1.webp)
 
 Vite 5는 지난 11월에 [출시되었으며](./announcing-vite5.md), Vite와 생태계에 또 다른 큰 도약을 의미했습니다. 몇 주 전에는 주간 npm 다운로드 1천만 건과 Vite 저장소 기여자 900명을 축하했습니다. 오늘, 저희는 Vite 5.1의 출시를 발표하게 되어 기쁩니다.
 
@@ -86,7 +86,7 @@ Vite 5.0에서는 순환 import 내의 수락된 모듈이 클라이언트에서
 
 Vite는 각 릴리스마다 계속 빨라지고 있으며, Vite 5.1은 성능 개선으로 가득합니다. 저희는 [vite-dev-server-perf](https://github.com/yyx990803/vite-dev-server-perf)를 사용하여 Vite 4.0부터 모든 마이너 버전에 대해 10K 모듈(25단계 깊이 트리)의 로딩 시간을 측정했습니다. 이는 Vite의 번들 없는 접근 방식의 효과를 측정하는 좋은 벤치마크입니다. 각 모듈은 카운터와 트리의 다른 파일에 대한 import를 가진 작은 TypeScript 파일이므로, 이는 주로 개별 모듈로 요청을 처리하는 데 걸리는 시간을 측정합니다. Vite 4.0에서는 10K 모듈을 로드하는 데 M1 MAX에서 8초가 걸렸습니다. [성능에 집중한 Vite 4.3에서 획기적인 발전](./announcing-vite4-3.md)이 있었고, 6.35초에 로드할 수 있었습니다. Vite 5.1에서는 또 다른 성능 도약을 이뤄냈습니다. Vite는 이제 10K 모듈을 5.35초에 서빙합니다.
 
-![Vite 10K 모듈 로딩 시간 진행 상황](/vite5-1-10K-modules-loading-time.png)
+![Vite 10K Modules Loading time progression](../images/vite5-1-10K-modules-loading-time.webp)
 
 이 벤치마크의 결과는 Headless Puppeteer에서 실행되며 버전을 비교하는 좋은 방법입니다. 하지만 사용자가 경험하는 시간을 나타내지는 않습니다. Chrome의 시크릿 창에서 동일한 10K 모듈을 실행할 때의 결과는 다음과 같습니다:
 

blog/announcing-vite5.md

@@ -13,7 +13,7 @@ head:
       content: Vite 5.0이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite5.png
+      content: https://vite.dev/og-image-announcing-vite5.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite5
@@ -29,7 +29,7 @@ head:
 
 _2023년 11월 16일_
 
-![Vite 5 발표 커버 이미지](/og-image-announcing-vite5.png)
+![Vite 5 Announcement Cover Image](/og-image-announcing-vite5.webp)
 
 Vite 4가 거의 1년 전에 [릴리스되었고](./announcing-vite4.md), 생태계에 견고한 기반을 제공했습니다. 프로젝트들이 공유 인프라를 기반으로 계속 구축하면서 주간 npm 다운로드 수는 250만 건에서 750만 건으로 급증했습니다. 프레임워크들은 지속적으로 혁신을 이어갔으며, [Astro](https://astro.build/), [Nuxt](https://nuxt.com/), [SvelteKit](https://kit.svelte.dev/), [Solid Start](https://www.solidjs.com/blog/introducing-solidstart), [Qwik City](https://qwik.builder.io/qwikcity/overview/) 등을 비롯해 새로운 프레임워크들이 합류하여 생태계를 더욱 강화했습니다. [RedwoodJS](https://redwoodjs.com/)와 [Remix](https://remix.run/)가 Vite로 전환하면서 React 생태계에서의 추가 도입 가능성을 열었습니다. [Vitest](https://vitest.dev)는 Vite보다도 빠른 속도로 성장을 지속했습니다. Vitest 팀은 열심히 작업하고 있으며 곧 [Vitest 1.0을 릴리스할 예정](https://github.com/vitest-dev/vitest/issues/3596)입니다. [Storybook](https://storybook.js.org), [Nx](https://nx.dev), [Playwright](https://playwright.dev)와 같은 다른 도구들과 함께 사용할 때의 Vite 경험은 계속 개선되었고, [Deno](https://deno.com)와 [Bun](https://bun.sh)에서 Vite 개발이 작동하는 등 환경 면에서도 마찬가지였습니다.
 

blog/announcing-vite6.md

@@ -13,7 +13,7 @@ head:
       content: Vite 6.0이 출시되었습니다!
   - - meta
     - property: og:image
-      content: https://vite.dev/og-image-announcing-vite6.png
+      content: https://vite.dev/og-image-announcing-vite6.webp
   - - meta
     - property: og:url
       content: https://vite.dev/blog/announcing-vite6
@@ -29,7 +29,7 @@ head:
 
 _2024년 11월 26일_
 
-![Vite 6 발표 커버 이미지](/og-image-announcing-vite6.png)
+![Vite 6 Announcement Cover Image](/og-image-announcing-vite6.webp)
 
 오늘, 저희는 Vite의 이야기에서 또 다른 큰 발걸음을 내딛게 되었습니다. Vite [팀](/team), [기여자들](https://github.com/vitejs/vite/graphs/contributors), 그리고 생태계 파트너들은 Vite 6의 출시를 발표하게 되어 기쁩니다.
 
@@ -39,7 +39,7 @@ _2024년 11월 26일_
 
 Vite는 OpenAI, Google, Apple, Microsoft, NASA, Shopify, Cloudflare, GitLab, Reddit, Linear 등 많은 기업에서 사용되고 있습니다. 두 달 전, 저희는 [Vite를 사용하는 기업들](https://github.com/vitejs/companies-using-vite) 목록을 시작했습니다. 많은 개발자들이 자신들의 회사를 목록에 추가하기 위해 PR을 보내주시는 것을 보니 기쁩니다. Vite가 첫 걸음을 내딛은 이후 함께 구축한 생태계가 이렇게 크게 성장한 것이 믿기 어려울 정도입니다.
 
-![Vite 주간 npm 다운로드](/vite6-npm-weekly-downloads.png)
+![Vite weekly npm downloads](../images/vite6-npm-weekly-downloads.webp)
 
 ## Vite 생태계 가속화 {#speeding-up-the-vite-ecosystem}