Mikro Ön Uçlar: Module Federation
Büyük bir ön ucu, kabuk uygulamasının kullandığı ve bağımsız olarak dağıtılan uzak modüllere ayırmak için Webpack Module Federation veya Vite Federation kullanmayı öğrenin.
Mikro Ön Uçlar: Module Federation, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Mikro Ön Yüzler Nedir?
Büyük bir ön yüzü bağımsız olarak geliştirilen ve dağıtılan parçalara ayırmaktır; genellikle her ekip veya iş alanı için bir parça oluşturulur. Her parçanın kendi çatısı, deposu, dağıtım işlem hattı ve hatta teknoloji yığını olabilir. Bir kabuk uygulaması bunları çalışma zamanında birleştirir.
Mikro Ön Yüzler Neden Kullanılır?
On veya daha fazla ön yüz ekibine sahip kuruluşlar tek depo darboğazı, yavaş derleme süreleri ve çakışan sürüm takvimleriyle sınırlara ulaşır. Mikro ön yüzler, daha fazla mimari karmaşıklık karşılığında ekiplerin bağımsız olarak yayın yapmasını sağlar.
Module Federation — Temel Teknik
Webpack Modül Federasyonu (Webpack 5, ayrıca eklenti aracılığıyla Vite), bir kabuk uygulamasının bağımsız olarak dağıtılan uzak uygulamalardan çalışma zamanında kod içe aktarmasını sağlar. Uzak uygulama belirli modülleri dışa açar; kabuk uygulaması da bunları kullanır.
Uzak Uygulama Yapılandırması
Uzak uygulama, modüllerini webpack yapılandırması aracılığıyla dışa açar.
// remote app: webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
output: { publicPath: 'https://product-team.example.com/' },
plugins: [
new ModuleFederationPlugin({
name: 'productApp',
filename: 'remoteEntry.js',
exposes: {
'./ProductPage': './src/ProductPage',
'./productClient': './src/api/client'
},
shared: ['react', 'react-dom']
})
]
};Kabuk (Ana Uygulama) Yapılandırması
Kabuk uygulaması, hangi uzak uygulamalardan içe aktarım yapacağını bildirir.
// shell app: webpack.config.js
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'shell',
remotes: {
product: 'productApp@https://product-team.example.com/remoteEntry.js'
},
shared: ['react', 'react-dom']
})
]
};Uzak Modülleri İçe Aktarma
Dinamik içe aktarmayı kullanın; webpack bunu federasyon çalışma zamanı aracılığıyla çözümler.
// shell src/App.tsx
import { lazy, Suspense } from 'react';
const ProductPage = lazy(() => import('product/ProductPage'));
function App() {
return (
<Suspense fallback={<Spinner />}>
<ProductPage />
</Suspense>
);
}Vite Federasyonu
Vite, @originjs/vite-plugin-federation eklentisi aracılığıyla Modül Federasyonunu destekler; API'si benzerdir.
// vite.config.ts
import federation from '@originjs/vite-plugin-federation';
export default {
plugins: [federation({
name: 'shell',
remotes: { product: 'https://product-team.example.com/remoteEntry.js' },
shared: ['react', 'react-dom']
})]
};Paylaşılan Bağımlılıklar
React gibi kitaplıkları shared alanında listeleyerek iki kez paketlenmelerini önleyin. Federasyon çalışma zamanı, çalışma anında uyumlu en yüksek sürümü çözümler.
Bağımsız Dağıtım
Her uzak uygulamanın kendine ait bir derleme ve dağıtım işlem hattı vardır. Kabuk uygulaması bir URL'yi gösterir; yeni bir uzak uygulama gönderildiğinde değişiklik tüm tüketicilere otomatik olarak ulaşır.
Uygulamalar Arası İletişim
Doğrudan içe aktarmalarla durum paylaşmayın; olayları (CustomEvent), küçük bir ortak veri yolunu veya postMessage'ı kullanın. Bağımsızlığı korumak için sınırları net tutun.
Alternatifler: iframe'ler ve Web Bileşenleri
iframe'ler: en güçlü yalıtım, ancak gezinme ve CSS kullanımı zahmetlidir. Web Bileşenleri: tarayıcı tarafından yerel olarak desteklenir, herhangi bir çatının bağımlılığına sokmaz; ancak paylaşılan durumları sınırlıdır. Module Federation, yalıtım ile geliştirici deneyimi arasında denge kurar.
Ödünler
Kazanımlar: bağımsız dağıtımlar, teknoloji özgürlüğü, ekip özerkliği. Maliyetler: karmaşık derleme kurulumu, paylaşılan bağımlılık çakışmaları, hata ayıklaması zor çalışma zamanı hataları, artan paket karmaşıklığı. Yalnızca gerçekten büyük kuruluşlar için değerlidir.
Ne Zaman Kaçınılmalı
Tek ekipli projeler, MVP'ler, ön yüz ekibinde 100'den az çalışanı olan siteler. Karmaşıklık maliyeti gerçektir — çoğu ekip bunun yerine monorepo kullanmalıdır.
Hızlı Kontrol
Webpack Module Federation, mikro ön yüz mimarisinde neyi mümkün kılar?
Özet: Mikro Ön Yüzler
Bağımsız dağıtımlar için ön yüzü ekip veya alana göre bölün. Module Federation (webpack 5 / Vite eklentisi) — kabuk, uzaktaki modülleri çalışma zamanında içe aktarır. Uzak uygulama modülleri dışa açar; kabuk uzak uygulamaları bildirir; her ikisi de react gibi bağımlılıkları paylaşır. Uygulamalar arası iletişim için olayları kullanın. Karmaşıktır — yalnızca gerçekten büyük kuruluşlar için tercih edin.
Sıkça Sorulan Sorular
“Mikro Ön Uçlar: Module Federation” dersi ücretsiz mi?
Evet — “Mikro Ön Uçlar: Module Federation” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Mikro Ön Uçlar: Module Federation” dersinde ne öğreneceğim?
Büyük bir ön ucu, kabuk uygulamasının kullandığı ve bağımsız olarak dağıtılan uzak modüllere ayırmak için Webpack Module Federation veya Vite Federation kullanmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Mikro Ön Uçlar: Module Federation” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Atomik Tasarım: Atomlar, Moleküller ve Organizmalar
- Turborepo ile Monorepo Kurulumu
- Mikro Ön Uçlar: Module Federation
- Özellik Tabanlı Klasör Yapısı