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ın nasıl kullanılacağı açıklanmaktadır.
Rota tabanlı ve bileşen tabanlı kod bölme
Varsayılan olarak, Next.js JavaScript'inizi her rota için ayrı parçalara ayırır. Kullanıcılar uygulamanızı yüklediklerinde, Next.js yalnızca ilk yol için gereken kodu gönderir. Kullanıcılar uygulamada gezinirken diğer rotalarla ilişkili parçaları getirir. Rota tabanlı kod bölme, bir defada ayrıştırılması ve derlenmesi gereken komut dosyası miktarını en aza indirerek sayfa yükleme sürelerini kısaltır.
Rota tabanlı kod bölme iyi bir varsayılan olsa da bileşen düzeyinde kod bölme işlemini kullanarak 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 ş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 bir içe aktarmayı ayrı bir parça olarak yüklemenize olanak tanıyan dinamik import() özelliğini destekler. Bu, size bileşen düzeyinde kod bölme olanağı sağlar ve kaynak yüklemesini kontrol edebilmenizi sağlar. Böylece, kullanıcılar yalnızca sitenin görüntüledikleri bölümü için ihtiyaç duydukları kodu indirebilirler. Next.js'de bu bileşenler varsayılan olarak sunucu tarafında oluşturulur (SSR).
Dinamik içe aktarma iş başında
Bu yayın, tek düğmeli basit bir sayfadan oluşan örnek bir uygulamanın çeşitli sürümlerini içerir. Düğmeyi tıkladığınızda sevimli bir köpek yavrusu görürsünüz. Uygulamanın her sürümünde ilerlerken, dinamik içe aktarmaların statik içe aktarmalardan ne kadar farklı olduğunu ve bunlarla nasıl çalışılacağını göreceksiniz.
Bu yavru köpek, uygulamanın ilk sürümünde components/Puppy.js adlı evde yaşıyor. Uygulama, yavru köpeği sayfada görüntülemek için Puppy bileşenini index.js ürününe statik bir import ifadesiyle içe aktarır:
import Puppy from "../components/Puppy";
Next.js uygulamasının uygulamayı nasıl gruplandırdığını görmek için Geliştirici Araçları'nda ağ izlemeyi inceleyin:
Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Önbelleği devre dışı bırak onay kutusunu seçin.
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, Ağ sekmesine yalnızca yavru yavru JPEG isteği 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 yer aldığı için Puppy bileşenini yüklemek zorunda olmasıdır. Bu küçük örnekte bu pek de önemli değildir. Ancak gerçek dünyadaki uygulamalarda, büyük bileşenleri yalnızca gerektiğinde yüklemek çoğu zaman büyük bir iyileştirmedir.
Şimdi, statik içe aktarmanın dinamik içe aktarma ile değiştirildiği, uygulamanın ikinci bir sürümüne göz atın. Next.js, Next içindeki herhangi bir bileşen için dinamik içe aktarmaların kullanılabilmesini sağlayan next/dynamic özelliğini içerir:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Ağ izlemeyi incelemek için ilk örnekteki adımları uygulayın.
Uygulamayı ilk kez yüklediğinizde yalnızca index.js indirilir. Puppy bileşeninin kodunu içermediğinden bu sefer 0,5 KB daha küçüktür (37,9 KB'den 37,4 KB'ye düşmüştür):
Puppy bileşeni artık yalnızca düğmeye bastığınızda yüklenen 1.js adlı ayrı bir parçada yer alıyor:
Gerçek dünyada, bileşenler genellikle çok daha büyüktür ve geç yükleme, ilk JavaScript yükünüzü yüzlerce kilobayt azaltabilir.
Özel yükleme göstergesine sahip dinamik içe aktarmalar
Kaynakları geç yüklediğinizde, gecikme olması durumunda bir yükleme göstergesi sağlamak iyi bir uygulamadır. Next.js'de, dynamic() işlevine ek bir bağımsız değişken sağlayarak bunu yapabilirsiniz:
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
Yükleme göstergesinin nasıl çalıştığını görmek için Geliştirici Araçları'nda yavaş ağ bağlantısının simülasyonunu yapın:
Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a
basın.Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
Ağ sekmesini tıklayın.
Önbelleği devre dışı bırak onay kutusunu seçin.
Kısıtlama açılır listesinden Hızlı 3G'yi seçin.
Beni tıkla düğmesine basın.
Şimdi düğmeyi tıkladığınızda bileşenin yüklenmesi biraz zaman alır ve uygulama bu sırada "Yükleniyor..." mesajını görüntüler.
SSR olmadan dinamik içe aktarmalar
Bir bileşeni yalnızca istemci tarafında (örneğin, bir sohbet widget'ı) oluşturmanız gerekiyorsa ssr seçeneğini false şeklinde ayarlayarak bunu yapabilirsiniz:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Sonuç
Next.js, dinamik içe aktarma desteğiyle, JavaScript yüklerinizi en aza indiren ve uygulama yükleme süresini iyileştirebilen bileşen düzeyinde kod bölme olanağı sunar. Tüm bileşenler varsayılan olarak sunucu tarafında oluşturulur ve gerektiğinde bu seçeneği devre dışı bırakabilirsiniz.