Quand devriez-vous utiliser la fonctionnalité de chargement différé de React ?

Question

J'ai une application assez volumineuse et la taille du bundle est maintenant d'environ 2 Mo (environ 3 morceaux). Pour améliorer les temps de chargement, j'ai décidé de commencer à utiliser le relativement nouveau React Lazy.

Voici un exemple de chargement différé :

const Wizard = React.lazy(() => import('./components/wizards/Wizard'));

Je comprends l'idée générale du concept, mais j'ai encore du mal à comprendre quel est l'inconvénient, à part devoir parfois attendre un peu pour que des morceaux se chargent.

D'après ce que j'ai lu, je n'ai aucune raison d'utiliser des importations régulières.

Ma question est la suivante : dois-je utiliser le chargement différé pour chaque importation de composant dans mon application ? Pourquoi? pourquoi pas?

J'aimerais connaître votre avis.

Answer 1

Je n’ai pas encore commencé à l’utiliser. Mais je pense que l’approche la plus optimiste consiste à importer régulièrement tous les composants dont vous avez besoin sur la page d’accueil. Tous les autres itinéraires qui ne sont pas la page d'accueil doivent utiliser le chargement différé. C’est le courant général de ma pensée.

Answer 2

Non, pas requis pour chaque composant. Il est logique de l’utiliser dans chaque mise en page ou page. Un bon point de départ est le routage. La plupart des internautes sont habitués aux transitions de pages qui prennent un certain temps à se charger. Vous avez également tendance à restituer la page entière en même temps, de sorte que vos utilisateurs sont moins susceptibles d'interagir avec d'autres éléments de la page en même temps.

Par exemple, vous créez une application d'agrégation d'actualités. Votre candidature se compose de deux pages comme NewsList和NewsItemPage. Chaque page contient plusieurs composants différents. Dans cet exemple, il est logique d’utiliser des composants de chargement différé pour une page sur deux. Il chargera ensuite les composants dont il a besoin.

L'application en a un de plusHeader和Footer. Ils doivent être chargés de la manière habituelle. Parce qu'ils sont utilisés sur chaque page et que le chargement de manière asynchrone n'a pas de sens.

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

import Header from './components/Header';
import Footer from './components/Footer';

const NewsList = lazy(() => import('./pages/NewsList'));
const NewsItemPage = lazy(() => import('./pages/NewsItemPage'));

const App = () => (
  <Router>
    <Header />
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={NewsList}/>
          <Route path="/news/:id" component={NewsItemPage}/>
        </Switch>
      </Suspense>
    <Footer />
  </Router>
);