Dynamic import — lazy loading

~15 daq · JavaScript · Modullar

Muammodan boshlaylik

Katta ilova yozdingiz. Foydalanuvchi sahifaga kirganida — barcha JavaScript bir vaqtda yuklanadi. 500KB kod. Lekin foydalanuvchi ko'pincha faqat birinchi sahifadan foydalanadi, boshqa sahifalarni ochmasdan chiqib ketadi.

Nima muammo? Foydalanuvchi hech qachon ishlatmaydigan kodni ham yuklaydi. Sahifa sekin ochiladi.

Yechim — Dynamic import: kod kerak bo'lganda, kerak bo'lgan paytda yuklansin.

Static vs Dynamic import farqi

Static import — fayl boshida yoziladi, sahifa yuklanayotganda darhol bajariladi:

import { yordamchi } from "./yordamchi.js";
// sahifa ochilishi bilanoq yordamchi.js yuklanadi — ishlatilmasa ham

Dynamic import — funksiya kabi chaqiriladi, kerak bo'lganda yuklanadi:

const modul = await import("./yordamchi.js");
// faqat bu qator ishlaganda yuklanadi

Hayotiy o'xshatma

Restorandagi menyu. Static import — barcha taomlarni oldindan hozirlab qo'yish. Mijoz keladi, faqat 2 ta tanlaydi, lekin 20 ta taom hozir edi. Ko'p isrof.

Dynamic import — mijoz buyurtma berganida taom hozirlanadi. Faqat kerakli taom, kerakli vaqtda.

Dynamic import qanday ishlaydi?

import() — Promise qaytaradi. Modul yuklanganda resolve bo'ladi.

import("./yordamchi.js").then(function(modul) {
  modul.funksiya();
});

// yoki async/await bilan:
const modul = await import("./yordamchi.js");
modul.funksiya();

Tugma bosilganda yuklash

Katta editor faqat foydalanuvchi "Tahrirlash" ni bossagina yuklanadi:

const tahrirlashTugma = document.getElementById("tahrirlash");

tahrirlashTugma.addEventListener("click", async function() {
  // Tugma bosildi — endi editor kerak
  const { Editor } = await import("./editor.js");

  const editor = new Editor("#matn-maydoni");
  editor.ishga_tushir();
});

Sahifa ochilayotganda editor.js yuklanmadi. Foydalanuvchi "Tahrirlash" ni bosganida — o'sha payt yuklanadi.

Shartli yuklash

Modulni faqat ma'lum sharoitda yuklash:

async function sozlash(til) {
  let tarjimalar;

  if (til === "uz") {
    tarjimalar = await import("./tarjimalar/uz.js");
  } else if (til === "ru") {
    tarjimalar = await import("./tarjimalar/ru.js");
  } else {
    tarjimalar = await import("./tarjimalar/en.js");
  }

  return tarjimalar.default;
}

Faqat kerakli til fayli yuklanadi — barcha tillar emas.

Default va Named import bilan

Dynamic import — to'liq modul ob'ektini beradi:

// yordamchi.js
export default function asosiy() { ... }
export function qo_shimcha() { ... }

const modul = await import("./yordamchi.js");

modul.default();      // ← default export
modul.qo_shimcha();   // ← named export

Yoki destructuring bilan:

const { default: asosiy, qo_shimcha } = await import("./yordamchi.js");

asosiy();
qo_shimcha();

Vite va bundlerlar bilan

Vite yoki Webpack ishlatayotganda — dynamic import avtomatik "chunk" ga bo'linadi. Har chunk alohida fayl — faqat kerak bo'lganda yuklanadi.

// Vite da:
const { YirikKomponent } = await import("./YirikKomponent.js");
// Vite bu faylni alohida chunk qiladi — asosiy bundle dan ajratadi

Bu — code splitting. Asosiy bundle kichik, qo'shimcha kod keyinroq yuklanadi.

Tez-tez uchraydigan xatolar

Dynamic import ni sinxron ishlatishga urinish:

import() Promise qaytaradi — await yoki .then() kerak.

// ❌ — modul o'rniga Promise keladi
const modul = import("./fayl.js");
modul.funksiya(); // ❌ TypeError — modul hali tayyor emas

// ✅
const modul = await import("./fayl.js");
modul.funksiya(); // ✅

Xatoni ushlaslik:

Modul fayli topilmasa yoki yuklash muammosi bo'lsa — Promise reject bo'ladi.

// ❌ — xato ushlashsiz
const modul = await import("./mavjud_emas.js"); // xato yo'qoladi

// ✅
try {
  const modul = await import("./mavjud_emas.js");
  modul.default();
} catch (xato) {
  console.error("Modul yuklanmadi:", xato.message);
}

Xulosa

Dynamic import — import() funksiyasi, Promise qaytaradi. Modul kerak bo'lganda yuklanadi — sahifa ochilayotganda emas.

Qachon kerak: katta kutubxona (editor, chart, PDF), faqat ma'lum foydalanuvchilarga kerak funksiya, turli shartlarda turli modullar.

Static import — doimiy kerak narsalar uchun. Dynamic import — vaqti-vaqtida kerak bo'lgan og'ir narsalar uchun.

Keyingi dars

56-dars: CommonJS — require, module.exports