Vite I: nega tez va loyiha yaratish — npm create vite, dev server, HMR va preview

Qisqacha: Vite — dev server va build vositasi. Dev rejimda u loyihani oldindan yig'maydi: brauzer qaysi modulni so'rasa, faqat o'shani o'sha zahoti o'giradi (brauzer ESM'ni o'zi tushunadi). Shuning uchun katta loyihada ham server ~0.2 soniyada ishga tushadi. node_modules dagi paketlarni esa bir marta oldindan yig'adi (pre-bundling) — yuzlab fayl o'rniga bitta so'rov. Fayl saqlanganda HMR faqat o'zgargan modulni almashtiradi. Yangi loyiha — npm create vite@latest, build natijasini tekshirish — vite preview. vazifalar ga bugun npm run dev va npm run preview qo'shiladi.

Bu darsda

• npm create vite bilan loyiha yaratasiz va shablon ichidagi har faylni o'qiysiz.
• Vite dev server nega tez ekanini o'lchovlar bilan tushuntirasiz.
• Dependency pre-bundling nima ekanini va u bo'lmasa nima bo'lishini (654 ta so'rov) ko'rasiz.
• HMR qachon modulni almashtiradi, qachon sahifani qayta yuklaydi — farqini bilasiz.
• vite preview va dev server farqini bilib, vazifalar ga ikkala skriptni qo'shasiz.

Oldin bilishingiz kerak: Bundler nima, npx va npm create, Code splitting va hash bilan keshlash, Brauzerda ESM va import maps.

1. Nega bu kerak?

16-qismning bundler blokida (20–25) Vite'ni build vositasi sifatida ishlatdik: graf, chunk, tree shaking, source map, hash. Lekin Vite'ning nomi — fransuzcha "tez" — boshqa narsadan kelgan: dasturchi kod yozayotgandagi tezlik.

Vite'dan oldingi bundlerlar (webpack) dev rejimida ham butun loyihani yig'ardi. Katta loyihada npm start dan keyin bir daqiqa kutish oddiy hol edi. Faylni saqlagach ham — yana bir necha soniya. 2020-yilda Evan You (Vue muallifi) boshqa yo'l taklif qildi: brauzerlar endi ESM'ni o'zi tushunadi — dev'da yig'ish shart emas.

Asboblar zanjiri darsida dev server'ni oldindan ko'rgan edik. Ikki va'da ham bor: npm buyruqlari darsida "Vite'ni Vite I darsida o'rnatamiz", package.json I darsida esa "shablonni o'zimiz yaratamiz" degan edik. vazifalar ga Vite Bundler nima darsida o'rnatildi. Bugun — yangi loyiha yaratish va dev server.

Hayotiy o'xshatish: ikki oshxona. Birinchisi ertalab menyudagi hamma taomni tayyorlab qo'yadi — ochilishi kech, lekin buyurtma darhol beriladi (eski bundler). Ikkinchisi tayyor masalliqlar bilan ochiladi va har taomni buyurtma kelganda pishiradi — eshik darhol ochiladi (Vite dev). Restoranga (production) esa baribir hammasi oldindan tayyorlanadi — vite build.

Maslahat: Chiqishlar 2026-10-10 da Node 24.21.0, create-vite 9.2.1 va Vite 8.3.4 bilan olingan. Shablon ^8.3.0 yozadi, shu kuni eng yangisi — 8.3.4. Brauzer o'lchovlari — Chrome 154 (headless). vazifalar qadami — kanon chiqishlari (Vite 8.3.3). ready in vaqti va portlar sizda boshqacha bo'ladi.

2. npm create vite

2.1 Loyiha yaratish

npx va npm create darsidan bilasiz: npm create vite — create-vite paketini yuklab ishga tushiradi. Terminalda interaktiv savollar beradi (nom, framework, til). Hammasini bitta qatorda ham berish mumkin:

npm create vite@9.2.1 bahor-menyu -- \
  --template vanilla-ts --no-interactive

> npx
> create-vite bahor-menyu --template vanilla-ts --no-interactive

│
◇  Scaffolding project in …\bahor-menyu...
│
└  Done. Now run:

  cd bahor-menyu
  npm install
  npm run dev

-- — "bundan keyingisi npm ga emas, create-vite ga" (scripts chuqur darsidagi argument uzatish). vanilla-ts — framework'siz TypeScript. Boshqa shablonlar (npx create-vite@9.2.1 --help ro'yxati): vanilla, vue-ts, react-ts, react-compiler-ts, preact-ts, lit-ts, svelte-ts, solid-ts, qwik-ts va ularning JavaScript variantlari.

2.2 Ichida nima bor

bahor-menyu/
├── .gitignore
├── index.html
├── package.json
├── tsconfig.json
├── public/
│   ├── favicon.svg
│   └── icons.svg
└── src/
    ├── main.ts
    ├── counter.ts
    ├── style.css
    └── assets/  hero.png, typescript.svg, vite.svg

package.json:

{
  "name": "bahor-menyu",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "~6.0.2",
    "vite": "^8.3.0"
  }
}

Tanish narsalar ko'p:

^8.3.0 ga e'tibor bering: npm install dan keyin npm ls — vite@8.3.4. 8.3.4 2026-10-08 da chiqqan. vazifalar da esa aniq "vite": "8.3.3" — loyihangiz qachon o'rnatilganiga qarab versiya "suzmaydi" (Lock-fayllar).

tsconfig.json — tsconfig darsidan tanish bayroqlar: "noEmit": true (tsc faqat tekshiradi), "moduleResolution": "bundler", "allowImportingTsExtensions": true, "verbatimModuleSyntax": true, "erasableSyntaxOnly": true — aynan vazifalar ga 15–16-qismda qo'yganlarimiz. "types": ["vite/client"] — Vite'ning qo'shimcha turlari (import.meta.env, rasm importlari) — Vite III darsida.

2.3 index.html — entry

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>bahor-menyu</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Vite'da index.html — kirish nuqtasi, va u loyiha ildizida turadi (public/ da emas). webpack'da entry JS fayl edi, HTML esa shablon sifatida keyin yasalardi. Vite'da teskari. HTML'dagi <script type="module" src="/src/main.ts"> — grafning boshlanishi (Bundler nima darsidagi graf). Esingizda bo'lsa, Skriptlarni ulash darsida "Vite HTML'ga type="module" li skriptni yozadi" degan edik — mana o'sha qator. .ts manzilni brauzer to'g'ridan-to'g'ri so'raydi — dev server uni JS qilib beradi.

2.4 React shabloni — kelajakka nazar

17-qismda react-ts shablonidan boshlaymiz. Uning package.json ida react, react-dom, @vitejs/plugin-react 6.1-bob, oxlint va "build": "tsc -b && vite build"; ildizida vite.config.ts, tsconfig.app.json, tsconfig.node.json, .oxlintrc.json. Yana bir yangilik: create-vite 9.2.1 React shablonlarida sukut bo'yicha ESLint o'rniga Oxlint (Biome va Oxlint darsida) qo'yadi — --eslint bayrog'i ESLint'ni qaytaradi. tsconfig ning app/node ga bo'linishini tsconfig: app/node darsida vazifalar ga ham qilamiz. Bugun bu fayllarni faqat taniymiz.

Tekshirib ko'ring: Nega Vite'da index.html public/ papkasida emas, ildizda?

3. Nega tez

3.1 Bir zumda ishga tushish

npm run dev

  VITE v8.3.4  ready in 187 ms

  ➜  Local:   http://localhost:5761/
  ➜  Network: use --host to expose

187 ms — va hali biror fayl o'girilmagan. Vite faqat serverni ochdi. Brauzer sahifani ochganda nima so'radi? Chrome 154 da sahifani ochib, so'rovlarni yozib oldik (puppeteer bilan; rasm va ikonlarni olib tashladik):

/  /@vite/client  /src/main.ts  /src/style.css  /src/counter.ts
/node_modules/vite/dist/client/env.mjs

Har modul — alohida so'rov, .ts nomi bilan. Brauzer main.ts ni oldi, ichidagi import './counter.ts' ni ko'rdi va uni so'radi — Vite har birini o'sha daqiqada o'girib berdi. Bu "on-demand" (talab bo'yicha) o'girish: 1000 ta modulli loyihada ham server faqat ochilgan sahifaga kerakli modullarni o'giradi.

sequenceDiagram
  participant B as Brauzer
  participant V as Vite dev
  B->>V: GET /src/main.ts
  V->>V: Oxc: faqat main.ts ni o'giradi
  V-->>B: JS (import "/src/counter.ts")
  B->>V: GET /src/counter.ts
  V-->>B: JS
  Note over V: boshqa fayllar —<br/>so'ralmaguncha tegilmaydi

Ikki sababi bor: brauzer ESM'ni o'zi tushunadi — modullarni bog'lash ishini brauzerga beramiz (Brauzerda ESM). Va Oxc tez — bitta faylni o'girish millisekundlar (Transpilyatsiya darsidagi o'lchov: 19 fayl ~3 ms).

/@vite/client — Vite'ning brauzerdagi qismi: u dev server bilan WebSocket orqali bog'lanadi va HMR'ni boshqaradi. Konsolda [vite] connecting... va [vite] connected. — uning xabarlari.

3.2 Dev va preview: so'rovlar soni

Xuddi shu sahifani build'dan keyin vite preview bilan ochdik:

Dev'da ko'p so'rov — lokal kompyuterda bu sezilmaydi (tarmoq yo'q). Production'da esa har so'rov — kutish, shuning uchun u yerda bundle. Bitta vosita — ikki strategiya.

4. Dependency pre-bundling

4.1 Muammo: yuzlab fayl

Ilova kodi bilan hammasi yaxshi. node_modules dagi paketlar bilan esa ikki muammo bor: ba'zilari CommonJS (brauzer o'qimaydi — Modul formatlari), ba'zilari esa ESM, lekin yuzlab faylga bo'lingan. Masalan, lodash-es: har funksiya — alohida fayl.

main.ts ga bitta qator qo'shdik: import { sum } from "lodash-es";. Va ikki xil o'lchadik:

exclude — "bu paketni oldindan yig'ma". Natija: brauzer lodash-es/lodash.js ni oldi, u 600 dan ortiq modulni import qiladi, ular yana boshqalarni... Sahifa ochilishi o'nlab soniyaga cho'zilishi mumkin.

4.2 Yechim: bir marta, oldindan

Sukut bo'yicha Vite birinchi ishga tushishda node_modules dan import qilingan paketlarni bitta faylga yig'adi. Dev server logida:

[vite] (client) [optimizer] bundling dependencies...

Natija node_modules/.vite/deps/ papkasida:

_metadata.json
lodash-es.js
lodash-es.js.map
package.json

Brauzer endi /node_modules/.vite/deps/lodash-es.js ni — bitta faylni — so'raydi. Pre-bundling ("oldindan yig'ish") ikki ish qiladi: CommonJS'ni ESM'ga o'giradi va ko'p faylni bittaga birlashtiradi. U faqat paketlar uchun — ular kam o'zgaradi, shuning uchun natija keshlanadi. _metadata.json dagi lockfileHash — lock-fayl o'zgarsa (yangi paket), Vite qayta yig'adi. Majburan qayta yig'ish — npx vite --force.

vazifalar da ham shunday: kanon dev sinovida web-vitals /node_modules/.vite/deps/web-vitals.js?v=9e4c595f dan keldi. ?v=… — kesh uchun versiya belgisi.

Tekshirib ko'ring: Nega Vite o'zingiz yozgan src/ kodini ham oldindan bitta faylga yig'maydi? Axir so'rovlar kamayardi.

5. HMR: issiq almashtirish

5.1 CSS — sahifa yangilanmaydi

HMR (Hot Module Replacement — modulni issiq almashtirish) — faylni saqlaganingizda o'zgargan modul sahifa qayta yuklanmasdan almashadi: forma ichidagi matn, ochiq modal, hisoblagich — joyida qoladi. Ochiq sahifada style.css ga h1 { color: #2e7d32; } qo'shdik:

20:48:06 [vite] (client) hmr update /src/style.css

Brauzer konsolida — [vite] hot updated: /src/style.css, sarlavha rangi — rgb(46, 125, 50). Sahifa qayta yuklanmadi.

5.2 TS modul — sahifa qayta yuklandi

Endi counter.ts dagi matnni o'zgartirdik (Count is → Hisob:):

20:48:07 [vite] (client) page reload src/counter.ts

Bu safar — page reload: butun sahifa qayta yuklandi va tugmada Hisob: 0. Nega? HMR modulni almashtirish uchun kimdir "men bu modulning yangi versiyasini qabul qilaman" deyishi kerak — bu HMR chegarasi (boundary). CSS uchun Vite buni o'zi biladi: eski <style> ni olib, yangisini qo'yadi. Oddiy TS modul uchun esa Vite bilmaydi: counter.ts tugmaga hodisa qo'shgan — eski hodisani kim olib tashlaydi? Xavfsiz yo'l — sahifani qayta yuklash.

Framework plaginlari bu chegarani o'zi qo'yadi. 17-qismda @vitejs/plugin-react bilan komponentni o'zgartirsangiz, sahifa yangilanmaydi va komponent holati saqlanadi (React Fast Refresh). Vanilla kodda chegarani qo'lda, import.meta.hot.accept() bilan yozish mumkin — bu kam kerak bo'ladigan ilg'or mavzu.

6. vite preview

vite preview — dist/ papkasini oddiy statik server bilan beradi. U build qilmaydi: avval npm run build kerak. Maqsadi — production natijasini lokal tekshirish: Asboblar zanjiri darsidagi "dist/index.html ni ikki marta bosib ochish — CORS xatosi" muammosining to'g'ri yechimi.

Preview — production server emas: u sarlavhalarni (Cache-Control, gzip) haqiqiy hosting kabi bermaydi. Lekin "build'dan keyin sahifa ishlaydimi?" savoliga — eng tez javob. Bundler nima darsidagi blocking="render" yo'qolishi kabi xatolarni aynan shu bosqichda ushlaysiz.

7. Ko'p uchraydigan xatolar

Oxirgisi haqida: Network: use --host to expose — "tarmoqqa ochish uchun --host". Telefondagi brauzerda sinash uchun qulay, lekin dev server xavfsizlik uchun qurilmagan — jamoat Wi-Fi'da ochmang.

8. Mashqlar

Mashqlar kurs/mashqlar/16/26-vite/ da.

1-mashq (oson): Shablonni o'qing

npm create vite@latest bilan vanilla-ts loyiha yarating va javob bering:

• Entry qaysi fayl:
• npm run build qaysi ikki buyruqni bajaradi: tsc va
• npm install dan keyin npm ls vite qaysi versiyani ko'rsatdi va nega package.json dagidan farq qiladi?

2-mashq (o'rta): HMR va reload

npm run dev ni oching, brauzerda DevTools → Console. Ketma-ket o'zgartiring va har biridan keyin konsol va terminalni yozing:

1. src/style.css — h1 rangi.
2. src/counter.ts — tugma matni.
3. Tugmani 5 marta bosing, keyin yana style.css ni o'zgartiring. Hisoblagich nechada qoldi?

3-mashq (qiyin): 40 qatorlik "mini Vite"

Vite'ning asosiy g'oyasini o'zingiz yozing: mini-dev.mjs — node:http server, .ts fayl so'ralganda uni o'sha paytda oxc-transform (0.153.0) bilan JavaScript'ga o'girib, text/javascript sarlavhasi bilan beradi. Qolgan fayllar — o'zgarishsiz. sayt/ papkasida index.html, src/main.ts, src/price.ts — brauzerda «Osh: 35000 so'm» chiqsin.

Ishoralar: startDevServer(root, port) funksiyasi serverni qaytarsin — testda port = 0 (bo'sh port) beriladi va server.address().port dan o'qiladi. transformSync(fayl, kod).code — Transpilyatsiya darsidan. .ts import yo'li bilan yozilishi kerak ("./price.ts") — brauzer aynan shu manzilni so'raydi. Testda fetch bilan (Fetch API) .ts faylni so'rab, sarlavha va turlar o'chganini tekshiring.

// mini-dev.mjs — Vite g'oyasi: faylni SO'RALGANDA o'giramiz
import { createServer } from "node:http";
import { readFile } from "node:fs/promises";
import { extname, join } from "node:path";
import { transformSync } from "oxc-transform";

const TYPES = {
  ".html": "text/html; charset=utf-8",
  ".js": "text/javascript; charset=utf-8",
  ".css": "text/css; charset=utf-8",
};

export function startDevServer(root, port = 0) {
  const server = createServer(async (req, res) => {
    const path = new URL(req.url, "http://x").pathname;
    const file = join(root, path === "/" ? "index.html" : path);
    try {
      let body = await readFile(file, "utf8");
      let type = TYPES[extname(file)] ?? "text/plain";
      if (extname(file) === ".ts") {
        // Faqat shu fayl, shu daqiqada — butun loyiha emas
        body = transformSync(file, body).code;
        type = TYPES[".js"];
      }
      res.writeHead(200, { "Content-Type": type });
      res.end(body);
    } catch {
      res.writeHead(404).end();
    }
  });
  return new Promise((resolve) => {
    server.listen(port, () => resolve(server));
  });
}

// node mini-dev.mjs sayt
if (import.meta.main) {
  const server = await startDevServer(process.argv[2] ?? ".", 5790);
  console.log(`http://localhost:${server.address().port}/`);
}

200 / text/html; charset=utf-8
200 /src/main.ts text/javascript; charset=utf-8
200 /src/price.ts text/javascript; charset=utf-8

4-mashq: Vazifalar qadami — dev va preview

• Branch: chore/dev-server
• Commit: chore: npm run dev va npm run preview

package.json dagi scripts ga ikki qator qo'shing. So'ng npm run dev ni oching: ro'yxat chizilyaptimi, konsolda CSP xatosi bormi, CSS o'zgarganda nima bo'ladi? Keyin npm run build && npm run preview.

{
  "scripts": {
    "postbuild": "node skriptlar/qobiq.js",
    "dev": "vite",
    "preview": "vite preview"
  }
}

  VITE v8.3.3  ready in 337 ms

  ➜  Local:   http://localhost:5613/
  ➜  Network: use --host to expose

  200 /@vite/client
  200 /assets/css/vazifalar.css
  200 /node_modules/.vite/deps/web-vitals.js?v=9e4c595f

git switch -c chore/dev-server
npm pkg set scripts.dev="vite" scripts.preview="vite preview"
npm run build && npm test
git add package.json
git commit -m "chore: npm run dev va npm run preview"
git push -u origin chore/dev-server
gh pr create --fill
gh pr merge --merge

9. Real ishda

• Vite — 2026-yilda frontend loyihalarning eng keng tarqalgan vositasi: React (17-qism), Vue, Svelte shablonlari, Vitest (testlash, 22-qism), Storybook — hammasi Vite ustida. Next.js o'z vositasi (Turbopack) bilan ishlaydi — Bundlerlar landshafti darsida solishtiramiz.
• Ishdagi birinchi kun: npm ci, npm run dev — va vite.config.ts ni o'qish (Vite II darsida).
• Intervyu savollari: "Vite nega webpack'dan tez?", "Dependency pre-bundling nima?", "HMR qanday ishlaydi?", "vite preview production server bo'la oladimi?".

Xulosa

• npm create vite@latest <nom> -- --template <shablon> — loyiha; index.html — ildizdagi entry; skriptlar: dev, build (tsc && vite build), preview.
• Dev'da Vite yig'maydi: brauzer so'ragan modulni o'sha paytda Oxc bilan o'giradi — server ~0.2 s da ishga tushadi.
• Pre-bundling node_modules paketlarini bir marta yig'adi (node_modules/.vite/deps/): lodash-es bilan 654 o'rniga 15 so'rov; qayta yig'ish — --force.
• HMR: CSS va framework komponentlari — joyida almashadi; oddiy TS modul — page reload.
• vite preview — dist/ ni beradi, build qilmaydi; production server emas, lekin build'ni tekshirishning eng tez yo'li.

Keyingi dars: Vite II: vite.config ni o'qish va yozish — vazifalar ning vite.config.ts ini kalitma-kalit o'qiymiz va defineConfig, root, base, server, build bo'limlarini o'rganamiz.

Manbalar

• Vite: "Getting Started" (npm create vite, shablonlar), "Why Vite", "Dependency Pre-Bundling", "HMR API", "Features" — vite.dev/guide
• Vite: "Server Options" (server.port, --host, server.fs), "Preview Options" — vite.dev/config
• create-vite — github.com/vitejs/vite/tree/main/packages/create-vite
• Evan You, "Vite" e'loni (2020) — github.com/vitejs/vite (README tarixi)