next super performance
1.0.0
precact x를 사용한 Next.js의 부분 수화.
설명 : 봄에 우리는 신문을위한 웹 사이트를 만들고 있으며 우리는 매우 성능을 잘 알고 있습니다.
신문은 대부분 정적 페이지입니다. 이제 단일 페이지 응용 프로그램을 만들려면 대부분 불필요한 코드로 거대한 번들을 만들 것입니다.
이것은 사용자가 큰 파일이 다운로드 될 때까지 기다리는 것을 의미 할뿐만 아니라 Addy Osmami가 지적한 것처럼 코드를 구문 분석하고 실행하는 데 큰 비용이 듭니다. 우리가 말할 수있는 모호한 규칙으로서, 묶음이 클수록 성능이 나빠집니다.
그렇기 때문에 클라이언트에서 실제로 필요한 코드 만 배송하여 번들 크기를 줄이고 나머지는 서버 측면 렌더링에 맡기는 것을 목표로합니다.
이 repo ist는 여전히 개념 증명이며, 우리는 이것에 대해 계속 작업하고 우리의 작업을 2 개의 패키지로 구현할 것입니다.
pool-attendant-preact Prect X로 부분적으로 수화를 구현하는 라이브러리next-super-performance Pool-Otdendant-PREACT를 사용하여 클라이언트 측면 성능을 향상시키는 Next.js 플러그인 부분 수화 외에도 우리는 critical CSS , critical JS , lazy loading , preloading ressources 등을 포함한 로딩 전략을 차기 서퍼 성능의 일부로 구현할 것입니다.
현재 우리는 Next.js를위한 부분 수화 POC를 가지고 있으며 이것이 작동하는 방식입니다. next.config.js 만들고 같은 플러그인을 사용하면
const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ;두 가지 일이 일어날 것입니다.
React 3KB에 불과하기 때문에 Preact 로 대체됩니다. 즉, 앱의 루트 폴더에서 클라이언트로 전송 될 JavaScript의 진입 점으로 작동하는 client.js 작성해야합니다. 우리는 사용자가 원하는 것을 완전히 제어하기 위해이 작업을 수행하고 매우 중요한 것은 귀하에게 적합한 로딩 전략을 선택할 수 있습니다.
이제 pool-attendant-preact 시작됩니다. 풀-타입자 프레임 스포츠 3 API를 수출합니다.
withHydrationhydrateHydrationData NEXT_DATA 와 같이 클라이언트에 직렬화 된 소품을 작성하는 구성 요소 
이것을 모범으로 설명합시다. header , main 섹션 및 teaser (예 : 텍스트와 헤드 라인이있는 이미지 일 수 있음)가있는 다음 앱이 있다고 가정 해 봅시다. 이 예를 위해 티저 2 & 3을 역동적으로 만들고 (페이지에서 일부 항목을 선택하기 위해) 나머지는 정적으로 남겨 두십시오.
다음은 다음과 같습니다.
차세대 성능을 설치하십시오
npm i next-super-performance --save next.config.js 를 만들고 플러그인을 사용하십시오
const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ; package.json 수정하여 다음으로 Preact를 올바르게 사용하도록하십시오 (이 별명은 preact 에 react 다음 수정없이 원래 다음 스크립트를 시작합니다) :
"scripts" : {
"dev" : "next:performance dev" ,
"start" : "next:performance start" ,
"build" : "next:performance build"
} , 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 >
) ;
} 여기서 중요한 부분은 <HydrationData /> 입니다.
< script type =" application/hydration-data " >
{ "1" : { "name" : "Teaser" , "props" : { "column" : 2 } } , "2" : { "name" : "Teaser" , "props" : { "column" : 3 } } }
</ script >이것들은 수화 될 구성 요소의 이름과 소품입니다.
앱에 특정 구성 요소를 수화시켜 withHydration 해야한다고 말합니다. 우리의 main.js 다음과 같이 보일 수 있습니다.
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 >
) ;
}4 행에서 우리는 클라이언트에서 수화 될 구성 요소를 생성했으며 다른 소품으로 페이지에서 2 번 사용합니다.
withHydration 마커 로 구성 요소를 선출하여 서버에서 렌더링하고 클라이언트의 HTML에서 찾을 수 있도록합니다. <HydratedTeaser column={2} /> 가됩니다
< Fragment >
< script type = "application/hydration-marker" />
< Teaser column = { 2 } />
</ Fragment > 마지막으로 가장 중요한 부분은 사용자에게 배송하는 코드이며 구성 요소를 수화시키는 client.js 입니다. 단일 구성 요소 ( Teaser )의 경우 간단 할 수 있습니다.
import { hydrate } from "next-super-performance" ;
import Teaser from "./components/teaser" ;
hydrate ( [ Teaser ] ) ; 오, next-super-performance pool-attendant-preact 제공되므로 pool-attendant-preact 대신 여기에서 모든 것을 가져 오는 이유입니다. 편의를 위해 withHydration , hydrate 및 HydrationData 수입하고 수출합니다.
hydrate withHydration 사용하여 표시 한 구성 요소를 찾고 <HydrationData /> 의 데이터를 사용하여 배열로 전달한 구성 요소로 수화됩니다.
이를 위해서는 클라이언트에서 사용하려는 구성 요소를 가져 와서 hydrate 기능으로 전달해야합니다. client.js 는 모든 클라이언트 코드의 진입 점이므로 사용자에게 보내는 코드를 정확하게보고 제어 할 수 있습니다. preact 외에도 다른 어떤 것도 배송되지 않습니다.
구성 요소가 자체적으로 의존성이있는 경우 client.js 귀하의 항목이며 모든 부양 가족이 웹 팩을 통해 해결되므로 해당 종속성은 "Natuarally"배송됩니다.
이 repo는 POC이며 우리가 구축 할 것입니다. 이것을 시도하려면이 저장소를 복제 한 다음 실행하십시오.
# 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는 잘 작동하는 것 같습니다. 우리는 번들 크기를 크게 줄일 수 있습니다. 그래도 여전히 할 일이 많습니다. Next.js는 여전히 클라이언트에서보고 싶지 않은 코드 ( core-js 와 같은) 코드를 번들로 묶습니다. 또한 우리는 도구와 API를 구현하여 코드의 성능 크리티컬 측면을위한 언어를 만들어 중요한 렌더링 경로를 정의하는 도구를 제공합니다.
