O documento discute code splitting no React, que é dividir o código da aplicação em vários arquivos menores para melhorar o desempenho carregando apenas o necessário para cada página. Isso é implementado usando lazy loading e a função lazy do React para importar componentes de forma preguiçosa, e o componente Suspense para exibir uma mensagem enquanto os componentes são carregados.

1. Code Splitting
no React

2. Empacotamento de Arquivos:
O que é? Ferramentas?
● A maioria das aplicações que utilizam a biblioteca React terão seus
arquivos empacotados utilizando ferramentas como, por exemplo:
Webpack, Rollup, Browserify.
Como funciona o empacotamento (Bundling)?
● O processo de empacotamento é o processo onde todos arquivos
importados/usados no projetos são unidos em um único arquivo.
Este chamado de pacote (Bundle).
● Este pacote carrega a aplicação inteira de uma vez.

3. Code Splitting: O que é? Quais
os benefícios de usar?
● O Code Slitting se trata nada mais do que dividir o
código.
● Dividir o código favorece drasticamente o desempenho
da sua aplicação, pois, dessa forma, te permite carregar
na aplicação somente o necessário ao usuário.

4. Code Splitting: Implementação
Basicamente, seria transformar seu único arquivo .js em vários outros
pequenos arquivos .js, divididos geralmente por componentes.
main.js
home.js
a.js
b.js
c.js
● Lazy Loading (carregamento preguiçoso).

5. Code Splitting: Implementação
● Importações: não podemos mais importá-los diretamente através dos
modules (módulos).
● Devemos utilizar a função lazy que o React nos oferece, dessa forma,
devemos importar ela.
import React, { lazy } from 'react'
const ComponentA = lazy(() => import('../components/ComponentA'))
● Nossos componentes que desestruturamos anteriormente devem ser
variáveis que receberão o componente através da função lazy

6. Code Splitting:
const HomeComponent = lazy(() =>
import('../components/HomeComponent'))
const ComponentA = lazy(() => import('../components/ComponentA'))
const ComponentB = lazy(() => import('../components/ComponentB'))
const ComponentC = lazy(() => import('../components/ComponentC'))

7. Code Splitting: Componente Suspense
import React, { Suspense, lazy } from 'react'
const Routes = () => (
<Router history={ history }>
<Switch>
<Suspense fallback={ <h1>Rendering...</h1> }>
<Route component={ HomeComponent } exact path="/"/>
<Route component={ AComponent } exact path="/a"/>
<Route component={ BComponent } exact path="/b"/>
<Route component={ CComponent } exact path="/c"/>
</Suspense>
</Switch>
</Router>
)

8. Code Splitting: Componente Suspense
Porque foi necessário o uso do Suspense?
● Ele foi criado pensando em melhorar a usabilidade de nossa
aplicação.
● Enquanto uma request está sendo feita ou um componente não
está pronto para ser renderizado, nós mostramos um Spinner para
o usuário.
● Dessa maneira conseguimos dizer para ele que a aplicação está
processando.
● O suspense através do fallback recebe um componente que será
mostrado enquanto está sendo feita a renderização do
componente.

9. Code Splitting
Obrigada!!