Resumo da Prática de Code Splitting

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...