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.

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>
);