Compartilhamento de tecnologia

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

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 poderosas. A seguir está uma introdução detalhada à estrutura de micro front-end ilimitada:

1. Antecedentes e Visão Geral

Micro front-end é um meio técnico e uma estratégia de método para que várias equipes construam em conjunto aplicativos da web modernos, publicando funções de forma independente. A estrutura de micro front-end ilimitada fornece aos desenvolvedores uma solução de micro front-end eficiente e flexível, introduzindo componentes da Web e tecnologia iframe. Esta estrutura visa resolver as principais demandas dos usuários de soluções micro front-end existentes em termos de custo de adaptação, isolamento de estilo, desempenho de execução, tela branca de página, comunicação de subaplicativos, manutenção de atividade de subaplicativos, ativação de vários aplicativos, Vite suporte de estrutura, compartilhamento de aplicativos, etc. O problema.

2. Recursos principais

1. baixo custo: A aplicação principal da estrutura de micro front-end ilimitada tem baixo custo de uso e o custo de adaptação da subaplicação também é relativamente baixo.
2. alta velocidade : a primeira tela do subaplicativo abre rapidamente e o subaplicativo é executado rapidamente. Isso se deve ao gerenciamento otimizado de recursos e à estratégia de pré-carregamento da estrutura ilimitada.
3. isolamento nativo : Os estilos CSS podem obter isolamento nativo estrito por meio de componentes da Web, e JS executado em iframe também obtém isolamento nativo estrito. Este mecanismo de isolamento garante a independência entre subaplicações e evita conflitos de estilo e de script.
4. Poderoso : A estrutura de micro front-end ilimitada suporta keep-alive de subaplicativos, aninhamento de subaplicativos, ativação de vários aplicativos, compartilhamento de aplicativos, comunicação descentralizada, etc. Esses recursos tornam a estrutura ilimitada mais flexível e escalonável ao lidar com aplicativos front-end complexos.

3. Implementação técnica

A estrutura de micro front-end ilimitada adota o modo sandbox de Web Components + iframe e alcança isolamento nativo e operação eficiente herdando as vantagens do iframe e resolvendo suas deficiências. Os métodos de implementação específicos incluem:

1. Crie um iframe que tenha a mesma origem do aplicativo principal: O caminho carrega as informações de roteamento das subrotas. A mesma origem é para facilitar a comunicação entre aplicações.
2. Analise a entrada HTML do subaplicativo: Identifique a parte HTML, separe o estilo e o js, ​​processe o css e reinjete o html;
3. Interceptar objeto de documento em iframe: Aponte DOM para shadowRoot de maneira unificada para resolver o problema de janelas pop-up ou componentes borbulhantes que não conseguem cobrir o aplicativo principal.
4. mecanismo de comunicação: O iframe e o aplicativo principal estão no mesmo domínio e compartilham memória naturalmente para comunicação. O Unbounded fornece um mecanismo de eventos descentralizado para resolver problemas de comunicação.
5. Gerenciamento de status de rota: O movimento para frente e para trás do navegador pode afetar naturalmente o iframe. Neste momento, as alterações de roteamento do iframe são monitoradas e sincronizadas com o aplicativo principal. Se o navegador for atualizado, a rota salva pode ser lida a partir do URL. .

4. Vantagens e aplicações

As vantagens da estrutura micro front-end ilimitada são seu baixo custo, alta velocidade, isolamento nativo e funcionalidade poderosa. Isso oferece uma vantagem significativa ao lidar com aplicativos front-end grandes e complexos. Ao mesmo tempo, a estrutura ilimitada também oferece suporte a uma variedade de pilhas de tecnologia front-end, como Vue, React, etc., permitindo que os desenvolvedores escolham com flexibilidade as pilhas de tecnologia com base nas necessidades do projeto.

Em termos de cenários de aplicativos, a estrutura de micro front-end ilimitada é adequada para aplicativos da Web em grande escala que exigem desenvolvimento colaborativo eficiente, implantação independente e atualizações. Ao introduzir a estrutura ilimitada, os desenvolvedores podem dividir os aplicativos front-end em vários micro-aplicativos front-end independentes, e cada aplicativo pode ser desenvolvido, testado e implantado de forma independente. Isso não apenas melhora a eficiência do desenvolvimento, mas também reduz a complexidade e o risco do projeto.