Kod bölme ve akıllı yükleme stratejileriyle Next.js uygulamanızı hızlandırma.
Neler öğreneceksiniz?
Bu yayında, farklı kod bölme türleri ve Next.js uygulamalarınızı hızlandırmak için dinamik içe aktarmaları nasıl kullanacağınız 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. Böylece sayfa yükleme süreleri daha kısa olur.
Rotaya dayalı kod bölme iyi bir varsayılan olsa da, bileşen düzeyinde kod bölme yaparak yükleme sürecini daha da optimize edebilirsiniz. Uygulamanızda büyük bileşenler varsa bunları ayrı parçalara ayırmak iyi bir fikirdir. Bu şekilde, kritik olmayan veya yalnızca belirli kullanıcı etkileşimlerinde (bir düğmeyi tıklama gibi) oluşturulan büyük bileşenler geç 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. Yavru köpeği sayfada görüntülemek için uygulama index.js içindeki Puppy bileşenini statik bir içe aktarma ifadesiyle içe aktarır:
import Puppy from "../components/Puppy";
Next.js'in uygulamayı nasıl paketlediğini görmek için DevTools'ta ağ izlemeyi inceleyin:
Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
basın.Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Önbelleği devre dışı bırak onay kutusunu işaretleyin.
Sayfayı tekrar yükleyin.
Sayfayı yüklediğinizde, Puppy.js bileşeni de dahil olmak üzere gerekli tüm kod index.js içinde paketlenir:
Beni tıkla düğmesine bastığınızda yalnızca köpek yavrusu JPEG'si isteği Ağ sekmesine eklenir:
Bu yaklaşımın olumsuz tarafı, kullanıcılar yavru köpeği görmek için düğmeyi tıklamasa bile index.js içinde bulunduğundan Puppy bileşenini yüklemek zorunda kalır. 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ü):
Puppy bileşeni artık yalnızca düğmeye bastığınızda yüklenen ayrı bir parçada (1.js) yer alır:
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ı geç yüklerken, gecikme yaşanması ihtimaline karşı bir yükleme göstergesi sağlamanız önerilir. 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 işleyişini görmek için DevTools'ta yavaş ağ bağlantısı simülasyonu yapın:
Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a
basın.Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Önbelleği devre dışı bırak onay kutusunu işaretleyin.
Veri kullanımı sınırlaması açılır listesinde Hızlı 3G'yi seçin.
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.
SSR içermeyen dinamik içe aktarmalar
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 gerektiğinde bu seçeneği devre dışı bırakabilirsiniz.