Next.js'de dinamik içe aktarmalarla kod bölme

Kod bölme ve akıllı yükleme stratejileriyle Next.js uygulamanızı hızlandırma.

Milica Mihajlija
Milica Mihajlija

Bu yayında, farklı kod bölme türleri ve Next.js uygulamalarınızı hızlandırmak için dinamik içe aktarma işlemlerinin nasıl kullanılacağı açıklanmaktadır.

Rotaya ve bileşene dayalı kod bölme

Next.js, varsayılan olarak JavaScript'inizi her rota için ayrı parçalara ayırır. Kullanıcılar uygulamanızı yüklediğinde Next.js yalnızca ilk rota için gereken kodu gönderir. Kullanıcılar uygulamada gezinirken diğer rotalarla ilişkili parçaları getirir. Rotaya dayalı kod bölme, aynı anda ayrıştırılması ve derlenmesi gereken komut dosyası miktarını en aza indirir. Bu da sayfa yükleme sürelerinin kısalmasına neden olur.

Rotaya dayalı kod bölme iyi bir varsayılan ayar olsa da bileşen düzeyinde kod bölmeyle yükleme işlemini daha da optimize edebilirsiniz. Uygulamanızda büyük bileşenler varsa bunları ayrı parçalara bölmek iyi bir fikirdir. Bu sayede, kritik olmayan veya yalnızca belirli kullanıcı etkileşimlerinde (ör. bir düğmenin tıklanması) oluşturulan büyük bileşenler, gecikmeli yüklenebilir.

Next.js, JavaScript modüllerini (React bileşenleri dahil) dinamik olarak içe aktarmanıza ve her içe aktarma işlemini ayrı bir parça olarak yüklemenize olanak tanıyan dinamik import() özelliğini destekler. Bu sayede, bileşen düzeyinde kod bölme elde edersiniz ve kullanıcıların yalnızca görüntüledikleri site bölümü için ihtiyaç duydukları kodu indirmeleri amacıyla kaynak yüklemeyi kontrol edebilirsiniz. Next.js'de bu bileşenler varsayılan olarak sunucu tarafında oluşturulur (SSR).

Dinamik içe aktarma işlemi

Bu yayında, tek düğmeli basit bir sayfadan oluşan örnek bir uygulamanın çeşitli sürümleri yer almaktadır. Düğmeyi tıkladığınızda sevimli bir köpek yavrusu görürsünüz. Uygulamanın her sürümünde dinamik içe aktarma işlemlerinin statik içe aktarma işlemlerinden nasıl farklı olduğunu ve bunlarla nasıl çalışacağınızı göreceksiniz.

Uygulamanın ilk sürümünde köpek components/Puppy.js'te yaşıyor. Uygulama, sayfadaki yavruyu görüntülemek için Puppy bileşenini index.js içine statik bir içe aktarma ifadesiyle aktarır:

import Puppy from "../components/Puppy";

Next.js'in uygulamayı nasıl paketlediğini görmek için DevTools'ta ağ izlemeyi inceleyin:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.

  3. sekmesini tıklayın.

  4. Önbelleği devre dışı bırak onay kutusunu işaretleyin.

  5. Sayfayı tekrar yükleyin.

Sayfayı yüklediğinizde Puppy.js bileşeni dahil olmak üzere gerekli tüm kod index.js içinde paketlenir:

index.js, app.js, webpack.js, main.js, 0.js ve dll (dinamik bağlantı kitaplığı) dosyasını gösteren DevTools Ağ sekmesi.

Beni tıkla düğmesine bastığınızda yalnızca köpek yavrusu JPEG'si isteği sekmesine eklenir:

Düğme tıklandıktan sonra DevTools Ağ sekmesi. Aynı altı JavaScript dosyası ve bir resim gösterilmektedir.

Bu yaklaşımın dezavantajı, kullanıcılar köpeği görmek için düğmeyi tıklamasalar bile index.js'a dahil olduğu için Puppy bileşenini yüklemeleri gerekmesidir. Bu küçük örnekte bu durum büyük bir sorun teşkil etmez ancak gerçek uygulamalarda büyük bileşenleri yalnızca gerektiğinde yüklemek genellikle büyük bir iyileştirmedir.

Şimdi, statik içe aktarmanın dinamik içe aktarmayla değiştirildiği uygulamanın ikinci bir sürümüne göz atın. Next.js, Next'teki tüm bileşenler için dinamik içe aktarma işlemlerini kullanmayı mümkün kılan next/dynamic özelliğini içerir:

import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";

// ...

const Puppy = dynamic(import("../components/Puppy"));

Ağ izlemesini incelemek için ilk örnekteki adımları uygulayın.

Uygulamayı ilk kez yüklediğinizde yalnızca index.js indirilir. Bu sefer Puppy bileşeninin kodunu içermediği için 0,5 KB daha küçüktür (37,9 KB'dan 37,4 KB'a düştü):

index.js hariç aynı altı JavaScript dosyasını gösteren DevTools Ağı.Artık 0, 5 KB daha küçüktür.

Puppy bileşeni artık yalnızca düğmeye bastığınızda yüklenen ayrı bir parçada (1.js) yer alır:

Düğme tıklandıktan sonra DevTools Ağ sekmesi. Ek 1.js dosyası ve dosya listesinin alt kısmına eklenen resim gösterilmektedir.

Gerçek uygulamalarda bileşenler genellikle çok daha büyüktür ve bunları gecikmeli olarak yüklemek, ilk JavaScript yükünüzü yüzlerce kilobayt azaltabilir.

Özel yükleme göstergesi içeren dinamik içe aktarma işlemleri

Kaynakları gecikmeli olarak yüklerken gecikme olması ihtimaline karşı bir yükleme göstergesi sağlamak iyi bir uygulamadır. Next.js'de bunu dynamic() işlevine ek bir bağımsız değişken ekleyerek yapabilirsiniz:

const Puppy = dynamic(() => import("../components/Puppy"), {
  loading
: () => <p>Loading...</p>
});

Yükleme göstergesinin nasıl çalıştığını görmek için DevTools'ta yavaş ağ bağlantısı simülasyonu yapın:

  1. Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a tam ekran basın.

  2. Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.

  3. sekmesini tıklayın.

  4. Önbelleği devre dışı bırak onay kutusunu işaretleyin.

  5. Veri kullanımı sınırlaması açılır listesinde Hızlı 3G'yi seçin.

  6. Beni tıkla düğmesine basın.

Artık düğmeyi tıkladığınızda bileşenin yüklenmesi biraz zaman alır ve bu sırada uygulamada "Yükleniyor…" mesajı gösterilir.

Metin içeren koyu renkli bir ekran

SSR olmadan dinamik içe aktarma

Bir bileşeni yalnızca istemci tarafında oluşturmanız gerekiyorsa (ör. sohbet widget'ı) ssr seçeneğini false olarak ayarlayarak bunu yapabilirsiniz:

const Puppy = dynamic(() => import("../components/Puppy"), {
  ssr
: false,
});

Sonuç

Next.js, dinamik içe aktarma desteğiyle bileşen düzeyinde kod bölme özelliği sunar. Bu özellik, JavaScript yüklerinizi en aza indirebilir ve uygulama yükleme süresini iyileştirebilir. Tüm bileşenler varsayılan olarak sunucu tarafında oluşturulur ve bu seçeneği gerektiğinde devre dışı bırakabilirsiniz.