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

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:

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

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

  3. sekmesini tıklayın.

  4. Önbelleği devre dışı bırak onay kutusunu seçin.

  5. 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:

Şu altı JavaScript dosyasını gösteren Geliştirici Araçları Ağ sekmesi: index.js, app.js, webpack.js, main.js, 0.js ve dll (dinamik bağlantı kitaplığı) dosyası.

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

Düğme tıklandıktan sonra, aynı altı JavaScript dosyası ve bir resmin gösterildiği Geliştirici Araçları Ağı sekmesi.

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:

Aynı altı JavaScript dosyasını gösteren Geliştirici Araçları Ağı ancak index.js artık 0, 5 KB daha küçük.

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

Ek 1.js dosyasını ve dosya listesinin altına eklenen resmi gösteren Geliştirici Araçları Ağı sekmesi.

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ı:

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

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

  3. sekmesini tıklayın.

  4. Önbelleği devre dışı bırak onay kutusunu seçin.

  5. Throttling açılır listesinden Hızlı 3G'yi seçin.

  6. 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.

Metnin yer aldığı karanlık bir ekran

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.