Berbagi teknologi

Micro front-end: Qiankun, Wujie, single-spa, perbandingan iframe

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Ikhtisar kerangka mikro front-end

Kerangka kerja mikro-front-end adalah solusi teknis yang dirancang untuk membagi aplikasi front-end besar menjadi beberapa aplikasi mikro-front-end yang kecil, independen, dan dapat dipelihara. Setiap aplikasi mikro-front-end dapat dikembangkan, diuji, diterapkan, dan dijalankan secara mandiri sambil mempertahankan kolaborasi dan pengalaman pengguna secara keseluruhan.Arsitektur ini mirip dengan arsitektur layanan mikro, tetapi berfokus pada area front-end

2. Kerangka kerja mikro front-end yang umum

  1. qiankun : Dikembangkan dan dikelola oleh Ant Financial, berdasarkan Single-SPA, menyediakan fitur akses sederhana dan tidak bergantung pada tumpukan teknologi. Ini mendukung berbagai kerangka kerja front-end seperti Vue dan React, dan memiliki biaya transformasi yang rendah serta pengalaman pengembangan yang ramah.
  2. spa tunggal : Ini adalah kerangka perutean front-end JavaScript yang ringan, dengan fokus pada manajemen perutean aplikasi satu halaman (SPA). Meskipun ini bukan kerangka kerja mikro-frontend yang lengkap, ini adalah dasar bagi banyak implementasi mikro-frontend.
  3. bingkai foto: Meskipun iframe sendiri bukan merupakan kerangka mikro front-end, namun sering kali digunakan sebagai implementasi sederhana dari mikro front-end
  4. Tak terbatas : Kerangka kerja mikro front-end tanpa batas adalah solusi front-end mikro berdasarkan Komponen Web + iframe. Ia memiliki serangkaian keunggulan seperti biaya rendah, kecepatan cepat, isolasi asli, dan fungsi yang kuat.Berikut ini adalah pengenalan mendetail tentang kerangka kerja mikro front-end tanpa batas

Poin umum:Saat rute dialihkan, Anda dapat memuat kode aplikasi terkait dan membiarkannya berjalan di dalam container.

  • memilikiKemampuan untuk memuat dan membongkar sub-aplikasi, ketika halaman berpindah dari satu sub-aplikasi ke sub-aplikasi lainnya, halaman tersebut dapat dimuat dan dirender secara normal;
  • memilikiKemampuan retensi status perutean, setelah mengaktifkan sub-aplikasi, penyegaran browser, perutean maju dan mundur sub-aplikasi dapat bekerja secara normal;
  • Antara aplikasi utama dan sub-aplikasi, sub-aplikasi dan sub-aplikasiDapat berkomunikasi satu sama lain；
  • Setiap aplikasi mikroManajemen gudang independen, pengembangan tumpukan teknologi independen, penerapan independen, dan operasi independen；

3. Perbandingan kerangka mikro front-end

ciriqiankunTak terbatasspa tunggalbingkai foto
Dukungan tumpukan teknologiTeknologi tumpukan independen, mendukung React, Vue, Angular, dll.Berdasarkan WebComponent, mendukung banyak tumpukan teknologiTumpukan teknologi independen, mendukung banyak kerangka kerja front-endTumpukan teknologi tidak ada hubungannya, tetapi integrasi perlu mempertimbangkan kompatibilitas
Metode aksesSederhana, akses melalui JS APIRelatif sederhana, dienkapsulasi melalui WebComponentRumit, Anda perlu mengkonfigurasi siklus hidup spa tunggalSederhana, tertanam melalui tag HTML
isolasi kotak pasirMenyediakan kotak pasir JS dan isolasi gayaGunakan WebComponent untuk isolasi alamiPengembang perlu menerapkan isolasi sandbox sendiriisolasi alami iframe
Manajemen ruteMendukung pemeliharaan status perutean dan pemetaan perutean yang dapat dikonfigurasiMendukung perutean virtual dan mempertahankan status peruteanSebagai rute tingkat atas, Anda perlu mengelola sendiri rute sub-aplikasi.Perutean dikelola oleh aplikasi di dalam iframe itu sendiri
Komunikasi aplikasiMenyediakan mekanisme komunikasi antara aplikasi induk-anak dan aplikasi anak-anakMenyediakan API berbasis komponen untuk mendukung komunikasiPengembang perlu menerapkan mekanisme komunikasi itu sendiriDapat berkomunikasi melalui parameter postMessage atau URL, dll.
Pramuat sumber dayaMendukung pramuat sumber daya statisMendukung pramuat sumber daya statisMendukung pemuatan aplikasi yang lambatTidak mendukung preloading, memuat sesuai permintaan
Dampak kinerjaLebih rendah, dioptimalkan melalui sandboxing dan pemuatan lambatLebih rendah, tetapi WebComponent mungkin memiliki overhead kinerjaLebih rendah, tetapi bergantung pada optimasi aplikasiLebih tinggi, overhead pemuatan dan rendering iframe lebih besar
Pengalaman pengembanganLebih baik lagi, menyediakan API dan dokumentasi yang kayaAPI berbasis komponen yang lebih baik lebih intuitifUmumnya, Anda perlu menangani sendiri banyak detailLebih baik, mudah diintegrasikan ke dalam aplikasi yang sudah ada
ketersediaan produksiTerbukti dan cocok untuk lingkungan produksiCocok untuk lingkungan produksi, tetapi mungkin kurang mendapat dukungan komunitasCocok untuk lingkungan produksi dan perlu ditingkatkan oleh pengembang sendiriCocok untuk lingkungan produksi, namun masalah keamanan dan kinerja perlu ditangani dengan hati-hati
Biaya adaptasiLebih tinggi, perlu menyesuaikan perutean, siklus hidup, dll.Sedang, sebagian besar disesuaikan dengan WebComponentLebih tinggi, membutuhkan pemahaman mendalam tentang arsitektur single-spaLebih rendah, namun perlu memperhatikan masalah kompatibilitas dan performa

Kerangka kerja front-end mikro membawa banyak keuntungan bagi pengembangan aplikasi front-end, seperti kemandirian tumpukan teknologi, pengembangan dan penerapan independen, peningkatan bertahap, dll. Namun, hal ini juga mempunyai kelemahan tertentu, seperti tingginya kesulitan akses dan rendahnya kemampuan berbagi sumber daya. Oleh karena itu, ketika memilih apakah akan menggunakan kerangka mikro-front-end, Anda perlu mempertimbangkannya secara komprehensif berdasarkan kebutuhan spesifik proyek dan kemampuan teknis tim. Pada saat yang sama, dalam aplikasi praktis, kita juga perlu memperhatikan isu-isu seperti pemilihan kerangka kerja mikro-front-end, desain arsitektur, manajemen kode, dll., untuk memastikan kelancaran kemajuan proyek dan pengoperasian proyek yang stabil. sistem.

Profil pribadi

Ia telah mengabdikan dirinya untuk meneliti teknologi selama lebih dari 30 tahun, dan mahir dalam berbagai bahasa seperti java, linux, javascript, php, css, dll. "Saya telah memberikan banyak kontribusi di bidang dokumentasi pengembang stasiun sumber terbuka untuk berbagi beberapa masalah dalam pengembangan teknologi untuk referensi di masa mendatang. Semua orang memeriksanya

informasi kontak saya

Surat