Aprenda o conceito básico de code splitting e como fazer a implementação no React. Code Splitting é o conceito da divisão de código para repartir o bundle em várias partes menores. Com o code splitting, se feito de maneira correta, o tempo de carregamento do código inicial diminui para o cliente. Isso significa um melhor desempenho do aplicativo e da experiência do usuário.

React - Code Splitting para Iniciantes (Divisão de Código, Lazy Loading)

Como Fazer Code Splitting com o React - Divisão de Código para Iniciantes

Nesta aula nós vamos falar de como fazer Code Splitting, divisão de código com o React.
Primeiro a gente vai falar sobre esse problema que o Code Splitting ajuda a resolver, a solucionar.
Então estou aqui na página do React, tem uma página sobre Code Splitting, se você quiser dar uma olhada como referência.
Só ir React.js.org. docs.code.ifnsplitting.html, tem aqui no lado direito na aba Advanced Guides, guias avançadas.
Nesta aula, neste curso eu vou usar o React já está na versão 16.7.0.
Tá bom, com isso vamos começar.
Eu estou aqui no editor de trecho, no Atom, só para explicar o conceito.
Então, vamos aqui.
Vamos supor que a gente tenha um arquivo matemático.js aqui em cima no topo.
E esse arquivo tem várias funções relacionadas a operações matemáticas.
Por exemplo, função bem simples, só para multiplicar, função que pega dois operandos e retorna a multiplicação dos dois operandos.
Função muito trivial, mas para explicar o conceito.
Então temos esse arquivo, essa função é exportada.
Significa que a gente pode usar de outros arquivos.
Por exemplo, nosso aplicativo app.js, esse arquivo, ele faz uso da função multiplicar aqui, para dar o console log.
E para poder usar essa função, precisa importar dessa maneira.
E ele dá um import, multiplicar do arquivo matemático.js.
Agora, como é que isso funciona, esses negócios de import?
Normalmente, você vai ter o bundler, por exemplo, a gente vai usar o webpack como exemplo, com o react.
O webpack, ele começa aqui no app.
Quando ele vê o import, é como se fosse assim, ele vai pegar esse arquivo, está certo, import de lá.
É como se fosse ele copiando esse cara e pondo aqui para poder você usar o multiplicar no seu app.
E ele vai seguindo todos os imports e vai compilando o código inteiro e é chamado bundle.js.
Esse bundle.js aqui, por exemplo, poderia se tornar assim.
Na verdade, não vai ser assim, necessariamente, mas só para explicar o conceito.
Então, o webpack vai começar do app, vai ver que tem um import, está certo, você quer importar isso,
então, vou pegar o conteúdo desse arquivo, vou pôr aqui, aí vai continuar, está certo, multiplica, deixa assim mesmo e acabou.
Então, ele vai compilar todos os códigos necessários em um só arquivo chamado bundle.
E esse arquivo vai ser servido ao cliente, que vai poder rodar o app.
Agora, isso é bem legal, porque anteriormente, no mundo de desenvolvimento web, você tinha que adicionar um tag de script para cada pacote novo que você tivesse.
Você adicionava o script lá no HTML, você adicionava o script src no seu que, pacote moment, por exemplo.
Aí, se você quiser ser outro pacote, outro pessoa, não sei o que dizer, que reacta.
E assim por diante, aí tinha vários scripts, essa era a maneira tradicional que o pessoal usava.
Então, veio o negócio do browserify e comandjs, esse negócio que deu require, e agora a gente tem todo esse sistema de módulos e compilação do bundle.
Isso é bem legal, mas o problema é o quê? Vamos olhar no problema aqui.
Deixa eu ir no navegador. Vamos dar uma olhada nesse diagrama aqui.
Você tem o seu usuário, por exemplo, tem um aplicativo que você serve bundle, né?
Manda a parte no HTML, que contém o script com esse bundle.
E o usuário está no smartphone, dispositivo móvel.
Normalmente, dispositivo móvel pode não ter uma conexão muito estável, pode ser que o usuário tenha uma conexão meio lenta e essas coisas.
Mas agora, se o bundle não for muito grande, está tudo bem, não vai ter muito problema.
Agora, o problema ocorre quando o aplicativo cresce, seu bundle...
Deixa eu clicar aqui, ver...
O seu bundle vai crescer com tempo, né?
O seu aplicativo vai crescer, crescer, crescer, crescer, que fica muito grande, quando você enviar um só arquivo através da rede, né?
Para o seu dispositivo móvel.
Então, para um ponto de vista do usuário, ele vai levar mais tempo para poder baixar o arquivo, especialmente se a conexão for não muito rápida.
Eu fui muito estável, que normalmente é o caso para quem está na luta, né?
Está correndo para lá fora com o dispositivo, não está no desktop.
Então, esse é um grande problema que tem do bundle ficar muito grande e a experiência do usuário não for muito boa.
Então, como resolver esse problema?
É como resolver?
Vamos falar disso, mais disso na próxima.
Ah, está certo?
Então, até lá!


0012-01 Como Fazer Code Splitting com o React - Divisão de Código para Iniciantes

Como Resolver o Problema do Bundle usando Code Splitting - Divisão de Código para Iniciantes

A gente está lá, vamos continuar a falar de CodeSplitting, a divisão de código, vamos
aprender mais sobre isso, como que vai ser a solução para o problema do bundle ficar
muito grande e a experiência do usuário não vai ser muito boa devido ao grande tamanho
do arquivo.
Então vamos começar, eu pus a imagem aqui de um funil, tá?
A imagem desse funil aqui, aqui embaixo aqui dentro do bundle, para ilustrar o problema
aqui, como a gente vai resolver o problema.
Quando você acessa um aplicativo, normalmente você não vê todas as funcionalidades do
aplicativo, não é?
Você só vê assim, o que importa é o usuário vai para sua página, aquele carregamento inicial,
é muito importante para a experiência, primeira experiência do usuário com seu aplicativo,
porque ele quer ver um negócio que não seja muito lento, que você vai dar assim bem
rápido, já apareceu, já tem as coisas que o usuário quer ver lá, mas se seu bundle
for muito grande, vai demorar para o usuário ver, pode ser que ele não fique satisfeito
com a primeira experiência, né?
Aquela primeira experiência é muito importante, então você tem que fazer a optimização para
melhorar esse desempenho do carregamento para iniciar para ser muito rápido.
Note que quando o usuário vai para seu aplicativo pela primeira vez, ele não precisa ver as
funcionalidades do aplicativo que estão lá embaixo do funil.
O que é que o usuário vê?
O usuário vê para seu aplicativo, ele vai estar aqui no topo do funil, ele vê para
o topo do funil e vê essas coisas no topo.
Essas coisas do topo são importantes, porque são essenciais para o seu aplicativo, mas
quando o usuário vai e mexe mais e mais e mais com seu aplicativo, ele vai para baixo
do funil até chegar no fundo, né?
Mas essa parte de depois da primeira nível do funil para baixo, o usuário não precisa
ver na mesma hora que carrega, inicialmente.
Então você pode deixar para carregar essa parte de baixo do funil depois e essa é a
solução usando o code splitting.
Você vai dividir o seu bundle em várias partes e cada parte vai ter as partes mais
profundas desse funil, tá?
Então a gente vai repartir esse bundle e vai ter um bundle principal, mas esse principal
que vai ser para o carregamento inicial vai ter tamanho menor, significamente menor,
porque a gente vai dividir o topo do funil do fundo do funil, da parte de baixo aqui,
tá?
Então isso vai melhorar muito o desempenho, porque o tamanho do bundle vai ser muito,
muito menor, o usuário vai receber o bundle muito mais rápido, nem que tenha uma conexão
ruim, e ele vai ver a coisa na mesma hora, quase na mesma hora e vai ter uma boa experiência,
e ele vai, se quiser, vai para baixo e se aprofunda mais no funil e na maneira que
você aprofunda, o usuário aprofunda mais no funil, mexe mais no seu aplicativo, ele
vai recebendo aquelas partes do bundle, aqueles pedaços que são necessários para ver o
fundo.
Normalmente o usuário, ele, por exemplo, se você repartir o bundle em termos de página,
normalmente o usuário sabe que vai ter uma espera quando você muda de página, embora
que seja uma aplicação de única página, você pode simular essa mudança de rotas,
mudança de rotas, ele espera que tenha alguma espera.
Então uma maneira de fazer code splitting é você fazer o splitting, dividir em cada
rota do seu aplicativo, é a sua maneira.
Você pode ir mais além e fazer o code splitting, não somente de rota, mas de componentes mais
específicos do seu aplicativo, é o code splitting do nível do componente.
No caso do React, se você usar React Router, sabemos que cada rota também é um componente,
então a gente pode fazer o code splitting em qualquer nível que a gente quiser, dependendo
de como você quer aumentar a performance do seu aplicativo.
Então você pode escolher vários níveis de code splitting.
Então essa é a explicação mais básica, só a teoria assim, não se importe muito se
você não entendeu.
Eu acho que se você ver mais na parte prática que a gente vai fazer, vai dar para entender
melhor isso.
Então essa é a divisão de código para poder resolver o problema do bando ser muito grande,
a gente vai dividir o bando em várias partes menores e para o usuário ele só vai receber
aquele bando inicial que aí vai ser muito, muito menor e vai ter melhor experiência porque
vai carregar muito mais rápido.
Então por essa aula é só e até a próxima.


0012-02 Como Resolver o Problema do Bundle usando Code Splitting - Divisão de Código para Iniciantes

Como Instalar e Gerar Projeto com o create-react-app - Aula de Code Splitting

Então vamos continuar para poder, o que você vai precisar?
Vai precisar do node instalado, tá?
Com o NPM.
E a gente vai, primeiro fazer o quê?
A gente vai criar um projeto de React, tá?
Nós vamos fazer desenvolvimento web, React na web.
Depois de gerar o projeto, vamos agitar com o create React app.
Vamos agitar o aplicativo para poder ver as configurações do webpack.
Nós vamos fazer code splitting no React com o webpack, tá?
Então vamos começar aqui no terminal.
Eu estou usando, primeiramente, node versão 10.15.1 com o NPM versão 6.4.1.
Primeira coisa que você deve fazer é instalar o create React app para poder criar um projeto,
gerar um projeto de React de maneira bem simples e rápida.
Você pode dar o NPM install, traço G para instalar o pacote globalmente, create React app, tá?
Eu já instalei, então não vai demorar muito para mim.
Certo, depois de instalar o create React app, você pode gerar o projeto.
Dessa maneira aqui, eu já fiz aqui na outra aba, você vai digitar create React app.
E o nome do projeto, eu dei nome como fazer code splitting.
Porque demora, eu fiz, já fiz anteriormente, tá?
Ele vai fazer tudo isso, não sei o que, vai dizer os comandos, tá?
A gente vai agora, depois de gerar o projeto, que está aqui, como fazer code splitting.
Tá? Vamos ceder o projeto, para a parte do projeto, e eu vou ejetar, usar o NPM Run and React para poder ejetar
e ter as configurações todas explícitas no projeto, porque eu quero ver as mensagens do webpack
para te mostrar o bundle compilado e todas as coisas.
Então eu vou dar NPM Run and React para ejetar esse cara.
Ele vai perguntar, você tem certeza? Vou botar Y, sim.
Ah, o que aconteceu?
Ah, eu tenho uma pasta ali que eu adicionei o projeto, deixa eu mover.
Espera aí.
Está, deixa eu tentar no NPM Run and React.
Sim, pronto.
Não, eu não vou demorar um pouco aqui.
Pronto.
Ejetou. Agora eu estou aqui na parte do projeto, deixa eu fechar esses caras aqui.
E tem a pasta config, webpack.confc.js, tem várias configurações.
Mas não importa muito, o que importa é o comando NPM Start.
Eu vou rodar o NPM Start, já, já, na próxima aula, e a gente vai ver a webpack, a saída do webpack,
que ele mostra no console, para você ver que ele está compilando o bundle.
Tá bom, então, vamos parar aqui e te vejo na próxima aula.


0012-03 Como Instalar e Gerar Projeto com o create-react-app - Aula de Code Splitting

Configurando o Webpack & Dev Server para Aparecer só um Bundle - Aula de Code Splitting

Então vamos continuar e abrir o nosso projeto RodaNPM Star.
Ele vai carregar o servidor de desenvolvimento, Webpack Dev Server,
e vai abrir uma aba no navegador, localhost na porta 3000,
o aplicativo aqui rodando.
Voltando aqui ao terminal, não tem muita saída útil pra gente,
queremos ver o que é que o Webpack está fazendo.
Pra poder fazer isso, a gente tem que mudar a configuração do Webpack Dev Server
pra não ficar quieto, tá? Ficar quieto.
Então vamos aqui, de volta editor de texto,
vai na pasta config, no diretório do projeto,
tem um arquivo chamado Webpack Dev Server, tá?
.config.js
Aí você vai procurar por quiet, que o I é T,
tá no modo quiet, que a gente não quer,
quem a gente quer que ele muda de true pra false,
pra ele poder mostrar alguma coisa quando a gente rodar de novo.
Então vou matar o servidor com o control C,
vou rodar a imprensa de novo, e agora ele vai mostrar a saída do Webpack.
Vou fechar aquela aba, voltar ao terminal,
não acho que ele está esperando até o Bando C compilado aqui.
Tá? Então está aqui, se você rolar pra cima e vai pra essa parte aqui,
depois da WDM no seu Webpack,
todos os anos vai ser um 4.19 para 1.
Você vê que tem várias assets e o tamanho,
muito importante você ver o tamanho de cada recurso,
e o que a gente vai se preocupar é o Js, que é o JavaScript que está aqui.
Nesse caso, o Create React App já faz uns optimizações,
por padrão, mas a gente quer desabilitar isso pra poder ver com mais simplicidade o bundle,
porque ele já está dividindo a divisão de código,
já está sendo aplicado, a gente quer desabilitar isso pra poder aprender a fazer nós mesmos.
Então vamos voltar ao editor de texto,
agora em vez de configurar o Dev Server,
vamos no config.js.
Agora tem muita coisa aqui, a gente não quer saber muitas essas coisas,
exceto que quando ele dá o return da configuração do Webpack,
você tem que procurar por Optimization,
essa configuração a gente não quer,
então vou fechar aqui dessa maneira,
essa aba toda aqui, essa propriedade toda vou comentar.
Comente a propriedade do objeto que cuida a propriedade de Optimization,
e não queremos a optimização porque a gente quer ver fazer nosso próprio Code Splitting.
Então comentei tudo da Optimization.
Com isso, vamos voltar ao terminal e reiniciar o npm start,
eu usei Ctrl C pra matar o servidor,
abriu a nova aba de novo,
esperando o Bando C compilado, pronto,
se você rolar aqui pra cima de novo pra ver os assets,
na hora de que agora só tem um bundle.js,
está em modo de desenvolvimento, tá certo? Development,
então no development, o bundle normalmente é muito, muito maior do que o de produção
porque não tem optimizações pra incompressão, pra diminuir o tamanho.
Então você note que tem o static bar.js, bundle.js,
esse é o cara que tem o nosso código de JavaScript,
tamanho 1.61, tá?
Vamos ver aqui no navegador,
se eu abrir no seu navegador,
abre as ferramentas de desenvolvimento,
no meu caso estou usando Firefox,
e eu vou pra aba de network,
o web developer,
aba de network, no Chrome é a mesma coisa, network,
então nessa aba de network,
eu vou atualizar a página de novo pra poder ver o que a gente recebe,
tem que marcar JS, só quero saber de JS, que é JavaScript,
tem aqui o bundle para JS,
se você não conseguir ver o nome,
você pode clicar e tirar as coisas que você não quer ver,
eu já tinha tirado alguma coisa do domain,
eu acho que eu não quero ver o domain,
então tirei pra poder ver melhor o nome do arquivo,
então clica aqui, tem o bundle, tá?
Colose, deixa eu tirar esse cos.
Tem o bundle aqui, que o nome apareceu, mas tá aqui.
Então esse é o bundle, né, o arquivo que a gente recebe,
pra que tenha o nosso aplicativo,
eu não vou clicar em response,
que vai demorar muito pra carregar,
então tome cuidado quando clicar em response.
Então esse cara,
então a gente já tem aqui o bundle,
e já sabe como ver o bundle que tá recebendo,
na aba network do navegador,
então vamos revisar o que a gente fez nessa aula,
pra poder a gente aprender sobre codes player,
a gente vai começar assim configurando aqui
para o dev server, pra não ser quieto,
quite set pra false, pra poder mostrar no terminal
o que o webpack compilou.
Ele inicialmente faz optimizações,
mas a gente não quer,
ele faz porque a gente quer aprender,
então a gente vai no webpack.conf.js
e comenta toda a propriedade Optimization.
Com isso no terminal vai aparecer só um bundle.js,
quando você roda npm start, pra build de desenvolvimento.
Então por essa aula só e até a próxima.


0012-04 Configurando o Webpack & Dev Server para Aparecer só um Bundle - Aula de Code Splitting

Criando um Botão e Painel para Explicar Como Fazer Code Splitting em React

Depois de configurar o Webpack da Observer para não ficar em modo quieto e o Webpack
para não fazer optimização, vamos iniciar a nossa prática de code splitter aqui.
Vamos ver, vamos para a pasta src do projeto.
Web.jps é o ponto de partida, tá?
Esse aqui é aquela página que aparece.
Deixa eu mostrar aqui.
Então aquela página ali, sr.jps.
A gente recebeu o bundle aqui na aba Network do navegador para js, tá?
Então o bundle não pode ser seteir em megabytes, porque está incluindo o react, tem modo de desenvolvimento.
Ah, vamos ver aqui.
Então vamos para esse app js e remover todas as coisas que a gente não se importa muito com esses caras.
Então remove tudo aqui do...
remove só ponho a div aqui com o nome app.
Não precisa ser ss, não precisa ser vg.
Salvar, ele vai automaticamente atualizar a Apple.
A gente não quer saber muito disso.
Então tem o app lá, vamos criar um componente aqui.
Por exemplo, painel.js.
Vamos importe react, from react, fazer esse componente aqui.
Class painel extends react.component render return.
Vamos botar uma div painel aqui.
Dao export default.
Vamos botar outro div só para botar um conteúdo.
Alguma coisa assim.
Lá do app, eu ponho app num adiv e ponho import painel e ponho painel aqui.
Vamos supor import painel from.bar painel.
Tá, certo?
Deixa eu botar um estilo aqui para painel.
Eu vou usar style, mas não é recomendado.
Dá só para poder fazer o estilo rápido.
Vamos ver.
Background color.
Aqui sem objeto, sim, carno case.
Vou botar 4, 4, 0, 0, 0.
E vou botar color branco.
F, F, F, F, F.
Então temos aqui num app.js.
Vamos supor que você tenha um aplicativo e você põe esse componente painel.
Dessa maneira aqui, o app pack vai pegar importar painel,
vai incluir no bundle.js.
Mas como que a gente faz para fazer code splitting?
Talvez esse painel estivesse, por exemplo, invisível inicialmente.
Por exemplo assim.
Dá o constructor aqui, props, super props.
Vou definir o estado inicial.
Vou dizer painel aberto, false, tá?
Aí só vai mostrar painel, see this.state, painel aberto.
Vou ver a verdadeiro.
Ele mostra painel, sim, não, não vai.
Vou botar um botão aqui, button, type button.
Abrir painel, tá?
Para abrir painel, quando você dá um click,
um click, vou fazer a função no this, um click.
Um click, defini aqui.
Vou dar o set state para abrir painel.
Painel aberto, vou botar só o toggle, tá?
Vou desse.state.painel aberto e vou botar o oposto, tá?
Então deixa eu parar aqui, que eu fiz muito rápido.
Então o que é que eu fiz aqui?
Então eu quero que o painel seja invisível inicialmente.
Para poder controlar se painel aparece ou não,
eu defini essa variável no estado chamado painel aberto,
que inicialmente tem valor false aqui no constructor.
Defini o estado inicial.
Agora eu tenho que fechar esse botão, que eu esqueci.
Eu tenho um botão que se você clicar,
vai chamar a função desse onclick,
que eu defini no próprio, como método do componente.
Essa função, quando clicar,
vai dar o set state, setar o painel aberto para o valor oposto do que era antes.
Nesse caso, de false vira true, se fosse true virava false.
E com isso ele vai abrir o painel quando eu clicar, tá?
Ah, esqueci de dar o binding.
O des está indefinido, porque...
Ou você pode dar o binding aqui no constructor,
ou pode usar o property initialize, tanto faz.
Vou dar o binding no constructor,
des, onclick, é igual a des,
ponto onclick, ponto bind des,
para setar o contexto do des para ser o próprio app,
em vez do botão.
Tá, então, quando eu clicar aqui, abrir, abre ou não?
Tá?
Agora, vamos supor que a gente não queira iniciar esse painel,
inicialmente, talvez o painel...
Esse painel aqui, vamos supor que esteja no...
Não esteja no início do funil,
se lembra daquele exemplo do funil,
quando o usuário acessa o aplicativo pela primeira vez,
ele não vai precisar ver esse painel na mesma hora, tá?
Quando ele inicia no primeiro carregamento.
Talvez ele tenha que fazer muitas, muitas coisas
e navegar no aplicativo,
até chegar um ponto que você já dá para abrir aquele painel.
Então, inicialmente, vamos supor que você não precisa ter esse painel.
Agora, o problema aqui é que o painel está sendo incluído,
esse código do painel,
embora que não seja muita coisa aqui,
poderia ser um código gigante, tá?
Ele está sendo incluído no nosso bundle, ponto j,
está esse aqui, esse cara aqui, tá?
Deixa eu dar...
Deixa eu deslabitar o cache aqui,
eu vou deslabitar o cache só para ele não pegar o cache.
Tá bom? Então,
tem um bundle js aqui...


0012-05 Criando um Botão e Painel para Explicar Como Fazer Code Splitting em React

Como Fazer um Import Dinâmico para Code Splitting em React

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.


0012-06 Como Fazer um Import Dinâmico para Code Splitting em React

Consertando o Problema do Import Dinâmico - Aula de Code Splitting

Vamos aqui ver o seu...
Não clica em port...
E set state o painel...
Está usando export default.
Aqui no app,
quando você setar o painel,
tem que falar painel.default.
Está?
Esqueci disso, que foi exportado como default.
Salvar...
Tentar novamente...
painel.default no set state.
Está bom?
Então ele apareceu o painel.
Vamos ver aqui o que aconteceu.
Está?
Então a gente dá o render, aparece o app,
mas tem um botão, mas não tem o painel,
porque o painel não está aberto,
o painel é aberto e tem valor falso.
Quando você clica no botão, eu chamo onclick.
O onclick vai dar um import dinâmico.
Agora, quem é responsável
para saber que você está querendo fazer code splitter?
É o app pack.
O app pack vai automaticamente saber,
ó, tem um import dinâmico,
então eu vou fazer code splitter aqui.
Então quando ele
você dá onclick, e parecia esse import,
ele vai fazer o pídeo HTTP,
pegar o pedaço do código que contém o painel,
e esse cara retorna uma promessa.
Lida com a promessa com o outro dentro.
E ele retorna o próprio componente aqui.
Aí eu dou o set state armazendo o componente
no estado,
com o mesmo nome,
não se esqueça do default que eu exportei com default.
Panel, painel, ponto default.
E set painel aberto para
toggle, né?
Para set true.
E funcionou.
Olha aqui no Firefox,
quando eu cliquei, apareceu o painel,
e note que ele baixou esse 0.tunc.js, 1.22.
Ilobytes, com o código do painel já aqui.
Aí você pode ver o código do painel está aqui mesmo.
Cadê ele me deixa?
Então painel var painel, não sei o quê.
Está aqui.
Então o código foi extraído do bundle.js,
só está no
chunk 0.tunc.js,
se você quiser conferir aqui
com curl.
Vou pegar aqui o bundle,
se eu baixar de novo para ver se realmente saiu,
foi extraído de lá.
Dá o curl de novo.
curl
traço, ó.
Deixa eu ir para o pasta temporária.
Dá o curl, traço, ó, assim.
Baixou o novo bundle.
Deixa o atum do bundle para abrir.
No novo bundle.
Deixa eu procurar para o painel.
Você nota que tem o import, aquele comentário que a gente tinha feito,
que está dentro do app.js?
Painel aberto painel no, mas não tem
o
código do painel próprio, né?
Não tem.
Então aquele code foi extraído para o 0.tunc.js.
Então a gente fez o nosso primeiro code splitter
usando o import dinâmico, tá?
Isso é muito legal.
Tá?
Agora, isso é legal, mas
o que acontece
se der problema,
se der erro de conexão?
Aí você tem que lidar com o que acontece,
ele não consegue baixar aquele pedaço.
Tá?
E o que acontece enquanto estiver carregando?
Quer que você mostra um spinner?
Certo?
Então tem que levar em consideração essas coisas.
Obviamente, você tem que
ficar fazendo essas coisas e armazenar o componente no estado,
não sei o quê, não sei o quê.
Mas seria legal se a gente tivesse uma maneira mais
talvez eficiente de fazer isso.
Tenha uma maneira de usar o React Lazy, tá?
E a gente vai falar do React Lazy.
Tem aqui na página do code splitter, se quiser dar uma olhada.
Explicação deles, se a gente falar do React Lazy na próxima aula, tá certo?
Então até lá.


0012-07 Consertando o Problema do Import Dinâmico - Aula de Code Splitting

Como Usar o React.lazy para Fazer Import Dinâmico - Aula de Code Splitting

Nesta aula vamos aprender sobre o React Lazy para a gente poder dar o nosso import dinâmico
de componentes usando o CodeSplitting.
Então vamos fazer isso aqui, continuar o nosso aprendizado.
Já fizemos o CodeSplitting usando o import dinâmico dessa maneira aqui.
Se você se lembra, voltar aqui no navegador.
Na aba aqui a gente tem esse componente aqui que inclui esse botão para abrir um painel.
E quando a gente clica ele, baixa esse arquivo 0.tunc.js que é o pedaço de código,
que contém o código desse painel aqui com várias linhas, painel aqui.
Então a gente aprendeu a fazer isso usando import dinâmico.
Quando você clica você dá o import e o import dinâmico retorna uma promessa.
Então você tem que usar o ponto den para poder lidar com essa promessa.
Aí você pega, depois que receber, ele vai fazer o pedido para aquele chunk,
aquele pedaço do código, você vai receber e a gente dê o set state com o painel.default.
Não esquece o ponto default porque o componente foi exportado usando o default.
Aí a gente usa o painel que está dentro do state do componente para poder aqui
renderizar onde o painel estiver aberto.
Agora a gente vai aprender isso. A mesma coisa é set que usando o reactlase.
Quando a gente usar o reactlase, a gente vai tornar um componente preguiçoso, lazy no inglês.
Então vai facilitar essa manobra de code splitting para a gente não ter que fazer o import
e lidar com o den e fazer esse set state e essas coisas.
E manter o painel no state.
Então vamos lá. Então para fazer o reactlase é bem simples.
No local que você quer aqui, você mostra o componente que você quiser.
É só pôr aqui, por exemplo, você tem o painel.
Então eu não vou mais importar pegar o painel do the set state,
eu vou deixar o painel só assim, dessa maneira normal.
E vou lá em cima.
Deixa eu remover isso aqui também, aproveitar.
Remover esse cara.
Lá em cima aqui.
Eu vou retornar.
Vou descomentar aqui esse cara.
Mas agora a gente não vai fazer assim, a gente vai fazer const.
Vai definir o painel como variável.
Agora essa variável aqui, olha só.
Essa variável a gente vai definir, fazer uma atribuição aqui, usando o react.lase.
React.lase.
Agora esse laser é uma função que você tem que passar como argumento.
Outra função, essa função, vamos usar a função de seta.
Tem que retornar o import do componente que a gente vai carregar.
Nesse caso é o painel aqui, eu vou recortar esse cara.
E você vai fazer o import retornar aqui, dessa maneira aqui.
Então você chama o react.lase, passa como argumento a função.
Essa função precisa retornar aquela promessa do import dinâmico.
Então você vai dar um import aqui e retornar essa função.
Aí você usa a variável painel aqui embaixo.
Onde você quer que o componente apareça.
Note que quando você dá o render, chama render, o painel aberto vai estar falso inicialmente.
Por isso não vai renderizar essa parte aqui do código.
O causa disso ele ainda não vai carregar o componente.
O componente só será carregado se essa parte do código for executada.
Isto é, se fosse renderizado dessa maneira aqui.
Então ele está esperando aqui, quando o painel aberto, esse variável de estado, tiver valor verdadeiro.
Ele vai chamar o render com o valor painel aberto verdadeiro.
Vai aqui e o lado direito também será executado.
Então ele vai chamar o componente, renderizar esse componente, preguiçoso, lazy.
E por causa disso ele vai automaticamente acionar aquele carregamento dinâmico
e vai fazer o pedido para obter aquele chunk do servidor.
Com isso a gente não precisa mais do import aqui no onclick.
Eu vou comentar essa linha e a gente só vai precisar dar o set state para poder mudar a flag aqui para botar o painel aberto.
Virar true ou na inicialmente.
Não precisa mais do painel no estado.
Eu vou remover.
Ela está essa linha.
Deixa só assim o set state para mudar a flag para poder acionar esse cara aqui.
No próximo render depois que você clicar o botão.
Então vamos ver se funciona isso.
Eu salvei, ele dá automaticamente carrega.
Vamos clicar no painel.
Deu um erro aqui.
Mas o que aconteceu?
Ah, já sei. Espera aí.
Vamos voltar aqui a network.
Então a gente pegou o chunk, olha aqui o chunk, 0.chunk.
A resposta e realmente ele nos retornou o painel.
Agora o problema é que...
Deixa eu abrir de novo.
O problema é o seguinte.
Já deu um erro aqui.
Dizendo que o componente de react suspendeu na hora do rendering.
Na hora que estava fazendo o render e não tinha uma interface de usuário de alternativa para mostrar na hora.
A gente vai falar de suspense depois.
Mas agora vamos entender o que aconteceu.
Quando você clicar o botão, olha aqui de volta no código,
ele chama a função click.
A com click vai dar o set state.
Muda o painel aberto que é inicialmente falsa daqui.
Vai virar true.
Quando o estado de componente mudou,
ele vai acionar o render para ser chamado novamente.
Ele vai vir aqui render, ser chamado.
Aí ele vai ver que o set state, o this.state painel aberto é true.
Ele vai pegar e acionar o painel aqui.
Aí vai aqui na próxima rendering.
O problema é que o painel vai fazer o pedido para obter aquele chunk de código,
mas leva um tempo para receber a resposta.
Por isso ele vai ter esse problema aqui.
Então vamos ver isso na próxima aula.
Espera um pouco aí.
Dá um tempo e até a próxima.


0012-08 Como Usar o React.lazy para Fazer Import Dinâmico - Aula de Code Splitting

Como Usar o React Suspense para Mostrar Estado de Carregando - Aula de Code Splitting (Lazy)

Estamos de volta pessoal, agora a gente vai falar de suspense.
Então, na aula anterior nós aprendemos sobre React Lazy para a gente poder fazer aquele import dinâmico.
Sem precisar dar o set state armazenar o componente no estado do nosso componente próprio aqui.
Então, agora a gente deu o React Lazy, usamos o React Lazy que retorna esse import dinâmico,
o import dinâmico retorna a promessa, que vai ser lidada com o React Lazy.
Aí a gente põe o componente aqui, o painel, que é freguiçoso, carregado Lazy, de maneira Lazy.
Quando o painel aberto vira verdadeiro, ele vai renderizar os caras,
é certo que ainda não carregou do servidor, não obteu aquele chunk.
Então, leva um tempo para fazer o pedido e receber a resposta.
E por causa desse tempo, entre pedido e a resposta, ele vai dar esse erro que a gente pegou aqui.
Então, ele sugere mesmo usar o suspense, mas o que é que é suspense?
Nada mais nada menos é a maneira da gente mostrar um estado de carregamento para o componente aqui
que vai aparecer o negócio enquanto o componente for carregado.
Normalmente você pode usar, por exemplo, aquela spinner que fica rodando, girando.
Aí, quando você está usando o React Lazy, você normalmente vai usar com o suspense,
o componente suspense, tá?
Então, vamos ver aqui. Então, aqui embaixo, onde você tiver o painel, vou botar um parênteses
para a gente adicionar mais um componente pai, né? Vamos cobrir o painel aqui, o componente pai, chamado suspense.
Agora, o suspense está dentro do pacote do React, então, tem que falar react.suspense.
Se você vai usar mais de uma vez, eu recomendo usar um pouco aqui no importe, mas eu só vou usar uma vez, então deixa assim mesmo.
Aí, o suspense leva essa prop, chamada fallback, que vai ser um componente que você quer que apareça
enquanto o componente lazy estiver carregando.
Por exemplo, pode ser aquele spinner, mas eu não tenho nenhum spinner aqui,
eu vou usar só uma mensagem bem simples dizendo carregando, tá?
Tá bom? Então, esse é o suspense.
Dentro, com os filhos, filhas e filhas do suspense serão componentes preguiçosos, lazy.
Então, esses componentes aqui ainda não estão carregados, não são carregados, ele vai levar um tempo
e enquanto estiver carregando, vai usar esse componente, vai mostrar esse componente que é passado na prop fallback, tá?
Então, vamos salvar e recarregar isso, tentar novamente não ter mais erro, né?
Olha aqui, vou clicar abrir painel e ele abriu.
E você nota que quase a gente nem viu aquela mensagem carregando, né? Foi muito rápido.
Vamos dar um olhado na aba de networkhead, realmente o chunk 0.chunk está aqui e apareceu com o código do painel.
Tá? Então, ele realmente funcionou, mas a gente não viu aquela mensagem ainda.
Então, será que dá alguma maneira de a gente poder visualizar isso?
Vou tentar aqui usar essa parte trodo aqui para mudar.
Vamos ver, eu acho que não vai dar porque ainda... Nem que você use esse cara aqui, talvez seja rápido.
Vamos ver. Eu mudei a minha conexão aqui, no Chrome também tem isso.
É a aba de network, você clica na online e tem várias opções, você pode até adicionar a sua própria opção.
O que eu estou fazendo aqui é para poder a gente simular uma conexão lenta para poder ver se aparece mesmo...
E parece mesmo que é uma mensagem de carregar.
Eu vou mudar agora a conexão para esse, vou clicar abrir painel e realmente apareceu carregando, você viu?
Eu vi, carregando.
Agora que já carregou, não aparece mais, mas eu recarrego aqui.
Sendo limites, porque está tão lento, né?
Agora vou descer ali.
Vamos ver se descer ali.
É rápido.
Então você viu lá? Eu acho que também posso tentar adicionar o time out aqui no lazy?
Essa maneira que eu só faço nisso para poder ver o mensagem carregando.
Resolve. Não precisa saber disso.
Resolve.
Adeia, deixa de ser mesmo.
Então você viu que o suspense leva aquela própria fallback, que vai ser o componente que aparece enquanto o componente preguiça se estiver carregando.
Carregando, viu lá?
Tá bom? Então vamos revisar o que a gente aprendeu.
Antes disso também, você também pode, talvez o pessoal use também dessa maneira aqui, que é o import, que é o retorno implícito, tá?
É a mesma coisa do que eu tinha escrito antes.
Ele está implícitamente retornando essa expressão aqui.
Tá a mesma coisa.
Vou te mostrar aqui, que não deu nenhum problema.
Vamos testar, tá? A mesma coisa.
Então vamos revisar. Aprendemos sobre o componente react lazy.
Essa função react lazy que vai tornar o componente preguiçoso.
A maneira de fazer isso é a seguinte, você chama o react lazy e passa como argumento uma função.
Essa função tem que retornar aquele import dinâmico, tá? Com o caminho do componente.
Aí você atribui esse valor a uma variável, normalmente o mesmo nome do componente.
Aí você usa o componente aqui no, no seu método render, tá?
Aí quando bater no render e quando bater nesse cara aqui, o componente, ele vai automaticamente carregar.
Agora, temos o problema de que, o que vai acontecer enquanto estiver carregando, né?
Componente. Você tem que usar o suspense, react quando suspense,
para poder você mostrar a mensagem ou um spinner de girando e de carregando, tá?
Então você põe os componentes preguiçosos. Não precisa ser só um, pode ser vários, por exemplo, três.
Vários componentes dentro do mesmo suspense.
Põe fallback prop, passa aquele componente de carregando, né?
Aí ele vai mostrar o carregando e quantas essas caras eu estiver carregando.
E esse é o suspense, tá? Com os componentes preguiçosos como filhos, tá?
Então apareceu aí.
Tá bom?
Então, por essa aula é só e até a próxima.


0012-09 Como Usar o React Suspense para Mostrar Estado de Carregando - Aula de Code Splitting (Lazy)

Error Boundary no React para Lidar com Erro no Componente Lazy no Suspense

Olá pessoal, estamos de volta nesta aula, vamos falar de error boundaries, fronteiras de erro
ou limites de erro.
Vamos ao error boundary para poder lidar com erros caso o componente preguiçoso fale
em carregar.
Então se houver erro em carregamento no nosso exemplo do painel que é um componente preguiçoso,
se aquele pedido do chunk, do pedaço de código falhar o que vai acontecer, a gente tem que
lidar com erro.
Então vamos ver aqui, vamos começar, vamos primeiro simular um erro para poder simular
o erro vou fazer o seguinte, eu vou aqui de volta ao menor negador, deixa eu ver aqui,
no Chrome, se você usar o Chrome tem uma opção de dizer offline, mas acho que o Firefox
não tem ou eu não sei onde é, o que é que é esse aqui, então como eu não tenho isso,
mas se vocês vão ao Chrome é só clicar offline e clicar abrir painel para fazer esse
negócio, tá?
Então eu quero usar outra maneira, então outra maneira de fazer isso vai determinar
e vou fazer o seguinte, depois quando tiver aqui o app de arrodão, eu mato o servidor
aqui com control C e eu vou clicar abrir painel, então tudo desapareceu, olhou o console,
ocorreu um erro, falhou ao carregar o chunk, agora isso não é muito legal, o usuário
está usando o seu aplicativo, aí clica lá e tudo, não só aquela parte, mas tudo
desaparece, então não é muito legal, então ele recomenda usar o error boundary, olha
aqui essa mensagem, error boundary são as chamadas fronteiras de erro ou limites de
erro que a gente vai definir aqui para lidar com esse erro, então error boundary é só
um componente normal, é certo que a gente adiciona, tá?
A gente define um método, nesse caso a gente vai definir o método estático get derived
state from error, esse método quando, se for definido em um componente de react, esse
próprio componente se torna um error boundary, gente vai usar esse error boundary, vai mostrar
um mensagem de erro aqui na tela, lá?
Então vamos ver aqui, voltando ao seu, voltando ao código, app.js, você vai fazer o seguinte,
para poder lidar com o erro, você põe e cobre o suspense aqui do seu error boundary,
você qualquer nome, eu vou dizer error boundary, mas pode ser qualquer nome, tá?
Então você tem que cobrir o suspense com o error boundary, importa lá o error boundary,
deixa eu importar aqui, import error boundary, a gente vai definir esse componente já,
from.bar error boundary, então vamos definir agora, já abriaba aqui com os arquivos, eu
vou que dentro da parte da src que o app está, vamos criar outro componente chamado error
boundary.js, agora o error boundary vai ser um componente de react, então vai importar
o react, from react, vamos mudar o export default já na mesma hora, vamos ter que perder
tempo, aí vai dar class, componente de class, vamos chamar error boundary, pode ser qualquer
nome, tá?
Eu vou chamar o error boundary, extends react component, você vê que é um componente
normal, é certo que a gente vai definir um método aqui chamado component, did, opa,
desculpa, não component, did, catch, tem também component, did, catch, normalmente você
pode usar isso para logar coisas, mas eu não vou usar isso, eu vou usar outro, pra poder
se fazer esse error boundary, vou usar o static catch derived state from error, e ele recebe
como um parâmetro, o erro tá, vou botar error aqui em glazeman, pra esse cara, it
tem o método render, tá?
Então esse componente, se não tiver nenhum erro, ele só vai retornar os filhos, now
children, filhos e filhas, então a gente vai dar o return des, do prof, children, que
vem nesse caso aqui, voltando aqui no app, split no app aqui, essa parte de baixo é
o app, antes de ver o S, você vê que o error boundary tem children, filhos, e esses caras
aqui, então se não haver nenhum erro, esse cara aqui vai só retornar esses caras, sem
problemas.
Agora se tiver um erro, if, erro né, a gente vai definir o erro, variável, já já, a
gente vai retornar alguma coisa para lidar com o erro, tá?
Eu vou deixar isso bem simples, só mostrar mensagem que deu erro, tá?
Eu vou retornar, um endive, desenhar de deu erro, agora isso não é muito legal em aplicativos
do mundo real, né?
Então você tem que fazer uma coisa bem mais elegante do que isso, mas é só para demonstrar
o uso do error boundary.
Então você também pode fazer coisa para lidar com o erro, para recuperar esse crash do erro
e várias coisas, tá?
Eu vou só mostrar mensagem, tá?
Agora onde é que vai estar esse erro, né?
A gente vai definir uma variável no estado desse componente, eu vou botar this.state.error,
tá?
Agora se essa variável este devalou true, ele vai mandar essa mensagem em vez de renderizar
esses componentes aqui.
Tá?
Agora vamos definir o estado inicial desse error boundary componente, vamos fazer isso
no constructor, chamo super, props sempre, e define o estado inicial desse.state e vai
lá e põe a variável error que inicialmente vai ser falso que eu não tenho nenhum erro.
Com isso ele vai renderizar inicialmente o desprope child.
E se der erro, né?
Caso esse suspense jogue ou throw o erro aqui, ele vai ser capturado pelo error boundary
e a...
Como é que ele vai saber que o state.error, como é que ele vai mudar esse cara para true,
é verdadeiro, é aqui no getderive.state from error.
Então esse método aqui do error boundary, ele vai ser chamado quando houver um erro,
ele vai capturar aquele erro e daquela captura a gente vai retornar o novo state desse componente,
por isso que se chama getderive.state, obter o estado derivado.
Então a gente vai retornar o estado aqui com o erro sendo true, tá?
Então o estado aqui com o erro sendo true e com isso ele vai dar o render de novo, vai
bater aqui, o erro vai estar verdadeiro e vai retornar deu erro.
Tá certo?
Então vamos salvar esse componente, já esportamos default, sem problemas.
Tá?
Deixa eu mostrar aqui para você ver, definimos o construtor, getderive.state from error,
e assim por diante, note que a gente não usa essa variável, erro se você quiser
o console logo para ver o que é que está nesse error, você pode ver mesmo, mas eu
nem usei mesmo essa variável, tá?
Vai ser o erro que vai ser capturado, tá?
O objeto de erro.
Agora vamos voltar o f.js importamos error boundary, estamos aqui embaixo, já põe o
error boundary cubrindo esses caras, o suspense com o componente lazy.
Vamos salvar, deixa eu rodar o servidor de novo aqui.
Hala brand new, se você tiver o Chrome é só usar aquele toggle de offline que tem
na aba network ou rede, tá?
Eu não sei fazer aqui no 10 Firefox, se você souber fazer isso no Firefox, deixe
comentário.
Então vamos dar o reload, tá aí, vou matar o servidor para simular aquele erro, né,
para falhar, vou clicar abrir painel e reparecer o mensagem de erro em vez do painel, tá?
Então funcionou direitinho, os outros elementos dessa interface de usuário ainda permanecem
na tela e não teve nenhum aparecimento de tudo, não deu crash.
Tá bom, então esse é o como lidar com o erro do componente que foi carregado dinamicamente
com o react lazy que está dentro de um suspense.
Tá bom usando error boundary, error boundary em apenas um componente de react que tem o
método estático getter avstate from error definido.
A gente nem viu o console log aqui, vamos ver.
Então error loading chunks zero build.
Então é aquele erro que falhou ao carregar o chunk.
Então é isso mesmo, tá?
Então é isso por essa aula é só, muito obrigado por assistir, não se esqueça de
se inscrever, ajuda muito ao canal crescer e o apoio, seu apoio ajuda a criar mais
vídeos e aulas, muito obrigado, não se esqueça de clicar também no sino para receber as
notificações com as últimas aulas e os últimos cursos do NVK Mundo Tech.
Muito obrigado e até a próxima.
