Kod bölme ve akıllı yükleme stratejileriyle Next.js uygulamanızı hızlandırma
Yayınlanma tarihi: 8 Kasım 2019
Farklı kod bölme türleri ve Next.js uygulamalarınızı hızlandırmak için dinamik içe aktarmaları kullanma hakkında bilgi edinin.
Rotaya dayalı ve bileşene dayalı kod bölme
Next.js, varsayılan olarak JavaScript'inizi her rota için ayrı parçalara böler. 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. Rota tabanlı kod bölme, aynı anda ayrıştırılması ve derlenmesi gereken komut dosyası miktarını en aza indirerek sayfa yükleme sürelerinin kısalmasını sağlar.
Rota tabanlı kod bölme iyi bir varsayılan olsa da bileşen düzeyinde kod bölme ile yükleme sürecini 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üğmeyi tıklama) oluşturulan büyük bileşenler geç yüklenir.
Next.js, dinamik import() özelliğini destekler. Bu özellik, 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ır. Bu, bileşen düzeyinde kod bölme olanağı sunar ve kaynak yüklemeyi kontrol etmenizi sağlar. Böylece kullanıcılar, sitenin görüntüledikleri bölümü için yalnızca ihtiyaç duydukları kodu indirir. Next.js'te bu bileşenler varsayılan olarak sunucu tarafında oluşturulur (SSR).
Dinamik içe aktarmaları kullanma
Bu yayında, tek düğmeli basit bir sayfadan oluşan örnek 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 ilerlerken dinamik içe aktarmaların statik içe aktarmalardan nasıl farklı olduğunu ve bunlarla nasıl çalışılacağını göreceksiniz.
Uygulamanın ilk sürümünde yavru köpek components/Puppy.js'da yaşıyor. Uygulama, sayfada yavru köpeği göstermek için Puppy bileşenini index.js'ye 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 Geliştirici Araçları'nda ağ izini inceleyin:
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. 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 işaretleyin.
Sayfayı tekrar yükleyin.
Sayfayı yüklediğinizde Puppy.js bileşeni de dahil olmak üzere gerekli tüm kodlar index.js içinde paketlenir:
Beni tıkla düğmesine bastığınızda Ağ sekmesine yalnızca köpek yavrusu JPEG'si isteği eklenir:
Bu yaklaşımın dezavantajı, kullanıcılar yavru köpeği görmek için düğmeyi tıklamasa bile Puppy bileşeninin index.js içinde yer alması nedeniyle yüklenmesi gerektiğidir. Bu küçük örnekte bu durum büyük bir sorun olmasa da gerçek dünya uygulamalarında büyük bileşenleri yalnızca gerektiğinde yüklemek genellikle büyük bir iyileşme sağlar.
Şimdi de uygulamanın ikinci sürümüne göz atın. Bu sürümde statik içe aktarma, dinamik içe aktarmayla değiştirilmiştir. Next.js, next/dynamic içerir. Bu sayede Next'teki tüm bileşenler için dinamik içe aktarmalar kullanmak mümkündür:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Ağ izini incelemek için ilk örnekteki adımları uygulayın.
Uygulamayı ilk yüklediğinizde yalnızca index.js indirilir. Bu kez Puppy bileşeninin kodu dahil edilmediği için 0,5 KB daha küçük (37,9 KB'tan 37,4 KB'a düştü):
Puppy bileşeni artık yalnızca düğmeye bastığınızda yüklenen ayrı bir parça olan 1.js içinde yer alıyor:
Gerçek dünya uygulamalarında bileşenler genellikle çok daha büyük olur ve bunları geç yüklemek, ilk JavaScript yükünüzü yüzlerce kilobayt azaltabilir.
Özel yükleme göstergesiyle dinamik içe aktarmalar
Kaynakları geç yüklediğinizde, gecikme olması ihtimaline karşı bir yükleme göstergesi sağlamanız iyi bir uygulamadır. Next.js'te 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 DevTools'ta yavaş ağ bağlantısını simüle edin:
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. 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 işaretleyin.
Sınırlama açılır listesinde Hızlı 3G'yi seçin.
Beni tıklayın düğmesine basın.
Şimdi düğmeyi tıkladığınızda bileşenin yüklenmesi biraz zaman alıyor ve bu sırada uygulamada "Yükleniyor…" mesajı gösteriliyor.
SSR olmadan 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ç
Dinamik içe aktarmalar için destek sunan Next.js, bileşen düzeyinde kod bölme özelliği sayesinde JavaScript yüklerinizi en aza indirmenize ve uygulama yükleme süresini kısaltmanıza yardımcı olur. Tüm bileşenler varsayılan olarak sunucu tarafında oluşturulur ve bu seçeneği gerektiğinde devre dışı bırakabilirsiniz.