Como melhorar o desempenho de aplicações React com Code Splitting

3 min readMay 15, 2023

O desempenho é um fator crítico no sucesso de qualquer aplicação web. Uma aplicação rápida e responsiva pode proporcionar uma excelente experiência para o seu usuário, enquanto uma aplicação lenta pode gerar frustrações. Uma abordagem importante para melhorar o desempenho de suas aplicações React é o Code Splitting.

Mas que é Code Splitting?

Code Splitting é uma técnica de otimização que divide seu código em vários pacotes menores ou “chunks”. Esses chunks são carregados sob demanda, ajudando a reduzir o tamanho do arquivo inicial e o tempo de carregamento da sua aplicação.

https://twitter.com/swyx/status/1158369440326721537/photo/1

Por que usar Code Splitting?

Reduz o tempo de carregamento inicial: Carregue apenas o código necessário para a página atual, você pode diminuir significativamente o tempo de carregamento da sua aplicação.
Melhora a experiência do usuário: Com chunks menores e carregamento sob demanda, os usuários experimentam uma aplicação mais rápida e responsiva.
Otimização de recursos: Code Splitting permite que você carregue apenas os recursos necessários em vez de carregar toda a aplicação de uma vez.

Implementando Code Splitting no React:

O React facilita a implementação do Code Splitting através do React.lazy() e Suspense.

Na prática: Code Splitting com React.lazy() e Suspense

Suponha que temos uma aplicação com várias rotas e queremos fazer o Code Splitting para cada uma delas.

A estrutura de arquivos é a seguinte:

src/
 ├── pages/
 │ ├── Home.js
 │ ├── About.js
 │ └── Contact.js
 ├── App.js
 └── index.js

1. Primeiro, vamos importar o React.lazy() e o Suspense em nosso arquivo App.js:

import React, { lazy, Suspense } from 'react';

2. Em seguida, usamos o React.lazy() para carregar nossos componentes de rota sob demanda:

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

3. Agora, envolvemos nossas rotas em um componente Suspense e definimos um fallback para ser exibido enquanto o componente é carregado:

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Contact = lazy(() => import('./pages/Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Carregando...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Agora os componentes serão carregados sob demanda, melhorando significativamente o tempo de carregamento inicial.

Algumas dicas

Você pode utilizar o Code Splitting não apenas para componentes de rota, mas também para outros componentes pesados ou que são carregados apenas em certas condições.
Monitore o tamanho dos seus chunks com ferramentas como o Webpack Bundle Analyzer para garantir que você está otimizando corretamente sua aplicação.

É dessa forma que otimizo minhas aplicações React 🚀

Ah e eu criei um repositório no GitHub com o código utilizado nesse post, se você quiser dar uma olhada mais a fundo é só clicar nesse link.

Bom, é isso, espero que tenha gostado! E se tiver alguma sugestão deixe aí nos comentários 💬

Se gostou, dê 1 ou 50 claps 👏

Obrigado pela leitura!

Me acompanhe por aí! 😜

Portfólio: vinniciusgomes.com
GitHub: @vinniciusgomes
LinkedIn: @vinniciusgomes