Tepki tutturma özellikli rotaları önceden oluşturma

Sunucu tarafında oluşturma işlemi yapmıyor ancak yine de React sitenizin performansını hızlandırmak mı istiyorsunuz? Önceden oluşturmayı deneyin.

Houssein Djirdeh

react-snap bir üçüncü taraf kitaplığını temel alarak, sitenizdeki sayfaları statik HTML dosyalarına dönüştürebilirsiniz. Bu iyileştirme İlk Boyama kez kabul edilir.

Aşağıda, aynı uygulamanın önceden işleme alınmış ve önceden oluşturulmadan karşılaştırması verilmiştir Simüle edilmiş bir 3G bağlantısı ve mobil cihaza yüklenen:

Yan yana yükleme karşılaştırması. Önceden oluşturma kullanan sürüm 4,2 saniye daha hızlı yüklenir.

Neden yararlı?

Büyük tek sayfalık uygulamalarla ilgili temel performans sorunu, kullanıcının, siteyi oluşturan JavaScript paketlerini tamamlamasını beklemesi gerekir gerçek içeriği görmeden önce indirilmesine izin verin. Paketler ne kadar büyükse daha uzun süre beklemek zorunda kalır.

Birçok geliştirici bu sorunu çözmek için uygulamayı sunucu üzerinde çalışır. Her biri geçişini tıkladığında, tam HTML sunucuda oluşturulur ve Bu da İlk Boyama sürelerini kısaltır ancak daha yavaş bir çalışma maliyetine sahiptir. İlk Bayt Zamanı.

Önceden oluşturma, sunucudan daha az karmaşık olan ayrı bir tekniktir hem de ilk boyama sürelerini iyileştirmenin bir yolunu sunar. bir uygulamadır. Gözetimsiz bir tarayıcı veya kullanıcı arayüzü olmayan tarayıcı kullanılıyor. oluşturma süresi sırasında her rota için statik HTML dosyaları oluşturun. Bu dosyalar için gereken JavaScript paketleriyle birlikte e-posta adresi bir uygulamadır.

tepki ekleme

react-snap, şu işlemler için Puppeteer'ı kullanır: Uygulamanızda farklı rotalara ait önceden oluşturulmuş HTML dosyaları oluşturabilirsiniz. Alıcı: bunu bir geliştirme bağımlılığı olarak yükleyin:

npm install --save-dev react-snap

Ardından, package.json dosyanıza bir postbuild komut dosyası ekleyin:

"scripts": {
  //...
  "postbuild": "react-snap"
}

Bu komut,react-snap yapılan başvurular (npm build).

Yapmanız gereken son şey, uygulamanın başlatılma biçimini değiştirmektir. src/index.js dosyasını şu şekilde değiştirin:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
const rootElement = document.getElementById("root");

if (rootElement.hasChildNodes()) {
  ReactDOM.hydrate(<App />, rootElement);
} else {
  ReactDOM.render(<App />, rootElement);
}

Kök React öğesini oluşturmak için yalnızca ReactDOM.render kullanmak yerine DOM'ye gönderirseniz hâlihazırda alt düğümlerin olup olmadığını kontrol eder. önceden oluşturulup oluşturulmadığını (veya sunucu). Bu durumda, etkinlik eklemek için ReactDOM.hydrate kullanılır dinleyicileri yeniden oluşturmak yerine önceden oluşturulmuş HTML'ye uygular.

Uygulamayı derlemek için artık yük olarak statik HTML dosyaları, taranan her rota. HTML yükünün nasıl göründüğüne Örneğin, HTML isteğinin URL'sini ve ardından Önizlemeler'i tıklayarak sekmesinden erişebilirsiniz.

Öncesi ve sonrası karşılaştırması. Sonraki çekim, içeriğin oluşturulduğunu gösterir.

Stilsiz içerik Flash

Statik HTML artık neredeyse anında oluşturulsa da hâlâ "stilsiz bir flash flash"ının gösterilmesine neden olabilir. içeriği" (FOUC). Bu, özellikle de CSS-in-JS kullanıyorsanız JavaScript paketinin bitmesi gerekeceğinden seçicileri oluşturmak için yürütme aşamasını analiz etmeniz gerekir.

Bunun önlenmesine yardımcı olmak için kritik CSS'yi veya ilk sayfanın oluşturulması için gereken, doğrudan <head> . react-snap, anahtar kelimeleri çıkarmak için minimalcss farklı rotalar için kritik CSS'dir. Bunu, package.json dosyanızda şu bilgiler yer alır:

"reactSnap": {
  "inlineCss": true
}

Chrome Geliştirici Araçları'ndaki yanıt önizlemesine baktığınızda, kritik CSS'nin satır içinde yer aldığı stil sayfasını görürsünüz.

Öncesi ve sonrası karşılaştırması. Sonraki çekim, içeriğin oluşturulduğunu ve satır içi kritik CSS&#39;ler nedeniyle biçimlendirildiğini gösterir.

Sonuç

Uygulamanızda sunucu tarafı oluşturma rotaları kullanmıyorsanız şunu kullanın: Statik HTML'yi kullanıcılarınıza önceden oluşturmak için react-snap.

  1. Uygulamayı bir geliştirme bağımlılığı olarak yükleyin ve yalnızca varsayılan sürümle başlayın Ayarlar'da devre dışı bırakabilirsiniz.
  2. Çalışıyorsa kritik CSS'leri satır içi yapmak için deneysel inlineCss seçeneğini kullanın elde etmeye çalışır.
  3. Herhangi bir rota içinde bileşen düzeyinde kod bölme kullanıyorsanız kullanıcılara önceden yükleme durumu oluşturmamaya dikkat edin. İlgili içeriği oluşturmak için kullanılan react-snap BENİOKU bu konuyu daha ayrıntılı olarak ele alacağız.