minhas informações de contato
Correspondência[email protected]
2024-07-12
한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina
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
Pontos comuns:Quando a rota é trocada, você pode carregar o código do aplicativo correspondente e deixá-lo rodar no contêiner.
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.