Module-federation

Bir necha haftalardan beri shu mavzular ichida yuribman. Loyiha quryapman. Sizlarga ham ozgina ma’lumotlar ulashsam degandim.

Shu paytgacha loyihalar arxitekturasiga har xil talablar qo’shilib kelgan. Ulardan biri, bir loyiha ichida boshqa loyihalarni chaqirib ishlata olish, loyihalarni kichik, bir biridan mustaqil qismlarga bo’lib ishlash(Micro-frontend architecture).

Ajoyib usul. Sizda birnechta loyiha bo’lsa, uni bir joyda jamlay olasiz.
Yoki, bir juda katta loyihangizni birnechta qismlarga bo’lib, alohida jamoalarga topshirsangiz bo’ladi. Va hkz.

Avval bunday usulni “Iframe” bilan qilish moda edi.
Bitrix24 saytini ko’rgandim, shunday qilishgan ekan.

Lekin Iframe’ni o’ziga xos muommolari bor.
- SEO muommolari
- Xafvsizlik muommolari
- Data ulashish
- va hkz

Webpack shu sabab yangi alternativ usul o’ylab chiqqan. Module-federation.

Bunda dasturlar 2 turda bo’ladi. Host va remote.

Host - O’z ichida boshqa loyihalarni(remotes) chaqirib, ishlatuvchi loyiha 🏠
Remote - Boshqa bir loyihada ishlatiluvchi sub-loyiha 🛋

Bunda “remote” loyihalar o’zini ishlatish uchun Webpack sozlamalariga ega bo’ladi(remoteEntry).
Host shu faylga murojaat qilgan holda, ikkinchi loyihani kodlarini oladi. So’ng, ularni o’z loyihasi ichiga yangi “Module” sifatida yuklaydi. Bunda istasangiz “route” orqali shu loyihani ochadigan kod yozsangiz bo’ladi.

Ha, shu bilan birga “remote” loyiha yuklanishi tez bo’lishi uchun, uning ichidagi kutubxonalar “host” ichida ishlatilgan bo’lsa, Webpack bu kutubxonalarni qayta yuklamaydi. Borini ishlatadi. Bu orqali esa “singleton” ravishda istalgan modulingizni ishlatsangiz bo’ladi(Shared data uchun ajoyib usul) 👍

Qisqacha aytganda shular. Savollaringizni kommentda qoldirishingiz mumkin 💬

“To’xtaaaaa, axir biz Webpack’dan voz kechyapmizku 😡” deysizmi?
Unda keyingi postlarda “Esbuild”, “Vite” va boshqalarni ishlatuvchilar uchun qiziq ma’lumot ulashamiz inshaaAlloh.

#moduleFederation #architecture

@JoshDeveloper