Aula 06
Como Fazer um Import Dinâmico para Code Splitting em React
Summary
## Resumo do Transcrição
O autor inicia mencionando que vai baixar um arquivo de bundle e utilizar o terminal com `CURL` ou `WGet`. Após baixar o arquivo `bundle.js`, ele abre no editor Atom.
O foco é no componente "painel", que está contido no `bundle.js`, e o objetivo é extrair esse componente para fora do bundle utilizando **code splitting**. O Webpack realiza automaticamente essa divisão de código se for usado o **import dinâmico**.
O processo envolve as seguintes etapas:
1. **Modificar o Componente**: No componente `app`, o autor comenta o código que importa diretamente o painel e opta por usar o import dinâmico.
2. **Gerenciar o Estado**: É criado um estado para gerenciar o painel que inicialmente não está definido.
3. **Implementar o Import Dinâmico**: Ao clicar de um botão, um import dinâmico será realizado para buscar o painel. Isso envolve a resolução de uma promessa, que retornará o componente.
4. **Atualizar o Estado**: Após importar o painel, o estado é atualizado armazenando o componente do painel e também exibindo-o.
5. **Desestruturação do Estado**: Antes do retorno, o painel do estado é desestruturado para que possa ser utilizado na renderização.
Finalmente, ele menciona testando o processo e a necessidade de ter uma estrutura para gerenciar o componente importado.
## Considerações Gerais
- O uso de import dinâmico permite otimizar a carga do aplicativo, carregando componentes conforme necessário.
- Manipulações de estado são cruciais para garantir que o componente importado funcione de maneira adequada após a importação assíncrona.
Video Transcript
Eu vou baixar o bundle aqui para ver o que está dentro dele, tá?
Eu vou copiar a request URL aqui e vou aqui no terminal e vou dizer C URL no meu caso.
Você pode usar o W Get se você tiver ou qualquer outro programa para baixar.
Eu vou pegar esse cara aqui e vou colocar dentro de uma pasta temporária, bar TMP, barra bundle.js.
Então eu já estou aqui na pasta TMP com o bundle.js, vou abrir o bundle no Atom.
Então eu tenho esse bundle.js que é o arquivo que a gente recebe, o cliente recebe.
Eu vou procurar para o painel aqui.
O sinonode que tem o painel aqui, o componente painel aqui, a função render está dentro do bundle para o js.
Esse painel vai daqui até aqui, parece, né?
Esse parte aqui.
Então a gente quer estrair esse cara para fora do bundle e no arquivo separado.
Dá o code splitting.
O webpack faz code splitting automaticamente se você utilizar o import dinâmico.
Então vamos aprender como fazer o import dinâmico.
Estamos aqui no componente app.
Agora já está importando painel, vai incluindo o próprio bundle.
Mas em vez disso vamos falar para usar o import dinâmico para poder somente usar o painel depois que baixar aquela parte do bundle que contém o painel.
Então para poder fazer isso vamos usar o import dinâmico.
Vamos aqui fazer dessa maneira.
Não vamos importar painel aqui, vou comentar esse código.
Agora a gente tem que baixar de alguma maneira esse painel.
Mas como fazer isso?
A gente vai usar o import dinâmico.
Vamos ver aqui o painel aqui.
Quando você tiver essa parte você vai pôr o painel no estado do aplicativo.
Então aqui por exemplo state, vamos pôr o painel.
Inicialmente não porque a gente ainda não tem.
E se você clicar, nós vamos baixar o painel e você está no state.
Então vamos ver aqui.
Quando você clicar o botão ele vai fazer um import dinâmico.
Vamos falar assim import.
Onde está o painel?
Está no ponto barra painel.
Agora quando você faz import dinâmico ele vai retornar o promessa.
Então você tem que lidar com essa promessa usando o deno.
Ele vai resolver com valor o componente mesmo.
Quando você pegar o componente deno vamos dar o set state.
E vamos armazenar o painel na propriedade painel.
E você vai fazer o painel ficar aberto aqui.
Pode ser na mesma hora também.
Agora lá aqui embaixo no painel você não pode mais usar esse painel que não está definido.
Vamos aqui antes do return.
Você pode falar const.
Dá o destruction no painel no this.state.
Porque o this.state painel tem um componente.
Se você quiser pode fazer assim também.
Deixa eu só demonstrar.
Vamos testar.
Estamos aqui.
Acabamos de painel.
Tem um import aqui do chunk.
Envara no seu key.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: