JavaScript-da Dinamik Import

Dinamik Import — bu JavaScript modullarini dastur ishga tushgan vaqtda (runtime) emas, balki aynan kerak bo'lgan paytda yuklash usulidir.

Sintaksis

Dinamik import funksiya ko'rinishida chaqiriladi va Promise qaytaradi:

import(module_path)

Nima uchun Dinamik Import kerak?

Odotdagi (statik) importlar faylning eng yuqori qismida yozilishi shart va ular sahifa ochilishi bilan yuklanadi. Dinamik import esa quyidagi afzalliklarni beradi:

Lazy Loading: Kodni faqat kerak bo'lganda (masalan, tugma bosilganda) yuklash.
Ishlash tezligi: Sahifaning birinchi yuklanish hajmini kamaytiradi.
Shartli yuklash: Ma'lum bir shart bajarilgandagina modulni yuklash.

Qanday ishlatiladi?

Dinamik import Promise qaytargani uchun biz odatda async/awaitdan foydalanamiz.

Misol:

async function loadMath() {
  const math = await import('./math.js')
  console.log(math.add(2, 3))
}

loadMath()

Statik vs Dinamik

Xususiyat	Statik Import (`import ...`)	Dinamik Import (`import()`)
Qayerda yoziladi?	Faylning tepasida	Istalgan joyda (shartlar ichida ham)
Qachon yuklanadi?	Sahifa ochilganda	Chaqirilgan vaqtda
Natija	To'g'ridan-to'g'ri o'zgaruvchi	Promise

Amaliy misol: Tugma bosilganda yuklash

Tasavvur qiling, sizda sahifani PDF-ga o'giradigan katta kutubxona bor. Uni hamma foydalanuvchilar ishlatavermaydi, shuning uchun uni faqat tugma bosilganda yuklash to'g'riroq bo'ladi:

const btn = document.getElementById('download-btn')

btn.onclick = async () => {
  const pdfModule = await import('./pdf-generator.js')
  pdfModule.generate()
}

Muhim eslatma

Dinamik import ES2020 standartida kiritilgan bo'lib, barcha zamonaviy brauzerlarda ishlaydi. Uni ishlatish uchun brauzeringiz ES modul tizimini qo'llab-quvvatlashi kerak.

JavaScript-da Dinamik Import ​

Nima uchun Dinamik Import kerak? ​

Qanday ishlatiladi? ​

Misol: ​