e
sv

Next.js ile dinamik içe aktarma ve kod bölme

avatar

Yazılım Method

  • e 0

    Mutlu

  • e 0

    Eğlenmiş

  • e 0

    Şaşırmış

  • e 0

    Kızgın

  • e 0

    Üzgün

giriiş

Üretim ortamlarında performansı optimize etmek bazen zorlu bir görev olabilir. Hatalar kötü UX ile yavaş web sayfalarına neden olduğundan, site performansında ince ayar yapılması göz ardı edilemez. Bu siteler yavaş yüklenme eğilimindedir, yavaş oluşturulan resimlere sahiptir ve uzun vadede, çoğu kullanıcı içeriğin açılmasını beklemek istemeyeceğinden, site ziyaretçilerinin hemen çıkma oranlarının artmasına neden olur.

Bu öğreticide, bir Next.js uygulamasında site performansını hızlandırmak için farklı kalıpları ele alacağız.

Hedefler ve ön koşullar

Bu makalenin sonunda okuyucular, bir Next.js web uygulamasında performansı nasıl en üst düzeye çıkarabileceklerini net bir şekilde anlamış olacaklar. Aşağıdakileri ele alacağız:

Bu makaleyi takip etmek için Next.js çerçevesi hakkında önceden bilgi sahibi olmak gerekir.

Dinamik içe aktarma ve kod bölme nedir?

Kod bölme olarak da bilinen dinamik içe aktarma, JavaScript kod paketlerinin daha sonra bir araya getirilip site performansını büyük ölçüde artırmak için bir uygulamanın çalışma zamanına yüklenen daha küçük parçalara bölme uygulamasına atıfta bulunur.

JavaScript'teki statik içe aktarmalara yükseltme olarak geliştirilmiştir; bu, içe aktarma sözdizimini kullanarak bir JavaScript modülünün en üst düzeyinde modüller veya bileşenler için içe aktarma eklemenin standart yoludur.

Bu yaygın olarak kullanılan bir yöntem olsa da, özellikle aşağıdaki gibi durumlarda performans optimizasyonu söz konusu olduğunda bazı dezavantajlar vardır:

  • Daha büyük paket boyutu oluşturan ve derleme işlemi gerekli tüm dosyaları tek bir pakette derlediği için daha uzun yükleme süreleriyle sonuçlanan büyük kod tabanları
  • Sayfa yüklemesini tetiklemek için bir gezinme menüsü öğesine tıklamak gibi belirli kullanıcı eylemleri gerektiren web sayfaları. Burada, gerekli sayfa yalnızca gezinme kriterleri karşılandığında oluşturulur ve bileşenler statik olarak içe aktarıldığında yavaş bir ilk sayfa yüklemesini tetikleyebilir.

Dinamik içe aktarmaların statik içe aktarmalardan farkı nedir?

Statik içe aktarmaların aksine, dinamik içe aktarmalar, kod bölme olarak bilinen bir yöntem uygulayarak çalışır. Kod bölme, kodun, modüllerin dinamik olarak yüklendiği, bir ağaç biçimi kullanılarak paralel olarak düzenlenen çeşitli paketlere bölünmesidir – modüller yalnızca gerektiğinde içe aktarılır ve JavaScript paketine dahil edilir. Kod ne kadar çok bölünürse, paket boyutu o kadar küçük olur ve sayfa o kadar hızlı yüklenir.

Bu yöntem, web sayfasının çalışma zamanında dinamik olarak yüklenen birden çok paket oluşturur. Dinamik içe aktarmalar, satır içi işlev çağrıları olarak yazılan içe aktarma ifadelerini kullanır.

Bir karşılaştırmaya bakalım. Uygulamamıza bir navigasyon bileşeni almak istediğimizi varsayalım; bir gezinme bileşeni için bir statik ve dinamik içe aktarma örneği aşağıda gösterilmiştir:

Statik içe aktarma:

 Nav'i './components/Nav' dosyasından içe aktar
varsayılan işlevi dışa aktar Home() {
  dönüş (
    <div>
      <Gezin/>
    </div>
  )
}

Dinamik içe aktarma:

 "sonraki/dinamik"ten dinamiği içe aktar;
"tepki" den { Gerilim } içe aktar;
varsayılan işlevi dışa aktar Home() {
  const Navigasyon = dinamik(() => import("./components/Nav.js"), {
    şüphe: doğru,
  });
  dönüş (
    <div>
      <Suspense yedeği={<div>Yükleniyor...</div>}>
        <Navigasyon />
      </Gerilim>
    </div>
  );
}

Burada, gezinme bileşeni, import() bloğunda belirtilen göreli kısmına sahiptir. next/dynamic import() argümanında şablon değişmezlerinin veya değişkenlerinin kullanılmasına izin vermediğini unutmayın.

Ayrıca, react/suspense , içe aktarılan bileşen kullanılabilir olana kadar görüntülenen belirli bir geri dönüş öğesine sahiptir.

Next.js'de dinamik içe aktarmanın avantajları

Dinamik içe aktarma uygulamasının bir sonucu olarak site performansını optimize etmek, sırayla aşağıdaki site avantajlarıyla sonuçlanacaktır:

  • Daha hızlı sayfa yükleme: Hedef kitleniz işleri hızlı bir şekilde halletmek istediğinden ve yavaş web sayfalarına takılıp kalmayacağından, bir web sitesinin içeriği yükleme ve görüntüleme hızı çok önemlidir.
    • Dinamik içe aktarmalar, görüntü yükleme süreleri üzerinde de olumlu bir etkiye sahiptir
  • Düşük hemen çıkma oranları: Kullanıcıların siteyle etkileşime girmeden web sayfanızdan çıkma oranını ifade eden hemen çıkma oranı, genellikle yavaş yükleme sürelerini gösterir (ve bundan kaynaklanır). Daha düşük bir hemen çıkma oranı genellikle daha hızlı site performansı anlamına gelir
  • İyileştirilmiş site etkileşim süresi: Bu, TTI veya Etkileşim Süresi ile ilgilidir; bu, bir kullanıcının bir işlem istediği zaman ve kullanıcının bir sonuç aldığı zaman arasındaki zaman aralıklarıdır. Bu etkileşimler, bağlantıları tıklamayı, sayfalarda gezinmeyi, bir arama alanına girdi girmeyi, bir alışveriş sepetine ürün eklemeyi vb. içerebilir.
  • Daha iyi site dönüşüm oranları: Daha fazla kullanıcı, iyi optimize edilmiş bir web sitesini kullanmaktan memnun oldukça, dönüşüm sağlama olasılıkları daha yüksek olacaktır.

Tüm bu avantajlarla birlikte, muhtemelen dinamik içe aktarmayı uygulamanızda nasıl kullanacağınızı düşünüyorsunuz. O halde asıl soru, bir Next.js uygulamasında dinamik içe aktarma ve kod bölmeyi nasıl uygulayabiliriz? Sonraki bölüm, bunu nasıl başarabileceğinize ilişkin ayrıntılı adımları gösterir.

Next.js'de dinamik içe aktarma ve kod bölme uygulama

Next.js, bir Sonraki uygulamada, next/dynamic modül aracılığıyla, yukarıda gösterildiği gibi dinamik içe aktarmalar oluşturmayı kolaylaştırır. next/dynamic modül, React bileşenlerinin geç yükleme içe aktarmalarını uygular ve React Lazy üzerine kuruludur.

Ayrıca, uygulamanın bileşenleri ihtiyaç duyulana kadar ertelemesine izin vermek içinReact Suspense kitaplığını kullanır, böylece daha hafif JavaScript yapıları nedeniyle ilk yükleme performansını iyileştirir.

Adlandırılmış dışa aktarmaları dinamik olarak içe aktarma

Bu makalenin başlarında, next/dynamic kullanarak bir bileşeni içe aktarmayı gösterdik. Ancak başka bir dosyadan dışa aktarılan işlevler veya yöntemler için dinamik içe aktarmalar da yapabiliriz. Bu, aşağıdaki şekilde gösterilmiştir:

 React'i 'tepkiden' içe aktar

dışa aktarma işlevi SayWelcome() {
  dönüş (
    <div>Başvuruma hoş geldiniz</div>
  )
}
const SayHello = () => {
  dönüş (
    <div>Merhaba De</div>
  )
}
varsayılan SayHello'yu dışa aktar

Yukarıdaki kodda, SayWelcome adlı bir bileşenimiz ve SayHello adlı bir içe aktarma adlı bir bileşenimiz var. Aşağıda gösterildiği gibi, yalnızca SayWelcome yöntemi için dinamik açık bir içe aktarma yapabiliriz:

 "sonraki/dinamik"ten dinamiği içe aktar;
"tepki" den { Gerilim } içe aktar;
varsayılan işlevi dışa aktar Home() {
  const SayHoş Geldiniz = dinamik(
    () => import("./components/SayHello").then((res) => res.SayWelcome)
  );
  dönüş (
    <div>
      <Suspense yedeği={<div>Yükleniyor...</div>}>
        <Hoş Geldiniz Deyin />
      </Gerilim>
    </div>
  );
}

Yukarıdaki kod SayHello bileşenini içe aktarır ve ardından SayWelcome dışa aktarımını döndürür.

Birden çok bileşeni dinamik olarak içe aktarma

UserDetails ve UserImage bileşenlerimiz olduğunu varsayalım. Her iki bileşeni de aşağıdaki gibi içe aktarabilir ve görüntüleyebiliriz:

 'sonraki/dinamik'ten dinamiği içe aktar

const ayrıntılar = dinamik(() => içe aktar('./components/UserDetails'))
const image = dinamik(() => import('./components/UserImage'))

işlev Kullanıcı Hesabı() {
  dönüş (
    <div>
      <h1>Profil Sayfası</h1>
      <detaylar />
      <resim />
    </div>
  )
}

const Uygulama = () => {
  dönüş (
    <>
      <Kullanıcı Hesabı />
  )
    </>
}

varsayılan Uygulamayı dışa aktar

Yukarıdaki kodda, UserDetails ve UserImage bileşenleri için dinamik içe aktarmalar ekledik, ardından bu bileşenleri tek bir bileşende bir araya getirdik, UserAccount . Son olarak, uygulamada UserAccount bileşenini döndürdük.

İstemci tarafı işleme için dinamik içe aktarmalar

next/dynamic modül ile, içe aktarılan bileşenler için sunucu tarafı oluşturmayı devre dışı bırakabilir ve bunun yerine bu bileşenleri istemci tarafında oluşturabiliriz. Bu, özellikle çok fazla kullanıcı etkileşimi gerektirmeyen veya API'ler gibi harici bağımlılıkları olan bileşenler için uygundur. Bu, bileşeni içe aktarırken ssr özelliğini false olarak ayarlayarak yapılabilir:

 'sonraki/dinamik'ten dinamiği içe aktar

const HeroItem = dinamik(() => import('../components/HeroItem'), {
  ssr: yanlış,
})

const Uygulama = () => {
  dönüş (
    <>
      <KahramanÖğe />
  )
    </>
}

Burada, HeroItem bileşeninin sunucu tarafı oluşturma false olarak ayarlanmıştır, dolayısıyla bunun yerine istemci tarafında oluşturulur.

Kitaplıklar için dinamik içe aktarma

Yerel bileşenleri içe aktarmanın yanı sıra, dış bağımlılıklar için dinamik bir içe aktarma da ekleyebiliriz.

Örneğin, bir kullanıcı istediğinde bir API'den veri almak için Axios fetch kullanmak istediğimizi varsayalım. Axios için dinamik bir içe aktarma tanımlayabilir ve aşağıda gösterildiği gibi uygulayabiliriz:

 stilleri "../styles/Home.module.css" dosyasından içe aktarın;
"tepki" den { React, useState } içe aktar;

varsayılan işlevi dışa aktar Home() {
  const [arama, setSearch] = useState("");
  let [response, setResponse] = useState([]);
  const api_url = `https://api.github.com/search/users?q=${search}&per_page=5`;

  dönüş (
    <div className={styles.main}>
      <giriş
        tür = "metin"
        placeholder="Github Kullanıcılarını Ara"
        değer={arama}
        onChange={(e) => setSearch(e.target.value)}
      />

      <düğmesi
        onClick={async() => {
          // eksen bağımlılığını dinamik olarak yükle
          const axios = (ithalat bekleniyor("axios")).default;
          const res = bekle axios.get(api_url).then((res) => {
            setResponse(res);
          });

        }}
      >
        GitHub kullanıcılarını arayın
      </button>

      <div>
        <h1>{search} Sonuçlar</h1>
        <ul>
          {yanıt?.veri ? (
            yanıt && yanıt?.data.items.map((item, index) => (
              <span anahtarı={dizin}>
                <p>{item.login}</p>
              </span>
            ))
          ) : (
            <p>Sonuç Yok</p>
          )}
        </ul>
      </div>
    </div>
  );
}

Yukarıdaki kodda GitHub'da kullanıcı adlarını aramak için bir girdi alanımız var. Giriş alanının durumunu yönetmek ve güncellemek için useState() Kancasını kullanıyoruz ve Search for GitHub users düğmesine tıklandığında Axios bağımlılığını dinamik olarak içe aktarılacak şekilde ayarladık.

Yanıt döndürüldüğünde, bunun haritasını çıkarırız ve adları giriş alanına girilen arama sorgusuna karşılık gelen beş kullanıcının usernames adlarını görüntüleriz.
Aşağıdaki GIF, yukarıdaki kod bloğunu çalışırken gösterir:

Kitaplıkları bir Next.js uygulamasına dinamik olarak içe aktarma

Çözüm

Bu makalede dinamik içe aktarma/kod bölmeyi, avantajlarını ve bunun bir Next.js uygulamasında nasıl kullanılacağını öğrendik.

Genel olarak, web sitenizin yüklenmesi için gereken süreyi kısaltmak istiyorsanız, dinamik içe aktarma ve kod bölme olmazsa olmaz bir yaklaşımdır. Dinamik içe aktarma, web sitenizin görselleri varsa veya gösterilecek sonuçlar kullanıcı etkileşimlerine bağlıysa, performansını ve kullanıcı deneyimini önemli ölçüde artıracaktır.

Next.js ile Dinamik içe aktarma ve kod bölme yazısı ilk olarak LogRocket Blog'da göründü.

etiketlerETİKETLER
Üzgünüm, bu içerik için hiç etiket bulunmuyor.

Sıradaki içerik:

Next.js ile dinamik içe aktarma ve kod bölme