Κοινή χρήση τεχνολογίας

Micro front-end: Qiankun, Wujie, single-spa, σύγκριση iframe

2024-07-12

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

1. Επισκόπηση του πλαισίου micro front-end

Ένα micro-front-end πλαίσιο είναι μια τεχνική λύση που έχει σχεδιαστεί για να χωρίζει μεγάλες εφαρμογές front-end σε πολλές μικρές, ανεξάρτητες, συντηρήσιμες εφαρμογές micro-front-end Κάθε εφαρμογή micro-front-end μπορεί να αναπτυχθεί, να δοκιμαστεί, να αναπτυχθεί και να εκτελεστεί ανεξάρτητα, διατηρώντας παράλληλα τη συνολική συνεργασία και την εμπειρία χρήστη.Αυτή η αρχιτεκτονική είναι παρόμοια με την αρχιτεκτονική microservice, αλλά εστιάζει στην περιοχή του front-end

2. Κοινά πλαίσια micro front-end

  1. qiankun : Αναπτύχθηκε και συντηρείται από την Ant Financial, με βάση το Single-SPA, παρέχει λειτουργίες ανεξάρτητες από τη στοίβα τεχνολογίας και απλή πρόσβαση. Υποστηρίζει πολλαπλά πλαίσια front-end, όπως το Vue και το React, και έχει χαμηλό κόστος μετασχηματισμού και φιλική εμπειρία ανάπτυξης.
  2. μονό σπα : Είναι ένα ελαφρύ πλαίσιο δρομολόγησης front-end JavaScript, που εστιάζει στη διαχείριση δρομολόγησης εφαρμογών μιας σελίδας (SPA). Αν και δεν είναι από μόνο του ένα πλήρες πλαίσιο micro-frontend, αποτελεί τη βάση για πολλές εφαρμογές micro-frontend.
  3. iframe: Αν και το ίδιο το iframe δεν είναι πλαίσιο micro front-end, χρησιμοποιείται συχνά ως απλή υλοποίηση micro front-end
  4. Απεριόριστος : Το Unbounded micro front-end πλαίσιο είναι μια micro-front-end λύση που βασίζεται σε Web Components + iframe Έχει μια σειρά από πλεονεκτήματα, όπως χαμηλό κόστος, γρήγορη ταχύτητα, εγγενή απομόνωση και ισχυρές λειτουργίες.Ακολουθεί μια λεπτομερής εισαγωγή στο απεριόριστο πλαίσιο micro front-end

Κοινά σημεία:Όταν αλλάξει η διαδρομή, μπορείτε να φορτώσετε τον κωδικό της αντίστοιχης εφαρμογής και να την αφήσετε να τρέξει στο κοντέινερ.

  • έχωΔυνατότητα φόρτωσης και εκφόρτωσης υπο-εφαρμογών, όταν η σελίδα αλλάζει από μια υπο-εφαρμογή σε άλλη, μπορεί να φορτωθεί και να αποδοθεί κανονικά.
  • έχωΔυνατότητα διατήρησης κατάστασης δρομολόγησης, μετά την ενεργοποίηση της υπο-εφαρμογής, η ανανέωση του προγράμματος περιήγησης, η δρομολόγηση προς τα εμπρός και προς τα πίσω της υπο-εφαρμογής μπορεί να λειτουργήσει κανονικά.
  • Μεταξύ κύριας εφαρμογής και υπο-εφαρμογής, υπο-εφαρμογής και δευτερεύουσας εφαρμογήςΜπορούν να επικοινωνούν μεταξύ τους
  • Κάθε μικροεφαρμογήΑνεξάρτητη διαχείριση αποθήκης, ανεξάρτητη ανάπτυξη στοίβας τεχνολογίας, ανεξάρτητη ανάπτυξη και ανεξάρτητη λειτουργία

3. Σύγκριση πλαισίων micro front-end

χαρακτηριστικό γνώρισμαqiankunΑπεριόριστοςμονό σπαiframe
Υποστήριξη στοίβας τεχνολογίαςΑνεξάρτητη στοίβα τεχνολογίας, υποστηρίζει React, Vue, Angular κ.λπ.Βασισμένο στο WebComponent, υποστηρίζει πολλαπλές στοίβες τεχνολογίαςΑνεξάρτητο από τη στοίβα τεχνολογίας, υποστηρίζει πολλαπλά πλαίσια front-endΗ στοίβα τεχνολογίας δεν έχει καμία σχέση, αλλά η ενσωμάτωση πρέπει να εξετάσει τη συμβατότητα
Μέθοδος πρόσβασηςΑπλή, πρόσβαση μέσω JS APIΣχετικά απλό, ενσωματωμένο μέσω του WebComponentΠολύπλοκο, πρέπει να διαμορφώσετε τον κύκλο ζωής ενός σπαΑπλό, ενσωματωμένο μέσω ετικετών HTML
απομόνωση sandboxΠαρέχει JS sandbox και απομόνωση στυλΧρησιμοποιήστε το WebComponent για φυσική απομόνωσηΟι προγραμματιστές πρέπει να εφαρμόσουν μόνοι τους την απομόνωση sandboxiframe φυσική απομόνωση
Διαχείριση διαδρομήςΥποστηρίζει συντήρηση κατάστασης δρομολόγησης και διαμορφώσιμη χαρτογράφηση δρομολόγησηςΥποστήριξη εικονικής δρομολόγησης και διατήρηση της κατάστασης δρομολόγησηςΩς διαδρομή ανώτατου επιπέδου, πρέπει να διαχειριστείτε μόνοι σας τις διαδρομές δευτερευουσών εφαρμογών.Η διαχείριση της δρομολόγησης γίνεται από την εφαρμογή μέσα στο ίδιο το iframe
Επικοινωνία εφαρμογήςΠαροχή μηχανισμού επικοινωνίας μεταξύ εφαρμογών γονέα-παιδιού και εφαρμογών παιδιού-παιδιούΠαρέχετε API που βασίζεται σε στοιχεία για την υποστήριξη της επικοινωνίαςΟι προγραμματιστές πρέπει να εφαρμόσουν οι ίδιοι τον μηχανισμό επικοινωνίαςΜπορεί να επικοινωνεί μέσω παραμέτρων postMessage ή URL κ.λπ.
Προφόρτωση πόρωνΥποστήριξη προφόρτωσης στατικών πόρωνΥποστήριξη προφόρτωσης στατικών πόρωνΥποστήριξη τεμπέλης φόρτωσης εφαρμογώνΔεν υποστηρίζει προφόρτωση, φόρτωση κατά παραγγελία
Επίδραση στην απόδοσηΧαμηλότερο, βελτιστοποιημένο μέσω sandboxing και lazy loadingΧαμηλότερο, αλλά το WebComponent μπορεί να έχει επιβάρυνση απόδοσηςΧαμηλότερο, αλλά εξαρτάται από τη βελτιστοποίηση της εφαρμογήςΥψηλότερα, τα γενικά έξοδα φόρτωσης και απόδοσης iframe είναι μεγαλύτερα
Εμπειρία ανάπτυξηςΚαλύτερα, παρέχει πλούσιο API και τεκμηρίωσηΤο καλύτερο API που βασίζεται σε στοιχεία είναι πιο διαισθητικόΓενικά, πρέπει να χειριστείς πολλές λεπτομέρειες μόνος σουΚαλύτερη, εύκολη ενσωμάτωση σε υπάρχουσες εφαρμογές
διαθεσιμότητα παραγωγήςΑποδεδειγμένο και κατάλληλο για περιβάλλοντα παραγωγήςΚατάλληλο για περιβάλλοντα παραγωγής, αλλά μπορεί να έχει λιγότερη υποστήριξη από την κοινότηταΚατάλληλο για περιβάλλον παραγωγής και χρειάζεται βελτίωση από τους ίδιους τους προγραμματιστέςΚατάλληλο για περιβάλλοντα παραγωγής, αλλά τα ζητήματα ασφάλειας και απόδοσης πρέπει να αντιμετωπίζονται προσεκτικά
Κόστος προσαρμογήςΥψηλότερο, ανάγκη προσαρμογής δρομολόγησης, κύκλου ζωής κ.λπ.Μέτρια, κυρίως προσαρμοσμένη στο WebComponentΑνώτερη, απαιτεί εις βάθος κατανόηση της αρχιτεκτονικής ενός σπαΧαμηλότερο, αλλά πρέπει να δώσετε προσοχή σε ζητήματα συμβατότητας και απόδοσης

Το Micro front-end πλαίσιο φέρνει πολλά πλεονεκτήματα στην ανάπτυξη εφαρμογών front-end, όπως ανεξαρτησία στοίβας τεχνολογίας, ανεξάρτητη ανάπτυξη και ανάπτυξη, σταδιακές αναβαθμίσεις κ.λπ. Ωστόσο, έχει επίσης ορισμένες ελλείψεις, όπως υψηλή δυσκολία πρόσβασης και κακές δυνατότητες κοινής χρήσης πόρων. Ως εκ τούτου, όταν επιλέγετε αν θα χρησιμοποιήσετε ένα πλαίσιο micro-front-end, θα πρέπει να το λάβετε υπόψη πλήρως με βάση τις συγκεκριμένες ανάγκες του έργου και τις τεχνικές δυνατότητες της ομάδας. Ταυτόχρονα, σε πρακτικές εφαρμογές, πρέπει επίσης να δώσουμε προσοχή σε θέματα όπως η επιλογή πλαισίου micro-front-end, ο σχεδιασμός αρχιτεκτονικής, η διαχείριση κώδικα κ.λπ., για να διασφαλίσουμε την ομαλή πρόοδο του έργου και τη σταθερή λειτουργία του Σύστημα.