React Lazy Loading'i Anlamak

Önce kelimeyi parçalayarak anlayalım

Tembel – istekli değil, yükleme – kodu tarayıcıya indirme.

Tembel yükleme – bir süre kodu indirmeye veya yüklemeye istekli olmama.

Herhangi bir şeyi anlamak veya öğrenmek için iki soruya cevap vermemiz gerekir, yani Neden? Nasıl?

Tembel yüklemenin neden gerekli olduğunu anlayalım.

Uygulamayı her yüklediğimizde, ilk yükleme sırasında, uygulamanın büyük bir kod tabanı varsa, tüm kodu yüklemek veya indirmek zaman alır. Bu, kötü bir kullanıcı deneyimine neden olur.

Bu sorunu çözmek için, gerekli olana kadar bazı kodları yüklemeyen tembel yükleme, böylece ilk yükleme sırasında yalnızca yüklenmesi gereken bileşenler indirilir ve istenmeyen bileşenler yüklenmez.

React'te tembel yükleme nasıl elde edilir?

Javascript'te dinamik içe aktarma adlı bir kavram vardır, burada içe aktarma işlevini yürüttüğümüzde (içe aktarma bir işlev değildir, yani İşlev prototipini miras almaz), çözüldüğünde gerekli dışa aktarılan verileri döndüren bir Söz verir.

Bu dinamik içe aktarma kavramı, React.lazy işlevinde kullanılır.

React'te, içine bir geri arama işlevi alan tembel bir işlev vardır. Bu geri arama işlevinde dinamik içe aktarma kullanıyoruz.

Sözdizimi aşağıdaki gibidir.

const ExportedComponent = React.lazy(() => import(yol));

Ancak dinamik içe aktarma zaman uyumsuzdur, bu nedenle, doğrudan ExportedComponent'i kullanırsak hataya neden olabilir, çünkü zaman uyumsuz tembel işlev bir söz döndürür ve Promise şu şekilde kullanılamaz:

Bileşen, Bu nedenle, Suspense adlı bir bileşen kullanıyoruz ve gerekli bileşen yüklenmediğinde işlemek için bir bileşen alan bir geri dönüş desteğine sahip.

Sözdizimi aşağıdaki gibidir.

<React.Suspense fallback='loading'> <ExportedComponent /> </ React.Suspense>

Çözüm

Lazy Loading, kod tabanı çok büyük olduğunda çok kullanışlıdır ve performansı iyileştirmede çok yardımcı olur.

Yavaş yükleme için en son React Syntax'ın kullanımı çok basittir.