Resumo da Aula sobre Code Splitting no React

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á!