JavaScript Module Federation: Global Ilovalar uchun Ish Vaqtidagi Kod Almashinuvi Quvvatini Ochish

Bugungi tez rivojlanayotgan raqamli dunyoda kengaytiriladigan, qo'llab-quvvatlanadigan va hamkorlikka asoslangan veb-ilovalarni yaratish juda muhim. Dasturlash jamoalari kengayib, ilovalar murakkablashgani sari, kodni samarali almashish va qismlarga ajratish zarurati tobora ortib bormoqda. Webpack 5 bilan taqdim etilgan inqilobiy xususiyat bo'lgan JavaScript Module Federation, mustaqil ravishda joylashtirilgan ilovalar o'rtasida ish vaqtida kod almashinuvini ta'minlash orqali kuchli yechim taklif etadi. Ushbu blog posti Module Federation'ning asosiy tushunchalariga, uning ish vaqtidagi almashinuv imkoniyatlariga e'tibor qaratadi va global jamoalar o'z veb-ilovalarini qanday qurishi va boshqarishini tubdan o'zgartirishi mumkinligini o'rganadi.

Veb-Dasturlashning Rivojlanayotgan Manzarasi va Almashinuvga bo'lgan Ehtiyoj

Tarixan, veb-dasturlash ko'pincha barcha kod yagona kod bazasida joylashgan monolit ilovalarni o'z ichiga olgan. Bu yondashuv kichikroq loyihalar uchun mos bo'lishi mumkin bo'lsa-da, ilovalar kengaygan sari u tezda boshqarib bo'lmaydigan holga keladi. Bog'liqliklar chalkashib ketadi, qurilish vaqtlari ortadi va yangilanishlarni joylashtirish murakkab va xavfli vazifaga aylanadi. Backend dasturlashda mikroservislarning yuksalishi frontendda ham shunga o'xshash arxitektura naqshlariga yo'l ochib, mikrofrontendlarning paydo bo'lishiga olib keldi.

Mikrofrontendlar katta, murakkab frontend ilovalarini kichikroq, mustaqil va joylashtiriladigan birliklarga ajratishni maqsad qiladi. Bu turli jamoalarga ilovaning turli qismlarida mustaqil ishlash imkonini beradi, bu esa tezroq ishlab chiqish sikllari va jamoa avtonomiyasining yaxshilanishiga olib keladi. Biroq, mikrofrontend arxitekturalarida har doim samarali kod almashinuvi muhim muammo bo'lib kelgan. Umumiy kutubxonalar, UI komponentlari yoki yordamchi funksiyalarni bir nechta mikrofrontendlar bo'ylab takrorlash quyidagilarga olib keladi:

• Paket Hajmlarining Oshishi: Har bir ilova umumiy bog'liqliklarning o'z nusxasini olib yuradi, bu esa foydalanuvchilar uchun umumiy yuklab olish hajmini oshiradi.
• Nomuvofiq Bog'liqliklar: Turli mikrofrontendlar bir xil kutubxonaning turli versiyalaridan foydalanishi mumkin, bu esa moslik muammolari va kutilmagan xatti-harakatlarga olib keladi.
• Texnik Xizmat Ko'rsatish Yuklamasi: Umumiy kodni yangilash bir nechta ilovalarda o'zgarishlarni talab qiladi, bu esa xatolar xavfini oshiradi va joylashtirishni sekinlashtiradi.
• Resurslarning Bekorga Sarflanishi: Bir xil kodni bir necha marta yuklab olish ham mijoz, ham server uchun samarasizdir.

Module Federation bu muammolarni ish vaqtida kodni haqiqatan ham almashish mexanizmini joriy etish orqali to'g'ridan-to'g'ri hal qiladi.

JavaScript Module Federation nima?

Asosan Webpack 5 orqali amalga oshiriladigan JavaScript Module Federation, bu JavaScript ilovalariga ish vaqtida boshqa ilovalardan kodni dinamik ravishda yuklash imkonini beruvchi qurilish vositasi xususiyatidir. U monorepo yoki murakkab qurilish vaqtidagi integratsiya jarayonini talab qilmasdan kod va bog'liqliklarni almasha oladigan bir nechta mustaqil ilovalar yaratish imkonini beradi.

Asosiy g'oya "remotes" (modullarni taqdim etuvchi ilovalar) va "hosts" (remotes'dan modullarni iste'mol qiluvchi ilovalar) ni aniqlashdir. Ushbu remotes va hosts mustaqil ravishda joylashtirilishi mumkin, bu esa murakkab ilovalarni boshqarishda sezilarli moslashuvchanlikni ta'minlaydi va turli xil arxitektura naqshlariga imkon beradi.

Ish Vaqtidagi Almashinuvni Tushunish: Module Federation'ning Asosi

Ish vaqtidagi almashinuv Module Federation qudratining asosidir. Ko'pincha qurilish vaqtida sodir bo'ladigan an'anaviy kodni bo'lish yoki umumiy bog'liqliklarni boshqarish usullaridan farqli o'laroq, Module Federation ilovalarga to'g'ridan-to'g'ri foydalanuvchi brauzerida boshqa ilovalardan modullarni topish va yuklash imkonini beradi. Bu shuni anglatadiki, umumiy kutubxona, umumiy UI komponentlar kutubxonasi yoki hatto funksional modul bir ilova tomonidan bir marta yuklanib, so'ngra unga muhtoj bo'lgan boshqa ilovalarga taqdim etilishi mumkin.

Keling, bu qanday ishlashini batafsil ko'rib chiqamiz:

Asosiy Tushunchalar:

• Exposes (Ochib berish): Ilova boshqa ilovalar iste'mol qilishi mumkin bo'lgan ma'lum modullarni (masalan, React komponenti, yordamchi funksiya) 'ochib berishi' mumkin. Ushbu ochilgan modullar masofadan yuklanishi mumkin bo'lgan konteynerga paketlanadi.
• Remotes: Modullarni ochib beradigan ilova 'remote' hisoblanadi. U o'z modullarini umumiy konfiguratsiya orqali ochib beradi.
• Consumes (Iste'mol qilish): Remote'dan modullardan foydalanishi kerak bo'lgan ilova 'iste'molchi' yoki 'host' hisoblanadi. U o'zini remote ilovalarni qayerdan topishni va qaysi modullarni yuklashni biladigan qilib sozlaydi.
• Shared Modules (Umumiy Modullar): Module Federation umumiy modullarni aniqlash imkonini beradi. Bir nechta ilovalar bir xil umumiy modulni iste'mol qilganda, ushbu modulning faqat bitta nusxasi yuklanadi va ular o'rtasida almashiladi. Bu paket hajmini optimallashtirish va bog'liqliklar ziddiyatlarini oldini olishning muhim jihatidir.

Mexanizm:

Host ilovasi remote'dan modulga muhtoj bo'lganda, u uni remote konteyneridan so'raydi. Keyin remote konteyneri so'ralgan modulni dinamik ravishda yuklaydi. Agar modul allaqachon boshqa iste'mol qiluvchi ilova tomonidan yuklangan bo'lsa, u almashiladi. Ushbu dinamik yuklash va almashish ish vaqtida uzluksiz sodir bo'lib, bog'liqliklarni boshqarishning yuqori samarali usulini ta'minlaydi.

Global Dasturlash uchun Module Federation'ning Afzalliklari

Global ilovalarni yaratish uchun Module Federation'ni qabul qilishning afzalliklari sezilarli va keng qamrovlidir:

1. Kengaytirilgan Masshtablilik va Qo'llab-quvvatlanuvchanlik:

Katta ilovani kichikroq, mustaqil mikrofrontendlarga ajratish orqali Module Federation o'z-o'zidan masshtablilikni rag'batlantiradi. Jamoalar boshqalarga ta'sir qilmasdan alohida mikrofrontendlarda ishlashi mumkin, bu parallel rivojlanish va mustaqil joylashtirish imkonini beradi. Bu katta kod bazasini boshqarish bilan bog'liq kognitiv yukni kamaytiradi va ilovani vaqt o'tishi bilan yanada qo'llab-quvvatlanadigan qiladi.

2. Optimallashtirilgan Paket Hajmlari va Ishlash Samaradorligi:

Ish vaqtidagi almashinuvning eng muhim afzalligi umumiy yuklab olish hajmining kamayishidir. Har bir ilova umumiy kutubxonalarni (React, Lodash yoki maxsus UI komponentlar kutubxonasi kabi) takrorlash o'rniga, bu bog'liqliklar bir marta yuklanadi va almashiladi. Bu quyidagilarga olib keladi:

• Tezroq Boshlang'ich Yuklanish Vaqtlari: Foydalanuvchilar kamroq kod yuklab oladilar, natijada ilovaning boshlang'ich renderlanishi tezroq bo'ladi.
• Keyingi Navigatsiyaning Yaxshilanishi: Umumiy bog'liqliklarga ega bo'lgan mikrofrontendlar o'rtasida harakatlanayotganda, allaqachon yuklangan modullar qayta ishlatiladi, bu esa foydalanuvchi tajribasini tezroq qiladi.
• Server Yuklamasining Kamayishi: Serverdan kamroq ma'lumot uzatiladi, bu esa hosting xarajatlarini kamaytirishi mumkin.

Mahsulotlar ro'yxati, foydalanuvchi hisoblari va to'lov uchun alohida bo'limlarga ega global elektron tijorat platformasini tasavvur qiling. Agar har bir bo'lim alohida mikrofrontend bo'lsa, lekin ularning barchasi tugmalar, formalar va navigatsiya uchun umumiy UI komponentlar kutubxonasiga tayansa, Module Federation bu kutubxonaning foydalanuvchi qaysi bo'limga birinchi kirishidan qat'i nazar, faqat bir marta yuklanishini ta'minlaydi.

3. Jamoa Avtonomiyasining va Hamkorlikning Oshishi:

Module Federation turli global mintaqalarda joylashgan turli jamoalarga o'zlarining mikrofrontendlarida mustaqil ishlash imkoniyatini beradi. Ular o'zlarining texnologiya steklarini (ma'lum darajada izchillikni saqlash uchun oqilona doirada) va joylashtirish jadvallarini tanlashlari mumkin. Bu avtonomiya tezroq innovatsiyalarga yordam beradi va aloqa yuklamasini kamaytiradi. Biroq, umumiy kodni almashish qobiliyati hamkorlikni ham rag'batlantiradi, chunki jamoalar umumiy kutubxonalar va komponentlarga hissa qo'shishi va ulardan foyda olishi mumkin.

Yevropa, Osiyo va Shimoliy Amerikada turli xil mahsulot takliflari uchun mas'ul bo'lgan alohida jamoalarga ega global moliyaviy muassasani tasavvur qiling. Module Federation har bir jamoaga o'ziga xos xususiyatlarni ishlab chiqishga imkon beradi, shu bilan birga markaziy jamoa tomonidan ishlab chiqilgan umumiy autentifikatsiya xizmati yoki umumiy diagramma kutubxonasidan foydalanadi. Bu qayta foydalanishni rag'batlantiradi va turli mahsulot yo'nalishlari bo'yicha izchillikni ta'minlaydi.

4. Texnologiyadan Mustaqillik (ba'zi shartlar bilan):

Module Federation Webpack asosida qurilgan bo'lsa-da, u turli mikrofrontendlar o'rtasida ma'lum darajada texnologik mustaqillikka imkon beradi. Bir mikrofrontend React, boshqasi Vue.js va yana biri Angular bilan qurilishi mumkin, agar ular modullarni qanday ochish va iste'mol qilish bo'yicha kelishib olsalar. Biroq, React yoki Vue kabi murakkab freymvorklarni haqiqiy ish vaqtida almashish uchun, bir nechta nusxalarning yuklanishi va ziddiyatlarga olib kelishining oldini olish uchun ushbu freymvorklarning qanday ishga tushirilishi va almashinishiga alohida e'tibor berish kerak.

Global SaaS kompaniyasi bir freymvork bilan ishlab chiqilgan asosiy platformaga ega bo'lishi va keyin turli mintaqaviy jamoalar tomonidan boshqa freymvorklar yordamida ishlab chiqilgan ixtisoslashtirilgan funksional modullarni yaratishi mumkin. Module Federation, agar umumiy bog'liqliklar ehtiyotkorlik bilan boshqarilsa, bu turli qismlarning integratsiyasini osonlashtirishi mumkin.

5. Versiyalarni Boshqarishning Osonlashuvi:

Umumiy bog'liqlikni yangilash kerak bo'lganda, faqat uni ochib beradigan remote'ni yangilash va qayta joylashtirish kerak bo'ladi. Barcha iste'mol qiluvchi ilovalar keyingi yuklanish paytida avtomatik ravishda yangi versiyani oladi. Bu butun ilova landshafti bo'ylab umumiy kodni boshqarish va yangilash jarayonini soddalashtiradi.

Module Federation'ni Amalga Oshirish: Amaliy Misollar va Strategiyalar

Keling, Module Federation'ni amalda qanday sozlash va undan foydalanishni ko'rib chiqamiz. Asosiy tushunchalarni tasvirlash uchun soddalashtirilgan Webpack konfiguratsiyalaridan foydalanamiz.

Stsenariy: UI Komponentlar Kutubxonasini Almashish

Aytaylik, bizda ikkita ilova bor: 'Mahsulotlar Katalogi' (remote) va 'Foydalanuvchi Boshqaruv Paneli' (host). Ikkalasi ham maxsus 'Umumiy UI' kutubxonasidan umumiy 'Button' komponentidan foydalanishi kerak.

1. 'Umumiy UI' Kutubxonasi (Remote):

Ushbu ilova o'zining 'Button' komponentini ochib beradi.

            
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3001/dist/', // remote xizmat ko'rsatiladigan URL
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'sharedUI',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.js', // Button komponentini ochish
      },
      shared: {
        // Umumiy bog'liqliklarni aniqlash
        react: {
          singleton: true, // React'ning faqat bitta nusxasi yuklanishini ta'minlash
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... boshqa webpack sozlamalari (babel, devServer va hokazo)
};

            

              
                Copy
              
            
          

src/components/Button.js:

            
import React from 'react';

const Button = ({ onClick, children }) => (
  
    {children}
  
);

export default Button;

            

              
                Copy
              
            
          

Ushbu sozlamada, 'Umumiy UI' o'zining Button komponentini ochib beradi va iste'mol qiluvchi ilovalar bo'ylab yagona nusxa sifatida ishlatilishini ta'minlash uchun react va react-dom ni singleton: true bilan umumiy bog'liqliklar deb e'lon qiladi.

2. 'Mahsulotlar Katalogi' Ilovasi (Remote):

Ushbu ilova ham umumiy Button komponentini iste'mol qilishi va o'zining bog'liqliklarini almashishi kerak bo'ladi.

            
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3002/dist/', // ushbu remote xizmat ko'rsatiladigan URL
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'productCatalog',
      filename: 'remoteEntry.js',
      exposes: {
        './ProductList': './src/components/ProductList.js', // ProductList'ni ochish
      },
      remotes: {
        // iste'mol qilishi kerak bo'lgan remote'ni aniqlash
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
      },
      shared: {
        // bir xil versiyaga va singleton: true'ga ega umumiy bog'liqliklar
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
  // ... boshqa webpack sozlamalari
};

            

              
                Copy
              
            
          

'Mahsulotlar Katalogi' endi o'zining ProductList komponentini ochib beradi va o'zining remote'larini e'lon qiladi, xususan 'Umumiy UI' ilovasiga ishora qiladi. U shuningdek, bir xil umumiy bog'liqliklarni e'lon qiladi.

3. 'Foydalanuvchi Boshqaruv Paneli' Ilovasi (Host):

Ushbu ilova 'Umumiy UI'dan Button komponentini va 'Mahsulotlar Katalogi'dan ProductListni iste'mol qiladi.

            
const { ModuleFederationPlugin } = require('webpack');
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://localhost:3000/dist/', // ushbu ilovaning paketlari xizmat ko'rsatiladigan URL
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'userDashboard',
      remotes: {
        // ushbu host ilovasi kerak bo'lgan remote'larni aniqlash
        sharedUI: 'sharedUI@http://localhost:3001/dist/remoteEntry.js',
        productCatalog: 'productCatalog@http://localhost:3002/dist/remoteEntry.js',
      },
      shared: {
        // remote'lar bilan mos kelishi kerak bo'lgan umumiy bog'liqliklar
        react: {
          singleton: true,
          import: 'react', // import uchun modul nomini ko'rsatish
        },
        'react-dom': {
          singleton: true,
          import: 'react-dom',
        },
      },
    }),
  ],
  // ... boshqa webpack sozlamalari
};

            

              
                Copy
              
            
          

'Foydalanuvchi Boshqaruv Paneli' uchun src/index.js:

            
import React, { Suspense } from 'react';
import ReactDOM from 'react-dom';

// Umumiy Button komponentini dinamik ravishda import qilish
const RemoteButton = React.lazy(() => import('sharedUI/Button'));

// ProductList komponentini dinamik ravishda import qilish
const RemoteProductList = React.lazy(() => import('productCatalog/ProductList'));

const App = () => {
  const handleClick = () => {
    alert('Tugma umumiy UI dan bosildi!');
  };

  return (
    

      
Foydalanuvchi Boshqaruv Paneli
      Tugma yuklanmoqda...
}>
        Meni bosing
      

      
Mahsulotlar
      Mahsulotlar yuklanmoqda...