Micro front-end: Qiankun, Wujie, spa único, comparação de iframe

2024-07-12

1. Visão geral da estrutura micro front-end

Uma estrutura de micro-front-end é uma solução técnica projetada para dividir grandes aplicativos de front-end em vários aplicativos de micro-front-end pequenos, independentes e de fácil manutenção. Cada aplicativo de micro-front-end pode ser desenvolvido, testado, implantado e executado. de forma independente, mantendo a colaboração geral e a experiência do usuário.Esta arquitetura é semelhante à arquitetura de microsserviços, mas foca na área de front-end

2. Estruturas de micro front-end comuns

qiankun : Desenvolvido e mantido pela Ant Financial, baseado em Single-SPA, fornece recursos de acesso simples e independentes da pilha de tecnologia. Ele oferece suporte a vários frameworks front-end, como Vue e React, e tem baixos custos de transformação e uma experiência de desenvolvimento amigável.
spa individual : é uma estrutura de roteamento front-end JavaScript leve, com foco no gerenciamento de roteamento de aplicativos de página única (SPA). Embora não seja uma estrutura de microfrontend completa em si, é a base para muitas implementações de microfrontend.
iframe: Embora o iframe em si não seja uma estrutura de micro front-end, ele é frequentemente usado como uma implementação simples de micro front-end
Ilimitado : A estrutura de micro front-end ilimitada é uma solução de micro front-end baseada em Web Components + iframe. Possui uma série de vantagens, como baixo custo, velocidade rápida, isolamento nativo e funções fortes.A seguir está uma introdução detalhada à estrutura de micro front-end ilimitada

Pontos comuns:Quando a rota é trocada, você pode carregar o código do aplicativo correspondente e deixá-lo rodar no contêiner.

terCapacidade de carregar e descarregar subaplicativos, quando a página muda de um subaplicativo para outro, ela pode ser carregada e renderizada normalmente;
terCapacidade de retenção de estado de roteamento, após ativar o subaplicativo, a atualização do navegador, o roteamento para frente e para trás do subaplicativo podem funcionar normalmente;
Entre aplicação principal e subaplicação, subaplicação e subaplicaçãoPodem se comunicar entre si；
Cada microaplicaçãoGerenciamento independente de armazém, desenvolvimento independente de pilha de tecnologia, implantação independente e operação independente；

3. Comparação de micro frameworks front-end

característica	qian-kun	Ilimitado	spa individual	iframe
Suporte de pilha de tecnologia	Independente da pilha de tecnologia, suporta React, Vue, Angular, etc.	Baseado em WebComponent, suporta múltiplas pilhas de tecnologia	Independente da pilha de tecnologia, suporta múltiplas estruturas de front-end	A pilha de tecnologia não tem nada a ver, mas a integração precisa considerar a compatibilidade
Método de acesso	Simples, acesso através da API JS	Relativamente simples, encapsulado através de WebComponent	Complexo, você precisa configurar o ciclo de vida do spa único	Simples, incorporado por meio de tags HTML
isolamento de caixa de areia	Fornece sandbox JS e isolamento de estilo	Use WebComponent para isolamento natural	Os desenvolvedores precisam implementar o isolamento do sandbox por conta própria	isolamento natural iframe
Gerenciamento de rotas	Suporta manutenção de status de roteamento e mapeamento de roteamento configurável	Suporta roteamento virtual e mantém o status do roteamento	Como uma rota de nível superior, você mesmo precisa gerenciar as rotas de subaplicativos.	O roteamento é gerenciado pelo aplicativo dentro do próprio iframe
Comunicação de aplicativos	Fornece mecanismo de comunicação entre aplicativos pai-filho e aplicativos filho-filho	Fornece API baseada em componentes para dar suporte à comunicação	Os desenvolvedores precisam implementar eles próprios o mecanismo de comunicação	Pode se comunicar por meio de parâmetros postMessage ou URL, etc.
Pré-carregamento de recursos	Suporta pré-carregamento de recursos estáticos	Suporta pré-carregamento de recursos estáticos	Suporta carregamento lento de aplicativos	Não suporta pré-carregamento, carregamento sob demanda
Impacto no desempenho	Mais baixo, otimizado por meio de sandbox e carregamento lento	Menor, mas WebComponent pode ter sobrecarga de desempenho	Menor, mas dependente da otimização do aplicativo	Quanto maior, a sobrecarga de carregamento e renderização de iframe é maior
Experiência de desenvolvimento	Melhor, fornece API e documentação ricas	API melhor baseada em componentes é mais intuitiva	Geralmente, você mesmo precisa lidar com muitos detalhes	Melhor e fácil de integrar em aplicativos existentes
disponibilidade de produção	Comprovado e adequado para ambientes de produção	Adequado para ambientes de produção, mas pode ter menos apoio da comunidade	Adequado para ambiente de produção e precisa ser melhorado pelos próprios desenvolvedores	Adequado para ambientes de produção, mas questões de segurança e desempenho precisam ser tratadas com cuidado
Custo de adaptação	Maior, necessidade de adaptar roteamento, ciclo de vida, etc.	Moderado, adaptado principalmente para WebComponent	Superior, requer um conhecimento profundo da arquitetura de spa único	Menor, mas precisa prestar atenção aos problemas de compatibilidade e desempenho

A estrutura micro front-end traz muitas vantagens para o desenvolvimento de aplicativos front-end, como independência da pilha de tecnologia, desenvolvimento e implantação independentes, atualizações incrementais, etc. No entanto, também apresenta algumas deficiências, tais como elevada dificuldade de acesso e fraca capacidade de partilha de recursos. Portanto, ao escolher se deseja usar uma estrutura micro-front-end, você precisa considerá-la de forma abrangente com base nas necessidades específicas do projeto e nas capacidades técnicas da equipe. Ao mesmo tempo, em aplicações práticas, também precisamos prestar atenção a questões como seleção de estrutura micro-front-end, design de arquitetura, gerenciamento de código, etc., para garantir o bom andamento do projeto e a operação estável do sistema.

Compartilhamento de tecnologia