Menggunakan Kebergantungan Dikongsi
Kuasai cara berkongsi pustaka umum dan kebergantungan dengan cekap antara aplikasi bersekutu.
Menggunakan Kebergantungan Dikongsi ialah pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.
Mengapa Berkongsi Kebergantungan?
Dalam Mikro Frontend, bahagian aplikasi yang berbeza mungkin menggunakan pustaka yang sama seperti React, Vue atau Lodash. Tanpa pengurusan yang teliti, setiap Mikro Frontend mungkin menggabungkan salinan pustaka itu sendiri.
Ini bermakna pengguna akan memuat turun kod yang sama beberapa kali, lalu meningkatkan masa pemuatan dan membazirkan lebar jalur. Perkongsian kebergantungan menyelesaikan masalah ini!
Masalah: Himpunan Pendua
Bayangkan aplikasi utama 'Hos' anda menggunakan React dan Mikro Frontend 'Jauh' juga menggunakan React. Jika kedua-duanya menggabungkan React secara berasingan, pelayar pengguna akhirnya memuat turun React sebanyak dua kali.
- Himpunan Hos: Mengandungi React
- Himpunan Jauh: Mengandungi React (sekali lagi!)
Hal ini menyebabkan saiz keseluruhan aplikasi menjadi lebih besar dan prestasi lebih perlahan.
Penyelesaian Module Federation
Module Federation Webpack menawarkan penyelesaian yang berkuasa: konfigurasi shared. Konfigurasi ini membolehkan anda mengisytiharkan pustaka umum yang patut dikongsi merentas aplikasi bersekutu.
Module Federation kemudiannya memastikan pustaka ini dimuatkan sekali sahaja, walaupun beberapa Mikro Frontend bergantung padanya.
Mengkonfigurasi `shared`
Anda mentakrifkan kebergantungan dikongsi dalam ModuleFederationPlugin dalam fail webpack.config.js anda. Sifat shared ialah objek yang setiap kuncinya merupakan nama modul yang ingin anda kongsikan.
Berikut ialah gambaran asas strukturnya:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Berkongsi dengan `requiredVersion`
Pilihan requiredVersion penting untuk keserasian. Pilihan ini menentukan julat versi yang boleh diterima bagi kebergantungan dikongsi menggunakan pemversian semantik (contohnya, ^18.0.0).
Module Federation akan cuba menggunakan versi serasi yang telah dimuatkan; jika tiada versi sedemikian atau versi itu tidak serasi, versi baharu akan dimuatkan.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}Penjelasan Sifat `eager`
Biasanya, modul dikongsi dimuatkan secara tak segerak apabila diperlukan. Namun, kadangkala modul dikongsi diperlukan serta-merta semasa permulaan, sebelum sebarang modul jauh diminta.
Untuk keadaan sedemikian, anda boleh menggunakan pilihan eager: true. Berhati-hatilah kerana pilihan ini boleh menjejaskan prestasi pemuatan awal dengan memaksa modul dimuatkan terlebih dahulu.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}Konfigurasi `shared` Hos & Jauh
Aplikasi hos dan aplikasi jauh anda biasanya harus mentakrifkan pustaka umum yang sama sebagai shared. Ini memberitahu Module Federation bahawa kebergantungan tersebut tergolong dalam kumpulan dikongsi.
Module Federation kemudiannya mengatur aplikasi yang akan memuatkan kebergantungan itu dan menyediakannya kepada aplikasi lain, sekali gus memastikan hanya satu salinan wujud dalam pelayar.
Penggunaan Praktikal Kebergantungan Dikongsi
Apabila react dan react-dom dikonfigurasikan sebagai dikongsi, kod aplikasi anda boleh mengimportnya seperti biasa. Module Federation mengendalikan logik asas untuk memastikan kedua-duanya dimuatkan dengan cekap dan hanya sekali.
Titik masuk React minimum ini menunjukkan cara import standard memanfaatkan kebergantungan dikongsi:
import React from 'react';
import ReactDOM from 'react-dom/client';
// This is a minimal React app entry point.
// If 'react' and 'react-dom' are shared in Module Federation,
// these imports will efficiently use a single instance.
function App() {
return (
<div>
<h1>Shared Dependencies Demo</h1>
<p>This app uses React, which can be shared!</p>
</div>
);
}
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} else {
console.error("Root element not found!");
}Manfaat Berkongsi Pustaka
- Saiz Himpunan Lebih Kecil: Menghalang pustaka umum daripada diduplikasi merentas Mikro Frontend yang berbeza, sekali gus mengurangkan jumlah keseluruhan kod yang dimuat turun oleh pengguna.
- Prestasi Lebih Baik: Kurang kod untuk dimuat turun, dihuraikan dan dilaksanakan bermakna masa pemuatan halaman awal lebih pantas serta pengalaman pengguna yang lebih responsif.
- Versi Konsisten: Membantu memastikan semua bahagian aplikasi bersekutu anda menggunakan versi pustaka yang sama, lalu mengurangkan kemungkinan konflik dan tingkah laku yang tidak dijangka.
Semakan Kebergantungan Dikongsi
Konfigurasi shared Module Federation penting untuk Mikro Frontend yang cekap. Pilihan manakah yang menerangkan manfaat utama penggunaan kebergantungan shared dengan betul?
Imbas Kembali & Langkah Seterusnya
Kita telah mempelajari bahawa konfigurasi shared Module Federation penting untuk mengoptimumkan Mikro Frontend. Dengan mentakrifkan pustaka umum sebagai shared, anda menghalangnya daripada digabungkan berulang kali.
Hal ini menghasilkan masa pemuatan awal yang lebih singkat, prestasi yang lebih baik dan versi kebergantungan yang lebih konsisten merentas aplikasi bersekutu anda.
Seterusnya, kita akan mendalami pengurusan Modul Tunggal & Pemversian untuk memastikan pengendalian kebergantungan dikongsi yang kukuh.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 12
- Pelajaran
- 48
Soalan Lazim
Adakah pelajaran “Menggunakan Kebergantungan Dikongsi” percuma?
Ya — teks penuh “Menggunakan Kebergantungan Dikongsi” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation, tingkat taraf kepada CoddyKit PRO. Kursus Seni Bina Mikrobahagian Hadapan dengan Module Federation merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Menggunakan Kebergantungan Dikongsi”?
Kuasai cara berkongsi pustaka umum dan kebergantungan dengan cekap antara aplikasi bersekutu. Anda berlatih Seni Bina Mikrobahagian Hadapan dengan Module Federation menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Seni Bina Mikrobahagian Hadapan dengan Module Federation?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Menggunakan Kebergantungan Dikongsi” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation ini?
Ya. Setiap pelajaran Seni Bina Mikrobahagian Hadapan dengan Module Federation menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Menggunakan Kebergantungan Dikongsi
- Modul Singleton dan Pengurusan Versi
- Pemuatan Modul Dinamik
- Berkongsi Keadaan dan Utiliti Merentas Aplikasi Jauh