Kod bölme ve akıllı yükleme stratejileriyle Next.js uygulamanızı hızlandırma.
Neler öğreneceksiniz?
Bu yayında, farklı kod türleri açıklanmaktadır bölme ve nasıl kullanılacağını dinamik içe aktarmaları kullanarak Next.js uygulamalarınızı hızlandırabilirsiniz.
Rota tabanlı ve bileşen tabanlı kod bölme
Varsayılan olarak Next.js, JavaScript'inizi her bir rota için ayrı parçalara ayırır. Kullanıcılar uygulamanızı yüklediğinde, Next.js yalnızca ilk rotadır. Kullanıcılar uygulamada gezinirken parçaları getirir emin olmanız gerekir. Rotaya dayalı kod bölme, ve bir defada ayrıştırılması ve derlenmesi gereken komut dosyası miktarıdır. Bu da daha hızlı sayfa yüklenme süreleri.
Rotaya dayalı kod bölme işlemi varsayılan olarak iyi bir seçim olsa da, yolu kod bölmesini içeren bir yükleme sürecidir. Geniş küçük parçalara ayırmanız önerilir. Bu şekilde, kritik olmayan veya yalnızca belirli cihazlarda oluşturulan büyük bileşenler, kullanıcı etkileşimleri (bir düğmeyi tıklama gibi) geç yüklenebilir.
Next.js, dinamik import() değerini destekler,
JavaScript modüllerini (React bileşenleri dahil) içe aktarmanıza olanak tanır
dinamik olarak yüklemeli ve her içe aktarma işlemini ayrı bir parça halinde yüklemelidir. Bu sayede
bileşen düzeyinde kod bölmeyi destekler ve kaynak yüklemeyi kontrol etmenizi sağlar.
Kullanıcıların, sitenin yalnızca dönüşüm gerçekleştiren
bölümünde ihtiyaç duydukları kodu indirmesini
YouTube'u kullanabilirsiniz. Next.js'de bu bileşenler sunucu tarafında oluşturulur
(SSR)
varsayılan olarak.
Dinamik içe aktarmanın işleyiş şekli
Bu yayın, örnek bir uygulamanın basit bir ekran görüntüsünden oluşan tek düğmeli sayfada. Düğmeyi tıkladığınızda sevimli bir yavru köpek görürsünüz. Farklı uygulamanın her sürümünde gezinirken dinamik içe aktarma işlemlerinin statikten farklı içe aktarmalar fikir edinmiş oldunuz.
Uygulamanın ilk sürümünde yavru köpek components/Puppy.js adresinde yaşıyor. Alıcı:
sayfada yavru köpeği görüntülediğinde, uygulama Puppy bileşenini
Statik içe aktarma ifadesiyle birlikte index.js:
import Puppy from "../components/Puppy";
Next.js'nin uygulamayı nasıl paketlediğini görmek için Geliştirici Araçları'nda ağ izlemeyi inceleyin:
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
.Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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 dahil olmak üzere gerekli tüm kod
bileşeni, index.js içinde paketlenmiştir:
Beni tıkla düğmesine bastığınızda, yalnızca yavru köpek JPEG isteği Ağ sekmesine eklenir:
Bu yaklaşımın olumsuz tarafı, kullanıcılar düğmeyi tıklamasa bile
bakıyorsa, onlar için Puppy bileşenini yüklemeleri gerekir çünkü
index.js. Bu küçük örnekte, bu büyük bir konu değildir ve
büyük bileşenlerin yalnızca tek bir yükleme sırasında yüklenmesi genellikle
gerekir.
Şimdi uygulamanın ikinci sürümüne göz atın. Statik içe aktarma
dinamik içe aktarmayla değiştirilir. Next.js, next/dynamic içerir. Bu da
Sonraki'deki herhangi bir bileşen 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ğ izlemeyi incelemek için ilk örnekteki adımları uygulayın.
Uygulamayı ilk yüklediğinizde yalnızca index.js indirilir. Bu sefer
0,5 KB daha küçük (37,9 KB'tan 37,4 KB'a düştü)
Puppy bileşeninin kodunu içermez:
Puppy bileşeni artık yalnızca yüklenen ayrı bir parçada (1.js) yer alıyor
tıkladığınızda:
Gerçek uygulamalarda, bileşenler genellikle çok fazla daha büyük olabilir ve geç yükleme ilk JavaScript yükünüzü yüzlerce kilobayt azaltabilir.
Özel yükleme göstergeli dinamik içe aktarmalar
Kaynakları geç yüklerken bir yükleme göstergesi sağlamak iyi bir uygulamadır
göz önünde bulundurun. Next.js'de, bunun için bir
dynamic() işlevine ek bağımsız değişken eklemek:
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ı:
Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran
.Geliştirici Araçları'nı açmak için "Control+Üst Karakter+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.
Throttling açılır listesinden Hızlı 3G'yi seçin.
Beni tıkla düğmesine basın.
Artık düğmeyi tıkladığınızda bileşenin ve uygulamanın yüklenmesi biraz zaman alıyor "Yükleniyor..." iletisini görüntüler. mesajını görebilirsiniz.
SSR'si olmayan dinamik içe aktarmalar
Bir bileşeni yalnızca istemci tarafında oluşturmanız gerekiyorsa (örneğin,
widget'ında bulunur), ssr seçeneğini false değerine ayarlayarak bunu yapabilirsiniz:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Sonuç
Next.js, dinamik içe aktarma desteğiyle birlikte, size bileşen düzeyinde kod sunar bölme işlemi, JavaScript yüklerinizi en aza indirebilir ve uygulamayı geliştirebilir. yükleme süresidir. Tüm bileşenler varsayılan olarak sunucu tarafında oluşturulur ve oluşturduğunuz gerektiğinde bu seçeneği devre dışı bırakabilir.