Vite — build va optimize qilish

~15 daq · JavaScript · Vanilla JS + Vite

Muammodan boshlaylik

Ilova tayyor. npm run build:

dist/assets/index-4f8a1c.js   842.31 kB │ gzip: 268.10 kB

(!) Some chunks are larger than 500 kB after minification.

842 KB JavaScript — sekin internetda bir necha soniya yuklanish. Foydalanuvchi bosh sahifani ochishi uchun admin paneli, grafik kutubxonasi va hamma narsa yuklanyapti.

vite build nima qiladi

npm run build

dist/
├── index.html
├── assets/
│   ├── index-4f8a1c.js
│   ├── index-b2e9d0.css
│   └── logo-a1b2c3.png
└── favicon.ico

1. index.html dan boshlab barcha import larni yig'adi
2. Kodni birlashtiradi (bundle)
3. Tree shaking — ishlatilmagan export larni olib tashlaydi
4. Minify — probellar, izohlar, uzun nomlar yo'qotiladi
5. Fayl nomlariga hash qo'shadi
6. public/ ni nusxalaydi

Tekshirish:

npm run preview    # http://localhost:4173

Tree shaking

// utils.js
export const qosh = (a, b) => a + b;
export const ayir = (a, b) => a - b;
export const ogirHisob = () => { /* 500 qator */ };

// main.js
import { qosh } from './utils.js';

Build da faqat qosh qoladi. Lekin bu faqat ES modullar bilan ishlaydi:

// ❌ butun kutubxona keladi (~70 KB)
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ faqat kerakli funksiya
import { debounce } from 'lodash-es';

Code splitting — dinamik import

// ❌ grafik kutubxona har doim yuklanadi
import { Chart } from 'chart.js/auto';

// ✅ faqat kerak bo'lganda
tugma.addEventListener('click', async () => {
  const { Chart } = await import('chart.js/auto');
  new Chart(canvas, sozlamalar);
});

import() uchun Vite alohida fayl (chunk) yaratadi. Bosh sahifa yengil, grafik — faqat tugma bosilganda.

Sahifalar bo'yicha (78-dars router bilan):

const sahifalar = {
  '/': () => import('./pages/bosh.js'),
  '/hisobot': () => import('./pages/hisobot.js'),
  '/admin': () => import('./pages/admin.js'),
};

Bundle tahlili

npm install -D rollup-plugin-visualizer

// vite.config.js
import { defineConfig } from 'vite';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [visualizer({ open: true, gzipSize: true })],
});

Build dan keyin stats.html ochiladi — har bir kutubxona qancha joy egallashi to'rtburchaklar ko'rinishida. Ko'pincha 1–2 ta katta kutubxona (moment.js, butun lodash, ikonka to'plami) asosiy aybdor bo'lib chiqadi.

Build sozlamalari

export default defineConfig({
  build: {
    target: 'es2020',
    sourcemap: true,
    chunkSizeWarningLimit: 600,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['dayjs', 'axios'],
        },
      },
    },
  },
});

[!WARNING] sourcemap: true bilan asl kodingiz hamma uchun ochiq bo'ladi. Agar bu muammo bo'lsa, 'hidden' ishlating — source map yaratiladi, lekin JS faylda unga havola bo'lmaydi; uni faqat xato monitoringi xizmatiga (Sentry) yuklang.

base — subpapkaga deploy

Sayt https://user.github.io/vazifalar/ manzilida bo'lsa:

export default defineConfig({
  base: '/vazifalar/',
});

Barcha yo'llar /vazifalar/assets/... ko'rinishida bo'ladi.

Tekshiruv ro'yxati

• npm run build ogohlantirishlarsiz
• npm run preview da hamma sahifa ishlaydi
• Katta kutubxonalar — dinamik import yoki yengilroq muqobil
• Rasmlar siqilgan (WebP/AVIF)
• console.log lar import.meta.env.DEV ichida
• Lighthouse → Performance

[!TIP] build.minify standart holatda esbuild (yoki yangi versiyalarda oxc) — juda tez. terser biroz kichikroq natija beradi, lekin ancha sekin; ko'pincha farq sezilmaydi.

Nima uchun shunday?

Nima uchun bitta katta faylni bir nechta kichikka bo'lish tezroq?

Chunki foydalanuvchi bir vaqtda ilovaning faqat bir qismini ishlatadi. Bosh sahifani ochgan odamga admin paneli kodi kerak emas — uni yuklash, parse qilish va bajarish vaqtni behuda sarflaydi, ayniqsa sust telefonlarda. Bo'lingan kodda boshlang'ich yuklanish kichik, qolgan qismlar esa kerak bo'lganda keladi. Kesh ham samaraliroq ishlaydi: kutubxonalar alohida faylda bo'lsa, siz o'z kodingizni yangilaganingizda foydalanuvchi ularni qayta yuklamaydi — o'zgarmagan fayl nomi o'zgarmagan.

Xulosa

Eslab qoling:

• vite build → dist/: bundle, tree shaking, minify, hash; vite preview bilan tekshiring
• Tree shaking faqat ES modullar bilan — lodash-es, nomlangan import lar
• import() — alohida chunk, kerak bo'lganda yuklanadi
• rollup-plugin-visualizer — bundle tarkibini ko'rish
• manualChunks — kutubxonalarni alohida; sourcemap: 'hidden'
• base — subpapkaga deploy uchun

Keyingi dars

77-dars: Vanilla JS + Vite — real loyiha — SPA yaratish