Code Splitting com React lazy e Suspense

Dessa vez, quero deixar registrado uma dica bem legal que envolve Code Splitting. Ainda não será um conteúdo mais aprofundado sobre o tema, mas já ajuda a entender a importância do uso de lazy e Suspense ao importar as páginas das rotas.

Veja esse exemplo:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { CssBaseline } from '@material-ui/core';

import Home from '~/pages/Home';
import Login from '~/pages/Login';

function App() {
  return (
    <>
      <CssBaseline />
      <BrowserRouter>
          <Switch>
            <Route path="/login" component={Login} />
            <Route component={Home} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    </>
  );
}

export default App;

Por enquanto, configuração simples de rota usando react-router-dom.

Os imports de Home e Login serão carregados mesmo que estejamos na rota de /login sem ter passado pela rota / (Home).

Aí que surge a "necessidade" de usar o lazy com o Suspense. Enquanto o React lazy faz os imports dinamicamente (de acordo com a necessidade), o React Suspense exibe alguma informação (um componente de progresso, por exemplo) até que a página seja exibida.

Vamos às alterações:

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { CssBaseline, LinearProgress } from '@material-ui/core';

const Home = lazy(() => import('~/pages/Home'));
const Login = lazy(() => import('~/pages/Login'));

function App() {
  return (
    <>
      <CssBaseline />

      <BrowserRouter>
        <Suspense fallback={<LinearProgress />}>
          <Switch>
            <Route path="/login" component={Login} />
            <Route component={Home} />
          </Switch>
        </Suspense>
      </BrowserRouter>
    </>
  );
}

export default App;

Perceba, em negrito, os imports que foram usados:

• import React, { lazy, Suspense } from 'react';
• import { CssBaseline, LinearProgress } from '@material-ui/core';

O lazy e o Suspense (React) já foi explicado, de forma resumida, para o que serve. O LinearProgress é um componente do material-ui para dar o efeito de carregamento da página.

Passando o componente <Suspense fallback={}> dentro do BrowserRouter (react-router-dom), ao navegar pelas rotas, só será carregado o import específico e, visualmente, vai aparecer uma barra de progresso (LinearProgress) até que a página esteja carregada 100%.

Provavelmente trarei mais conteúdo de Code Splitting por aqui, mas como dica rápida, acredito que seja suficiente.

Ah, já ia esquecendo... Se você tem configurado o ESLint, talvez o seu editor (meu caso, VS Code) fique reclamando desse trecho: const Home = lazy(() => import('~/pages/Home'));.

Instale o babel-eslint em modo desenvolvimento e adicione-o no seu arquivo de configuração do ESLint (.eslintrc.js)...

yarn add babel-eslint -D

... configure (arquivo .eslintrc.js):

// ...

parser: 'babel-eslint',
plugins: [...],
rules: {...}

// ...

Até mais!