next super performance
1.0.0
preact.preact xを備えたnext.jsの部分的な水分補給。
説明：春には、新聞のウェブサイトを作成していますが、非常にパフォーマンスを認識しています。
新聞はほとんど静的なページです。ここで、単一のページアプリケーションを作成する場合、ほとんど不要なコードを備えた巨大なバンドルを作成します。
これは、ユーザーが大きなファイルをダウンロードするのを待つことを意味するだけでなく、Addy Osmamiが指摘しているように、コードの解析と実行のパフォーマンスには大きなコストがあります。漠然とした経験則として、バンドルが大きくなればなるほど、パフォーマンスが悪化します。
そのため、クライアントで実際に必要なコードを出荷し、残りをサーバーサイドレンダリングに任せて、バンドルサイズを削減することを目指しています。
このレポは依然として概念の証明です。これに取り組み続け、2つのパッケージとして作業を実装します。
pool-attendant-preact部分的な水分補給を事前に実装するライブラリxnext-super-performance Pool-Attendant-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 ( ) ;2つのことが起こります：
React Preactに置き換えられますつまり、クライアントに送信されるJavaScriptのエントリポイントとして機能するアプリのルートフォルダーにclient.jsを作成する必要があります。これを行い、ユーザーにダウンロードしたいものを完全に制御し、非常に重要なことに、自分に合った読み込み戦略を選択することです。
現在、 pool-attendant-preactが登場します。 Pool-Attendant-Preactはあなたのために3つのAPIを輸出します：
withHydrationhydrateHydrationData NEXT_DATAのように、クライアントにシリアル化された小道具を書き込むコンポーネント
これを例で説明しましょう。 header 、 mainセクション、 teaser sを備えた次のアプリがあるとします（たとえば、テキストと見出しの画像だけである場合があります）。この例のために、ティーザー2と3のダイナミック（ページにいくつかのアイテムを選択するためだけに）を試してみて、残りを静的にしましょう。
これがあなたがそれをする方法です：
次のパフォーマンスをインストールします
npm i next-super-performance --save next.config.jsを作成し、プラグインを使用します
const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ; package.jsonを変更して次の使用を適切に使用するようにします（これにより、エイリアスは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です。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クライアントコードのすべてのエントリポイントであるため、これはユーザーに送信するコードを正確に確認および制御することも意味します。プアクトとは別に、他に何も出荷されません。
コンポーネントがそれ自体に依存関係を持っている場合、 client.jsがあなたのエントリであり、すべての依存関係がWebpackを介して解決されるため、これらの依存関係も「自然に」出荷されます。
このレポは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を実装して、コードのパフォーマンス批判的な側面の言語を作成して、重要なレンダリングパスを定義するツールを提供することを目指しています。
