Quand devriez-vous utiliser la fonctionnalité de chargement différé de React ?
P粉976737101
P粉976737101 2023-08-24 23:11:02
0
2
481
<p>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. </p> <p>Voici un exemple de chargement différé : </p> <pre class="brush:php;toolbar:false;">const Wizard = React.lazy(() => import('./components/wizards/Wizard'));</pre> <p>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. </p> <p>D'après ce que j'ai lu, je n'ai aucune raison d'utiliser des importations régulières. </p> <p><strong>Ma question est la suivante : dois-je utiliser le chargement différé pour chaque importation de composant dans mon application ? Pourquoi? pourquoi pas? </strong></p> <p>J'aimerais connaître votre avis. </p>
P粉976737101
P粉976737101

répondre à tous(2)
P粉790819727

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.

P粉481035232

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 NewsListNewsItemPage. 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 plusHeaderFooter. 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>
);
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!