next super performance

? Следующая производительность

Частичная гидратация для lete.js с Preact X.

---

Объяснение: Весной мы создаем веб -сайты для газет, и мы очень, очень знают о производительности.

Газеты в основном статические страницы. Теперь, если бы мы создали одностраничное приложение, мы бы создали огромный пакет с в основном ненужным кодом.

Это означает не только то, что пользователи ждут, пока большой файл скачивает, но, как указывает Адди Осмами, существует огромная стоимость производительности с использованием кода анализа и выполнения. Как смутное правило, мы можем сказать, чем больше ваша пачка, тем хуже ваше выступление.

---

Вот почему мы стремимся сократить размер пакета, только отправив код, который нам действительно нужен в клиенте, и оставить остальное на рендеринг на стороне сервера.

Обзор

Это репо все еще подтверждение концепции, мы будем продолжать работать над этим и реализовать нашу работу как 2 пакета:

• pool-attendant-preact библиотека, которая реализует частичную гидратацию с помощью preact x
• next-super-performance плагина Next.js, который использует аттек-аттек-бассейн для повышения производительности на стороне клиента

В дополнение к частичной гидратации мы будем реализовать стратегии загрузки, включая critical CSS , critical JS , lazy loading , preloading ressources и т. Д. В рамках следующей успеваемости.

Документация

На данный момент у нас есть частичный гидратационный POC для Next.js, и именно так он работает. При создании next.config.js и используйте наш плагин, как

 const withSuperPerformance = require ( "next-super-performance" ) ;
module . exports = withSuperPerformance ( ) ;

2 вещи произойдут:

• React будет заменен Preact , потому что это всего лишь 3 кб
• Next.js 'File JavaScript File будет отброшен и заменен файлом JavaScript в вашем управлении

Это означает, что вы должны создать client.js в корневой папке вашего приложения, которая будет действовать как точка входа для JavaScript, который будет отправлен клиенту. Мы делаем это, чтобы дать вам полный контроль над тем, что вы хотите, чтобы ваши пользователи загрузили, и, что очень важно, выбрать стратегию загрузки, которая подходит для вас.

Теперь в pool-attendant-preact вступает в игру. Exports Exports Pool-Preact 3 API:

• withHydration HOC, который позволяет отметить ваши компоненты для гидратации
• hydrate функцию для гидрата, отмеченных компонентами, в клиенте
• HydrationData компонент, который записывает сериализованные реквизиты клиенту, например, 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 правильно (это будет псевдоним react на preact , а затем запустите исходные следующие сценарии без модификации):

  "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 - это ваша запись, и все зависимости будут разрешены через 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 для создания языка для критических аспектов вашего кода, чтобы предоставить вам инструменты для определения вашего критического пути рендеринга.