Dinamik import

JavaScript dinamik importi

Dinamik import quyidagi sintaksisdan foydalanadi:

import(module);

Dinamik import ECMAScript 2020’da joriy etilgan

Dynamic Import - bu JavaScript modullarini dasturning boshida emas, balki ish vaqtida yuklash usulidir.

Zamonaviy dasturiy ta’minot

Zamonaviy dasturiy ta’minot importlarni alohida qismlarga (chunk) ajratadi.

Modullar faqat so‘ralganda yuklab olinadi - bu usul juda ko‘p nomlarga ega:.

Dynamic Import
Code Splitting
Lazy Loading
Shartli yuklash

Dinamik import modulli va samarali kodning eng kuchli xususiyatlaridan biridir.

Fayl boshida turishi shart bo‘lgan statik importdan farqli o‘laroq, dinamik importdan istalgan joyda — funksiyalar, shartlar, hodisa ishlovchilari va hokazolar ichida foydalanish mumkin.

Sintaksis

import("./module.js")

Argument yo‘lga hal qiluvchi string yoki ifoda bo‘lishi kerak
import’ni modul ichidagi skriptda (<script type="module">) bajarishingiz kerak

Turi	Misol	Yuklanganda
Static	`import { add } from './math.js';`	At load time
Dynamic	`const math = await import('./math.js');`	Kerak bo‘lganda

Yaxshilangan unumdorlik

Modullar asboblarga "kodni ajratish" ni amalga oshirishga ruxsat berish orqali ishlashni yaxshilashi mumkin. Bu shuni anglatadiki, foydalanuvchi brauzeri bir vaqtning o‘zida butun dastur kodini emas, balki ma’lum bir vaqtda foydalanayotgan muayyan Functionlar uchun zarur bo‘lgan JavaScript modullarini yuklashi kerak.

Modullarning o‘zi til imkoniyati bo‘lsa-da, Webpack yoki Rollup kabi bundlerlar bilan birgalikda ishlatilganda ular tree-shaking (ishlatilmagan kodni olib tashlash), kodni bo‘lish (code splitting) va minifikatsiya kabi optimallashtirishlar orqali unumdorlikni oshirishi mumkin.

Dinamik import qanday ishlaydi

Dynamic Modules use modern async/await:

Misol

async function run() {
const module = await import("./math.js");
let result = module.add(2, 3);
}
run();

O‘zingiz sinab ko‘ring »

math.js

// Export an "add" function
export function add(a, b) {
return a + b;
}

Misol tahlili

Skript ishlay boshlaydi
U run() funksiyasini e’lon qiladi va chaqiradi
run() ichida math.js’ni dinamik tarzda yuklaydi
Yuklangandan so‘ng u eksport qilingan add() funksiyasiga kirish huquqiga ega bo‘ladi.
U add(2, 3) ni chaqiradi va 5 ni oladi
Natijani ko‘rsatadi

Step	Kod	Explained
1	async function run()	await dan foydalanishi mumkin bo‘lgan funksiyani aniqlang
2	await import("./math.js")	Modul faylini faqat kerak bo‘lganda yuklash
3	module.add(2, 3)	Moduldan eksport qilingan funksiyadan foydalaning
4	run()	Jarayonni boshlang

1-qadam. await’dan foydalana oladigan funksiya e’lon qiling:

async function run() {

Bu qator run() nomli asinxron funksiyani e’lon qiladi
Async kalit so‘zi Function uning ichida await dan foydalanishi mumkinligini anglatadi
Wait kalit so‘zi Promise hal qilinmaguncha funksiyani to‘xtatib turadi
Bunday holda, Promise modulning importidir

2-qadam. Modul faylini faqat kerak bo‘lganda yuklang:

const module = await import("./math.js");

import("./math.js") dinamik importni belgilaydi
Math.js moduli talabga binoan yuklanadi
math.js eksport qilingan kontentga mos keladigan Promise-ni qaytaradi
await kalit so‘zi modul to‘liq yuklanmaguncha kutadi
Yuklangandan so‘ng, o‘zgaruvchan modul math.js dan eksport qilingan ma’lumotlarni o‘z ichiga oladi

3-qadam. Moduldan eksport qilingan funksiyadan foydalaning:

let result = module.add(2, 3);

Import qilingan moduldan eksport qilingan add() funksiyasini chaqiradi
Argument sifatida 2 va 3 sonlarini uzatadi
Funksiya ularni qo‘shadi va 5 ni qaytaradi
Natija natijada saqlanadi

4-qadam. Jarayonni boshlang — funksiyani chaqiring:

run();

U ishga tushganda:

math.js modulini dinamik tarzda yuklaydi
U modulni yuklashni tugatguncha kutadi
U modulning add() funksiyasini chaqiradi
Natijani ko‘rsatadi

Yana bir misol

Misol

async function run(x) {
  const module = await import("./temperatures.js");
  let celsius = module.toCelsius(x);
  document.getElementById("demo").textContent = celsius + " Celcius";
}
run(50);

O‘zingiz sinab ko‘ring »

temperatures.js

// Convert Fahrenheit to Celsius
export function toCelsius(farenheit) {
return (farenheit - 32) * 5 / 9;
}

// Convert Celsius to Fahrenheit
export function toFahrenheit(celsius) {
return (celsius * 9 / 5) + 32;
}

Dinamik importning asosiy imkoniyatlari

Lazy Loading - kodni faqat kerak bo‘lganda yuklang
Unumdorlikni optimallashtirish — sahifa tezroq yuklanishi uchun dastlabki yuklama hajmini kamaytirish
Shartli importlar — shartlarga qarab turli modullarni import qilish.

Shartli yuklash

if (user.isAdmin) {
const adminTools = await import("./admin-tools.js");
adminTools.init();
}

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish