Fractionnement de code dans React

Qu'est-ce que le fractionnement de code et comment l'introduire dans une application React

Les applications JavaScript modernes peuvent être assez énormes en termes de taille de bundle. Vous ne voulez pas que vos utilisateurs aient à télécharger un package de 1 Mo de JavaScript (votre code et les bibliothèques que vous utilisez) juste pour charger la première page, n'est-ce pas? Mais c'est ce qui se passe par défaut lorsque vous expédiez une application Web moderne construite avec le regroupement Webpack.

Ce bundle contiendra du code qui pourrait ne jamais s'exécuter car l'utilisateur s'arrête uniquement sur la page de connexion et ne voit jamais le reste de votre application.

Le fractionnement de code consiste à ne charger que le JavaScript dont vous avez besoin au moment où vous en avez besoin.

Cela améliore:

  • les performances de votre application
  • l'impact sur la mémoire, et donc l'utilisation de la batterie sur les appareils mobiles
  • la taille téléchargée en KiloBytes (ou MegaBytes)

React 16.6.0, publié en octobre 2018, a introduit un moyen d'effectuer le fractionnement de code qui devrait remplacer chaque outil ou bibliothèque précédemment utilisé:React.lazyetLe suspense.

React.lazyetSuspenseforment le moyen idéal pour charger paresseusement une dépendance et ne la charger que lorsque cela est nécessaire.

Commençons avecReact.lazy. Vous l'utilisez pour importer n'importe quel composant:

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <TodoList /> </div> ) }

le composant TodoList sera ajouté dynamiquement à la sortie dès qu'il sera disponible. Webpack créera un bundle séparé pour celui-ci et se chargera de le charger si nécessaire.

Suspenseest un composant que vous pouvez utiliser pour envelopper n'importe quel composant chargé paresseusement:

import React from 'react'

const TodoList = React.lazy(() => import(’./TodoList’))

export default () => { return ( <div> <React.Suspense> <TodoList /> </React.Suspense> </div> ) }

Il prend soin de gérer la sortie pendant que le composant chargé différé est extrait et rendu.

Utilisez sonfallbackprop pour générer un JSX ou une sortie de composant:

...
      <React.Suspense fallback={<p>Please wait</p>}>
        <TodoList />
      </React.Suspense>
...

Tout cela fonctionne bien avec React Router:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const TodoList = React.lazy(() => import(’./routes/TodoList’)) const NewTodo = React.lazy(() => import(’./routes/NewTodo’))

const App = () => ( <Router> <React.Suspense fallback={<p>Please wait</p>}> <Switch> <Route exact path="/" component={TodoList} /> <Route path="/new" component={NewTodo} /> </Switch> </React.Suspense> </Router> )

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: