Lazy Loading: Carregamento Sob Demanda

O Lazy Loading (carregamento preguiçoso) é uma estratégia de otimização de performance fundamental para nossa arquitetura. Ele garante que o usuário baixe apenas o código estritamente necessário para a funcionalidade que está utilizando naquele exato momento.

Por que Lazy Loading na Telemedicina?

1. Conexões Instáveis: Médicos e pacientes podem estar em redes móveis com sinal fraco. Baixar um bundle gigante de 5MB no início da aplicação pode levar ao abandono do sistema.
2. Múltiplas Apps no Monorepo: Como temos várias aplicações (Médico, Paciente, Admin) compartilhando o mesmo monorepo, o Lazy Loading garante que o App do Paciente não carregue acidentalmente o código complexo do Prontuário Médico.
3. Memória de Dispositivo: Dispositivos de baixo custo não conseguem processar e manter na memória todo o JavaScript de um sistema de saúde completo de uma só vez.

Estratégias de Divisão de Código (Code Splitting)

Dividimos nossa aplicação em três níveis principais de Lazy Loading:

1. Nível de Rota (Route Splitting)

Cada página ou domínio principal é carregado apenas quando a rota correspondente é ativada.

• Vantagem: O carregamento inicial é extremamente rápido.
• Implementação: Usamos React.lazy() e Suspense.

2. Nível de Domínio (Domain Splitting)

Mesmo dentro de uma rota, funcionalidades pesadas de um domínio podem ser carregadas sob demanda.

• Exemplo: O visualizador de exames de imagem (DICOM) dentro do prontuário é um bundle separado, carregado apenas se o médico clicar em "Ver Imagens".

3. Nível de Recurso (Asset Splitting)

Componentes compartilhados pesados (ex: editores de texto rico, geradores de PDF) são isolados e carregados apenas quando necessários por qualquer domínio.

Lazy Loading vs Injeção Dinâmica

É importante não confundir esses dois conceitos fundamentais da nossa arquitetura:

• Lazy Loading: Refere-se ao download do arquivo JavaScript pelo navegador.
• Injeção Dinâmica: Refere-se à registro da lógica de negócio (Reducers/Sagas) na memória da aplicação (Store do Redux).

Em nossa arquitetura, eles trabalham em conjunto:

1. O roteador dispara o Lazy Loading do bundle do domínio.
2. O bundle é baixado e o componente de entrada do domínio é montado.
3. O componente dispara a Injeção Dinâmica de seus Reducers e Sagas.

Impacto na Experiência do Usuário

O uso de Lazy Loading exige o gerenciamento cuidadoso de estados de transição. Utilizamos:

• Skeletons: Para indicar que o conteúdo está sendo carregado.
• Spinners: Para carregamentos rápidos.
• Suspense Boundaries: Para garantir que a aplicação não quebre enquanto os pedaços (chunks) estão sendo buscados.

Ao dominar o Lazy Loading, garantimos que nossa plataforma de saúde seja acessível e performática para todos, independentemente da qualidade da sua conexão ou do seu dispositivo.