Condivisione della tecnologia

Micro front-end: Qiankun, Wujie, spa singola, confronto iframe

2024-07-12

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

1. Panoramica del framework micro front-end

Un framework micro-front-end è una soluzione tecnica progettata per suddividere applicazioni front-end di grandi dimensioni in più applicazioni micro-front-end piccole, indipendenti e gestibili. Ciascuna applicazione micro-front-end può essere sviluppata, testata, distribuita ed eseguita in modo indipendente mantenendo la collaborazione complessiva e l'esperienza dell'utente.Questa architettura è simile all'architettura dei microservizi, ma si concentra sull'area front-end

2. Framework microfront-end comuni

  1. qiankun : Sviluppato e gestito da Ant Financial, basato su Single-SPA, fornisce funzionalità di accesso semplice e indipendenti dallo stack tecnologico. Supporta più framework front-end come Vue e React e presenta bassi costi di trasformazione e un'esperienza di sviluppo amichevole.
  2. spa singola : è un framework di routing front-end JavaScript leggero, incentrato sulla gestione del routing di applicazioni a pagina singola (SPA). Sebbene non sia di per sé un framework micro-frontend completo, è la base per molte implementazioni di micro-frontend.
  3. iframe: Sebbene iframe in sé non sia un micro framework front-end, viene spesso utilizzato come semplice implementazione del micro front-end
  4. Illimitato : Il micro framework front-end illimitato è una soluzione micro front-end basata su componenti Web + iframe. Presenta una serie di vantaggi come basso costo, alta velocità, isolamento nativo e funzioni potenti.Quella che segue è un'introduzione dettagliata al framework micro front-end illimitato

Punti comuni:Quando si cambia percorso, è possibile caricare il codice dell'applicazione corrispondente e lasciarlo funzionare nel contenitore.

  • AverePossibilità di caricare e scaricare applicazioni secondarie, quando la pagina passa da una sottoapplicazione all'altra, può essere caricata e renderizzata normalmente;
  • AvereFunzionalità di conservazione dello stato del routing, dopo aver attivato la sottoapplicazione, l'aggiornamento del browser e il routing in avanti e all'indietro della sottoapplicazione possono funzionare normalmente;
  • Tra applicazione principale e sottoapplicazione, sottoapplicazione e sottoapplicazionePossono comunicare tra loro
  • Ogni micro applicazioneGestione indipendente del magazzino, sviluppo indipendente dello stack tecnologico, implementazione indipendente e funzionamento indipendente

3. Confronto tra micro framework front-end

caratteristicaqiankunIllimitatospa singolaiframe
Supporto dello stack tecnologicoIndipendente dallo stack tecnologico, supporta React, Vue, Angular, ecc.Basato su WebComponent, supporta più stack tecnologiciIndipendente dallo stack tecnologico, supporta più framework front-endLo stack tecnologico non ha nulla a che fare, ma l’integrazione deve considerare la compatibilità
Metodo di accessoSemplice, accesso tramite API JSRelativamente semplice, incapsulato tramite WebComponentComplesso, è necessario configurare il ciclo di vita della singola spaSemplice, incorporato tramite tag HTML
isolamento della sandboxFornisce sandbox JS e isolamento dello stileUtilizza WebComponent per l'isolamento naturaleGli sviluppatori devono implementare autonomamente l'isolamento sandboxiframe isolamento naturale
Gestione del percorsoSupporta la manutenzione dello stato del routing e la mappatura del routing configurabileSupporta il routing virtuale e mantieni lo stato del routingEssendo un percorso di livello superiore, è necessario gestire personalmente i percorsi delle applicazioni secondarie.Il routing è gestito dall'applicazione all'interno dell'iframe stesso
Comunicazione applicativaFornire un meccanismo di comunicazione tra le applicazioni padre-figlio e le applicazioni figlio-figlioFornire API basate su componenti per supportare la comunicazioneGli sviluppatori devono implementare da soli il meccanismo di comunicazionePuò comunicare tramite parametri postMessage o URL, ecc.
Precaricamento delle risorseSupporta il precaricamento delle risorse staticheSupporta il precaricamento delle risorse staticheSupporta il caricamento lento delle applicazioniNon supporta il precaricamento, il caricamento su richiesta
Impatto sulle prestazioniPiù basso, ottimizzato tramite sandboxing e caricamento lentoInferiore, ma WebComponent potrebbe avere un sovraccarico delle prestazioniInferiore, ma dipendente dall'ottimizzazione dell'applicazionePiù in alto, il carico di caricamento e rendering dell'iframe è maggiore
Esperienza di sviluppoMeglio, fornisce API e documentazione riccheL'API migliore e basata su componenti è più intuitivaIn generale, devi gestire molti dettagli da soloMigliore, facile da integrare nelle applicazioni esistenti
disponibilità produttivaCollaudato e adatto agli ambienti di produzioneAdatto per ambienti di produzione, ma potrebbe avere meno supporto da parte della comunitàAdatto per l'ambiente di produzione e deve essere migliorato dagli stessi sviluppatoriAdatto per ambienti di produzione, ma i problemi di sicurezza e prestazioni devono essere gestiti con attenzione
Costo di adattamentoPiù in alto, è necessario adattare il routing, il ciclo di vita, ecc.Moderato, principalmente adattato a WebComponentPiù in alto, richiede una conoscenza approfondita dell'architettura della singola spaInferiore, ma è necessario prestare attenzione ai problemi di compatibilità e prestazioni

Il micro framework front-end offre molti vantaggi allo sviluppo di applicazioni front-end, come l'indipendenza dallo stack tecnologico, lo sviluppo e l'implementazione indipendenti, gli aggiornamenti incrementali, ecc. Tuttavia, presenta anche alcune carenze, come l’elevata difficoltà di accesso e le scarse capacità di condivisione delle risorse. Pertanto, quando si sceglie se utilizzare un framework micro-front-end, è necessario considerarlo in modo completo in base alle esigenze specifiche del progetto e alle capacità tecniche del team. Allo stesso tempo, nelle applicazioni pratiche, dobbiamo anche prestare attenzione a questioni come la selezione del framework micro-front-end, la progettazione dell'architettura, la gestione del codice, ecc., per garantire il regolare avanzamento del progetto e il funzionamento stabile del sistema. sistema.