React ile Tembel Yükleme Rehberi

Giriş

Büyük React uygulamaları geliştirirken genellikle birçok resim ve video kullanır, üçüncü taraf paketleri/kütüphaneleri kurar, API çağrıları yapar ve çeşitli başka şeyler yaparız. Bu, doğal olarak uygulamamızı yüklemek için gereken süreyi artırır ve büyük bir paket boyutuyla sonuçlanır ve bu da kötü bir kullanıcı deneyimine katkıda bulunur. Bu nerede yavaş yüklenme yerine gelir. İçeriği yüklememizi sağlar tam zamanında, hemen önce uygulamada görüntülenecektir.

Hâlâ görüş alanı dışındayken içeriği önceden yüklemekten kaçınabilir ve tüm kaynakları görünümdeki içeriğe odaklayabiliriz.

Bu kılavuzda, nasıl kullanılacağına bakacağız React.lazy() ve React.Suspense herhangi bir ek kitaplık yüklemeye gerek kalmadan kod bölmeyi işlememize olanak tanıyan tembel yükleme ve kod bölme işlevselliğini uygulamak.

Tembel Yükleme nedir?

Bir React web uygulamasını başlattığımızda, genellikle tüm uygulamayı bir kerede paketler, tüm web uygulaması sayfaları, resimler, içerik ve bizim için çok daha fazlası dahil olmak üzere her şeyi yükleyerek, potansiyel olarak yavaş yükleme süresine ve genel olarak düşük performansa neden olur. içeriğin boyutu ve o sırada internet bant genişliği.

Yavaş yüklenme belirli bileşenleri yalnızca ihtiyaç duyulduğunda yüklememize olanak tanır. Tipik olarak, biz de gerçekleştiririz kod bölme içerikle de tembel yüklenebilen mantıksal bileşenlere dönüştürün.

Örneğin, tıklandığında çeşitli kaynaklardan çok sayıda bilgi görüntüleyen bir pano sayfamız varsa, bu bileşenleri ve sayfaları gecikmeli olarak yüklemek her zaman en iyisidir, böylece yalnızca kullanıcı tarafından ihtiyaç duyulduğunda veya istendiğinde yüklenirler.

Not: Büyük boyutlu paketlerle ilişkili performans sorunlarından kaçınma genel amacı ile dinamik olarak yüklenebilen birden çok pakete büyük bir kod paketi dağıtma işlemi olarak bilinir. kod bölme. Bu, uygulamamızdaki kod miktarını azaltmadan gerçekleştirilir.

Özetle, tembel yükleme, bileşenleri veya öğeleri isteğe bağlı olarak oluşturmamıza, uygulamamızı daha verimli hale getirmemize ve daha iyi bir kullanıcı deneyimi sunmamıza olanak tanır.

Not: Tek Sayfa Başvuruları (SPA'lar) tüm sayfaları ve içeriği tek bir belge/sayfa içinde içerecek şekilde tasarlanmıştır. Bu nedenle, SPA'ları geliştirirken tembel yükleme özellikle kullanışlıdır.

React'te Tembel Yükleme Nasıl Uygulanır?

Şimdiye kadar tembel yüklemenin ne olduğunu ve uygulanmasının neden önemli olduğunu gördük. Şimdi, kod bölmeyi ve tembel yüklemeyi uygulamayı kolaylaştıran iki React özelliğini kullanarak, bunu React uygulamalarımızda nasıl uygulayabileceğimize bakalım – Tepki. tembel() ve Tepki.Gerilim.

React.lazy() oluşturmamızı sağlayan bir işlevdir. dinamik içe aktarma normal bileşenlerle aynı şekilde. yanında dinamik içe aktarma kullanma React.lazy() bir bileşeni ekranda görüntülenmeden hemen önce içe aktarmamızı sağlar. Unutulmaması gereken önemli bir şey, React.lazy() bir işlevi argüman olarak kabul eder - bu işlev dinamik import() onun vücudunda.

React.Suspense geri dönüşü belirtmemizi sağlar pervane olarak kullanılacak bir yer tutucu içeriği alan yükleme göstergesi tüm tembel bileşenler yüklenirken.

İçe aktarılan bileşenlerimizde tembel yüklemeyi nasıl uygulayabileceğimize ve ardından sayfaların biz onlara gidene kadar yüklenmemesi için onu rotalarımızda nasıl uygulayabileceğimize bakarak başlayalım.

Başlamak

Diyelim ki React uygulamamız var ve About bileşen içine Home:

import AboutUs from './About';

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};

export default Home;

Artık kullanarak tembel yükleme uygulayabiliriz. React.lazy():

import React from 'react';


const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <AboutUs />
      </div>
   );
};
export default Home;

Not: React.lazy() bu şekilde kullanıldığında bir döndürür Promise nesne. Bu söz, içinde tembelce yüklemek istediğimiz bir React bileşeni içeren bir modüle çözümleniyor. default ihracat.

Kullanarak tembel yükleme uyguladık React.lazy(), ancak yukarıdaki kod her zaman bir hata söyleyerek bizim “React component suspended while rendering, but no fallback UI was specified”. Bu, bileşeni şu şekilde sararak düzeltilebilir: React.Suspense'ler fallbackz ve daha önce açıkladığımız gibi yedek aksesuarların eklenmesi:

import React from 'react';
const AboutUs = React.lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <React.Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </React.Suspense>
      </div>
   );
};
export default Home;

Not: Yedek destek, orijinal içerik yüklenmeden önce bir bileşenin gösterilmesini sağlayabilir.

Ek olarak, karar verebiliriz yıkmak kodu daha temiz ve daha okunaklı hale getirmek için React içe aktarma:

import { lazy, Suspense } from 'react';
const AboutUs = lazy(() => import('./About'));

const Home = () => {
   return (
      <div className="App">
         <h1>Home Page</h1>
         <Suspense fallback={<div>Loading...</div>}>
            <AboutUs />
         </Suspense>
      </div>
   );
};
export default Home;

Şimdiye kadar, ithal bileşenlerimizde tembel yüklemenin nasıl uygulanacağını gördük. Şimdi React router ile yönlendirme yaparken rotalarımızda nasıl uygulayacağımızı görelim.

React Router ile Tembel Yükleme Nasıl Uygulanır?

Tembel yönlendirme, aslında çok fazla içeriğe sahip olan ve uygulamanızın yükleme süresini yavaşlatabilecek rotalar için iyi bir uygulamadır. React rotaları için tembel yükleme uygulamak, dinamik olarak içe aktarılan bileşenleri tembel yüklerken daha önce yaptığımızla hemen hemen aynıdır.

Tembel yükleme React rotaları, bir bileşeni yalnızca gerektiğinde dinamik olarak içe aktarmayı ifade eder. Örneğin, uygulamamızda iki rotamız ve bu yolları temsil eden iki bileşenimiz olduğunu varsayalım. Bahsedilen yönlendirmeyi aşağıdaki şekilde uygularsak, her bileşen yalnızca ilgili rotaya gittiğimizde yüklenecektir:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Products = lazy(() => import('./Products'));

function App() {
   return (
      <BrowserRouter>
         <Suspense fallback={<div>Loading...</div>}>
            <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/products" element={<Products />} />
            </Routes>
         </Suspense>
      </BrowserRouter>
   );
}
export default App;

Sonuç

Bu kılavuzda, tembel yükleme ve kod bölmenin ne olduğunu, nasıl uygulanacağını ve tembel yüklemeyi uygulamak için en iyi yerin rotalar olduğunu öğrendik. Bu, büyük miktarda içeriğe sahip sayfalarla uğraşırken daha yavaş yükleme süresine neden olabilecek şekilde tüm sayfanın bir kerede oluşturulmasını önler.