Compartilhamento de tecnologia

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

2024-07-12

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

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

  1. 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.
  2. 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.
  3. 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
  4. 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ísticaqian-kunIlimitadospa individualiframe
Suporte de pilha de tecnologiaIndependente da pilha de tecnologia, suporta React, Vue, Angular, etc.Baseado em WebComponent, suporta múltiplas pilhas de tecnologiaIndependente da pilha de tecnologia, suporta múltiplas estruturas de front-endA pilha de tecnologia não tem nada a ver, mas a integração precisa considerar a compatibilidade
Método de acessoSimples, acesso através da API JSRelativamente simples, encapsulado através de WebComponentComplexo, você precisa configurar o ciclo de vida do spa únicoSimples, incorporado por meio de tags HTML
isolamento de caixa de areiaFornece sandbox JS e isolamento de estiloUse WebComponent para isolamento naturalOs desenvolvedores precisam implementar o isolamento do sandbox por conta própriaisolamento natural iframe
Gerenciamento de rotasSuporta manutenção de status de roteamento e mapeamento de roteamento configurávelSuporta roteamento virtual e mantém o status do roteamentoComo 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 aplicativosFornece mecanismo de comunicação entre aplicativos pai-filho e aplicativos filho-filhoFornece API baseada em componentes para dar suporte à comunicaçãoOs desenvolvedores precisam implementar eles próprios o mecanismo de comunicaçãoPode se comunicar por meio de parâmetros postMessage ou URL, etc.
Pré-carregamento de recursosSuporta pré-carregamento de recursos estáticosSuporta pré-carregamento de recursos estáticosSuporta carregamento lento de aplicativosNão suporta pré-carregamento, carregamento sob demanda
Impacto no desempenhoMais baixo, otimizado por meio de sandbox e carregamento lentoMenor, mas WebComponent pode ter sobrecarga de desempenhoMenor, mas dependente da otimização do aplicativoQuanto maior, a sobrecarga de carregamento e renderização de iframe é maior
Experiência de desenvolvimentoMelhor, fornece API e documentação ricasAPI melhor baseada em componentes é mais intuitivaGeralmente, você mesmo precisa lidar com muitos detalhesMelhor e fácil de integrar em aplicativos existentes
disponibilidade de produçãoComprovado e adequado para ambientes de produçãoAdequado para ambientes de produção, mas pode ter menos apoio da comunidadeAdequado para ambiente de produção e precisa ser melhorado pelos próprios desenvolvedoresAdequado para ambientes de produção, mas questões de segurança e desempenho precisam ser tratadas com cuidado
Custo de adaptaçãoMaior, necessidade de adaptar roteamento, ciclo de vida, etc.Moderado, adaptado principalmente para WebComponentSuperior, requer um conhecimento profundo da arquitetura de spa únicoMenor, 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.