Bilakah anda harus menggunakan ciri pemuatan malas React?

Question

Saya mempunyai aplikasi yang agak besar dan saiz berkas kini kira-kira 2MB (kira-kira 3 ketul). Untuk menambah baik masa muat, saya memutuskan untuk mula menggunakan React Lazy yang agak baharu.

Ini ialah contoh pemuatan malas:

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

Saya faham idea umum konsep itu, tetapi saya masih menghadapi kesukaran untuk memahami kelemahannya selain kadang-kadang perlu menunggu seketika untuk ketulan dimuatkan.

Berdasarkan apa yang saya baca, saya tidak mempunyai sebab untuk menggunakan import biasa.

Soalan saya ialah: patutkah saya menggunakan pemuatan malas pada setiap import komponen dalam aplikasi saya? kenapa? kenapa tidak?

Saya ingin mendengar pendapat anda.

Answer 1

Saya belum mula menggunakannya lagi. Tetapi saya fikir pendekatan yang paling optimistik ialah melakukan import tetap bagi semua komponen yang anda perlukan di halaman utama. Mana-mana laluan lain yang bukan halaman utama harus menggunakan pemuatan malas. Ini adalah pemikiran umum yang saya miliki.

Answer 2

Tidak, tidak diperlukan untuk setiap komponen. Ia hanya masuk akal untuk menggunakannya dalam setiap susun atur atau halaman. Tempat yang baik untuk bermula ialah penghalaan. Kebanyakan orang di web terbiasa dengan peralihan halaman yang mengambil masa tertentu untuk dimuatkan. Anda juga cenderung untuk memaparkan semula keseluruhan halaman sekaligus, jadi pengguna anda kurang berkemungkinan berinteraksi dengan elemen lain pada halaman pada masa yang sama.

Sebagai contoh, anda sedang mencipta aplikasi pengagregatan berita. Permohonan anda terdiri daripada dua halaman seperti NewsList和NewsItemPage. Setiap halaman mengandungi beberapa komponen yang berbeza. Dalam contoh ini, masuk akal untuk menggunakan komponen memuatkan malas untuk setiap halaman lain. Ia kemudiannya akan memuatkan komponen yang diperlukannya.

Apl ini mempunyai satu lagiHeader和Footer. Mereka harus dimuatkan dengan cara biasa. Kerana ia digunakan pada setiap halaman dan memuatkan secara tidak segerak tidak masuk akal.

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