JavaScript, embora escrito para ser uma linguagem simples, pode produzir bases de código surpreendentemente complexas. Parte do motivo é que há uma grande variedade de classes e módulos disponíveis. A maioria dos programas e estruturas JavaScript substanciais têm muitas dependências, o que pode fazer um projeto aparentemente simples acumular uma grande quantidade de código rapidamente.
Quanto mais código um projeto tiver, mais lento será o carregamento do navegador. Portanto, geralmente você precisa equilibrar o tamanho de suas dependências com o desempenho que espera de seu JavaScript. A divisão de código é uma maneira útil de encontrar esse equilíbrio.
O que é divisão de código?
Muitos frameworks JavaScript agrupam todas as dependências em um grande arquivo. Isso torna mais fácil adicionar seu JavaScript a uma página HTML. O pacote requer apenas uma tag de link e há menos chamadas necessárias para configurar a página, pois todo o JavaScript está em um só lugar. Em teoria, agrupar o JavaScript dessa maneira deve acelerar o carregamento da página e reduzir a quantidade de tráfego que a página precisa gerenciar.
Em um determinado ponto, no entanto, um pacote cresce até um certo tamanho no qual a sobrecarga de interpretação e execução do código retarda o carregamento da página em vez de acelerá-lo. Esse ponto de inflexão é diferente para cada página, e você deve testar suas páginas para descobrir onde está. Não há uma orientação geral-tudo depende das dependências que estão sendo carregadas.
A chave para a divisão de código é descobrir quais partes de uma página precisam usar diferentes dependências de JavaScript. A divisão de código permite que você omita estrategicamente certas dependências dos pacotes e, em seguida, insira-as apenas onde forem necessárias. Isso significa que eles também não são carregados até que sejam necessários-carregar o JavaScript apenas quando necessário acelera o tempo de carregamento da página.
Isso pode parecer contra-intuitivo no início, pois a página ainda está carregando a mesma quantidade de código, mas a diferença ocorre porque a página pode não executar todo o código que carrega. Por exemplo, se um elemento dinâmico em uma página requer uma grande dependência, essa dependência pode causar um atraso de página perceptível. Se a dependência for carregada apenas quando o elemento dinâmico for usado, no entanto, a dependência pode ser pequena o suficiente onde nenhum atraso é gerado.
A divisão de código é uma prática comum em grandes aplicativos React, e o aumento na velocidade que ela fornece pode determinar se um usuário continua usando um aplicativo da web ou sai. Muitos estudos mostraram que as páginas têm menos de três segundos para impressionar os usuários, portanto, reduzir até mesmo frações de segundo pode ser significativo. Portanto, apontar para três segundos ou menos de tempo de carregamento é o ideal.
Como funciona a divisão de código no React?
Existem várias maneiras de implementar a divisão de código no React. Empacotadores diferentes funcionam de maneiras diferentes, mas o React tem vários métodos para personalizar o empacotamento, independentemente do empacotador usado.
Importações dinâmicas
Talvez a maneira mais simples de dividir o código no React seja com a sintaxe de “importação” dinâmica. Alguns empacotadores podem analisar instruções de importação dinâmica nativamente, enquanto outros requerem alguma configuração. A sintaxe de importação dinâmica funciona para geração de sites estáticos e renderização do lado do servidor.
As importações dinâmicas usam a função então para importar apenas o código que é necessário. Qualquer chamada para o código importado deve estar dentro dessa função.
import ("./parseText"). then (parseText=> { console.log (parseText.count ("Esta é uma string de texto","texto"));
});
Usando React.lazy
React.lazy permite o carregamento lento de importações em muitos contextos. Ele ainda não está disponível para renderização do lado do servidor, mas sua diversidade de funções compensa isso. A função React.lazy permite importar dinamicamente uma dependência e renderizar essa dependência como um componente em uma única linha de código. O componente deve ser renderizado dentro de outro componente que mostra o conteúdo de fallback se a importação dinâmica falhar.
Isso pode incluir conteúdo de erro, embora não seja obrigatório. Se o conteúdo do erro for incluído, ele deve ser incluído em um tipo especial de componente denominado Limite de Erro. O componente Error Boundary deve estar acima de todos os componentes carregados dinamicamente para garantir que sejam exibidos corretamente.
import React, {Suspense} de'react'; const comp1=React.lazy (()=> import ('./comp1')); function MyComponent () { Retorna ( Carregando... }> 
