next super performance
1.0.0
Hidrasi parsial untuk Next.js dengan Preact X.
Penjelasan: Pada musim semi kami membuat situs web untuk surat kabar dan kami sangat, sangat sadar kinerja.
Surat kabar kebanyakan adalah halaman statis. Sekarang jika kami membuat aplikasi satu halaman, kami akan membuat bundel besar dengan sebagian besar kode yang tidak perlu.
Ini tidak hanya berarti bahwa pengguna menunggu file besar untuk diunduh, tetapi seperti yang ditunjukkan Addy Osmami ada biaya besar dalam kinerja dengan penguraian dan mengeksekusi kode. Sebagai aturan praktis yang samar -samar, kami dapat mengatakan, semakin besar bundel Anda, semakin buruk kinerja Anda.
Itulah sebabnya kami bertujuan untuk memotong ukuran bundel dengan hanya mengirimkan kode yang sebenarnya kami butuhkan di klien dan meninggalkan sisanya ke rendering sisi server.
Repo ini masih merupakan bukti konsep, kami akan terus mengerjakan ini dan mengimplementasikan pekerjaan kami sebagai 2 paket:
pool-attendant-preact Perpustakaan yang mengimplementasikan hidrasi parsial dengan preact xnext-super-performance plugin berikutnya Di atas hidrasi parsial, kami akan menerapkan strategi pemuatan termasuk critical CSS , critical JS , lazy loading , preloading ressources , dll. Sebagai bagian dari kinerja-performa berikutnya.
Untuk saat ini kami memiliki POC hidrasi parsial untuk Next.js dan beginilah cara kerjanya. Saat Anda membuat next.config.js dan menggunakan plugin kami seperti itu
const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ;2 hal akan terjadi:
React akan digantikan oleh Preact karena hanya 3kb Itu berarti Anda harus membuat client.js di folder root aplikasi Anda yang akan bertindak sebagai titik masuk untuk JavaScript yang akan dikirim ke klien. Kami melakukan ini untuk memberi Anda kendali penuh atas apa yang Anda ingin pengguna Anda unduh dan, sangat penting, untuk memilih strategi pemuatan yang tepat untuk Anda.
Sekarang pool-attendant-preact ikut berperan. Ekspor Pool-Actendant-Preacts 3 API untuk Anda:
withHydration hoc hoc yang memungkinkan Anda menandai komponen Anda untuk hidrasihydrate fungsi untuk menghidrasi komponen yang ditandai di klienHydrationData Komponen yang menulis alat peraga serial kepada klien, seperti NEXT_DATA 
Mari kita jelaskan ini dengan memberi contoh. Katakanlah Anda memiliki aplikasi berikutnya dengan header , bagian main dan teaser (yang mungkin hanya gambar dengan teks dan headline, misalnya). Demi contoh ini, mari kita coba dan buatlah dinamika Teasers 2 & 3 (hanya untuk memilih beberapa item di halaman) dan biarkan sisanya statis.
Inilah cara Anda melakukannya:
Instal kinerja berikutnya-super
npm i next-super-performance --save Buat next.config.js dan gunakan plugin
const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ; Ubah package.json Anda.json untuk membuat Gunakan selanjutnya Preact dengan benar (ini akan react terhadap preact dan kemudian memulai skrip asli berikutnya tanpa modifikasi):
"scripts" : {
"dev" : "next:performance dev" ,
"start" : "next:performance start" ,
"build" : "next:performance build"
} , Buat pages/index.js
import Header from "../components/header" ;
import Main from "../components/main" ;
import { HydrationData } from "next-super-performance" ;
export default function Home ( ) {
return (
< section >
< Header />
< Main />
< HydrationData />
</ section >
) ;
} Bagian penting di sini adalah <HydrationData /> yang akan memasukkan sesuatu seperti ini:
< script type =" application/hydration-data " >
{ "1" : { "name" : "Teaser" , "props" : { "column" : 2 } } , "2" : { "name" : "Teaser" , "props" : { "column" : 3 } } }
</ script >Ini adalah nama dan alat peraga komponen yang akan terhidrasi.
Untuk memberi tahu aplikasi Anda bahwa komponen tertentu harus dihidrasi withHydration . main.js kami bisa terlihat seperti ini:
import Teaser from "./teaser" ;
import { withHydration } from "next-super-performance" ;
const HydratedTeaser = withHydration ( Teaser ) ;
export default function Body ( ) {
return (
< main >
< Teaser column = { 1 } />
< HydratedTeaser column = { 2 } />
< HydratedTeaser column = { 3 } />
< Teaser column = { 1 } />
< Teaser column = { 2 } />
< Teaser column = { 3 } />
< Teaser column = { 1 } />
< Teaser column = { 2 } />
< Teaser column = { 3 } />
</ main >
) ;
}Di baris 4 kami telah membuat komponen yang akan terhidrasi di klien dan kami menggunakannya 2 kali pada halaman kami dengan alat peraga yang berbeda.
withHydration akan menyiapkan komponen Anda dengan penanda sehingga dapat diterjemahkan di server dan ditemukan di HTML Anda pada klien. Jadi <HydratedTeaser column={2} /> akan menjadi
< Fragment >
< script type = "application/hydration-marker" />
< Teaser column = { 2 } />
</ Fragment > Bagian terakhir dan paling penting adalah client.js Anda.js yang merupakan kode yang akan dikirimkan ke pengguna Anda dan di mana Anda akan melembabkan komponen Anda. Untuk satu komponen ( Teaser ) bisa sederhana seperti itu.
import { hydrate } from "next-super-performance" ;
import Teaser from "./components/teaser" ;
hydrate ( [ Teaser ] ) ; Oh, next-super-performance hadir dengan pool-attendant-preact yang merupakan sebabnya Anda mengimpor semuanya dari sini alih-alih dari pool-attendant-preact . Ini hanya mengimpor dan mengekspor withHydration , hydrate dan HydrationData untuk kenyamanan.
hydrate akan menemukan komponen yang telah Anda tandai menggunakan withHydration dan menggunakan data dari <HydrationData /> untuk menghidrasi mereka dengan komponen yang telah Anda berikan kepada mereka sebagai array.
Ini akan mengharuskan Anda untuk mengimpor komponen yang ingin Anda gunakan di klien (dan meneruskannya ke fungsi hydrate ). Karena client.js adalah titik masuk untuk semua kode klien Anda, ini juga berarti Anda akan melihat dan mengontrol dengan tepat kode mana yang Anda kirim ke pengguna Anda. Terlepas dari Preact tidak ada lagi yang akan dikirim.
Jika komponen Anda memiliki dependensi sendiri, dependensi itu akan "secara alami" dikirim juga karena client.js adalah entri Anda dan setiap ketergantungan akan diselesaikan melalui webpack.
Repo ini adalah POC dan sesuatu yang akan kami bangun. Untuk mencobanya, klon repositori ini dan kemudian jalankan
# Init Preact Git Sumodule
git submodule init
git submodule update
# Install dependencies
yarn
# Build Preact
cd packages/preact
yarn build
# Build the pool-attendant-preact package
# └─ cd to the pool-attendant-preact dir
cd ...
cd packages/pool-attendant-preact
# └─ build the package
yarn build
# cd to the app dir
cd ...
cd packages/app
# run the app
yarn dev POC ini tampaknya bekerja dengan baik, kami dapat secara drastis mengurangi ukuran bundel kami. Masih banyak yang harus dilakukan. Next.js masih bundel kode yang tidak ingin kami lihat di klien (seperti core-js ). Kami juga bertujuan untuk mengimplementasikan alat dan API untuk membuat bahasa untuk aspek-aspek kritis kinerja kode Anda untuk memberi Anda alat untuk menentukan jalur rendering kritis Anda.
