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.
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:
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.
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.
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
.
- 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.
- Çalışıyorsa kritik CSS'leri satır içi yapmak için deneysel
inlineCss
seçeneğini kullanın elde etmeye çalışır. - 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.