Resumo sobre Code Splitting

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.