Знакомство с Million.js

Виртуальный DOM React не такой быстрый.

Но мы не можем обойти это. Если мы хотим React, нам нужно его придерживаться, верно?

Нет, есть альтернатива.

Million — это инновационная библиотека для React, которая позволяет нам заменить виртуальный DOM по умолчанию на более быстрый и эффективный: Виртуальный DOM блока.

То, что звучит как головная боль, настроить до смешного просто. Million используется в качестве оболочки для наших компонентов React.

Вот и все. Не нужно магических трюков.

Но что делает этот блочный виртуальный DOM? Давайте выясним, что происходит, посмотрим на некоторые тесты и напишем код.

Как Million может сделать ваше приложение быстрее

Классический виртуальный DOM — это абстракция фактического DOM, полностью в памяти. Наши компоненты хранятся в виде дерева, и React создает новый виртуальный DOM всякий раз, когда изменяется состояние — этот процесс называется сравнением.

Затем новое виртуальное представление сравнивается с реальной моделью DOM, и необходимые обновления вносятся в пользовательский интерфейс.
Это то, что мы называем примирением.

Создание совершенно нового виртуального DOM дорого. Таковы и другие детали этого процесса.

Million с его блочным виртуальным DOM имеет более компактный подход. Динамические части приложения извлекаются и отслеживаются. Всякий раз, когда состояние изменяется, оно отличается. По сравнению с классическим виртуальным DOM различается не все дерево.

Поскольку мы отслеживаем динамические части, точное местоположение будет найдено и обновлено точно. Этот подход очень похож на тот, который использует Svelte.

Вы, возможно, задавались вопросом о заголовке этого раздела, в котором я сказал, что миллионы людей могут сделать ваше приложение быстрее. Для некоторых приложений преимущества производительности незначительны.

Значительное преимущество Million в производительности заключается в пропуске статических частей нашего приложения. Там, где V-DOM по умолчанию не делает различий, Million работает более эффективно.

Тем не менее, чем выше соотношение динамических частей к статическим в вашем приложении, тем больше производительность Million приближается к производительности по умолчанию.
Через секунду мы увидим это в бенчмарках.

TL;DR: Million особенно хорош для веб-приложений с небольшим количеством динамических частей.

Ориентиры

Ниже приведены три различных контрольных показателя. Сравниваются Million, React и Preact, так как это популярная и более быстрая альтернатива React.

Данные говорят сами за себя. В первой таблице Million даже значительно превосходит Preact. Во второй таблице разница в потреблении памяти еще более разительна. Это ясно показывает, насколько Million лучше оптимизирован с точки зрения памяти.

Начало работы с Million в React

Давайте развернем быстрый пример проекта. Мы можем сделать это с помощью vite, создав приложение React.js.

npm create vite@latest

Выберите React с JavaScript или TypeScript, как вам больше нравится.

Затем мы можем установить Million: npm install million

Наконец, нам нужно настроить наш проект. Отредактируйте файл vite.config.js следующим образом:

import { defineConfig } from 'vite'
import million from 'million/compiler'

export default defineConfig({
 plugins: [million.vite()],
})

Использовать блочный виртуальный DOM Million очень просто. Все, что вам нужно сделать, это использовать блок Million в качестве HOC:

import React from 'react'
import { block } from 'million/react'

function App() {
 return <h1>Hello world</h1>
}

const AppBlock = block(App)

export default AppBlock

Вот и все!

Но Million также предлагает другие утилиты — особенно для производительного рендеринга списков. Вместо того, чтобы отображать списки традиционным способом, но завернутые в блок HOC, Million рекомендует использовать предоставленный компонент For:

import { block, For } from "million/react" 

const DisplayPerson = function ({ person }) {
 return (
  <li>
   {person.name} is {person.age} years old.
  </li>
 )
}

const DisplayPersonBlock = block(DisplayPerson)

... 

<For each={people}>
  {(person) => <DisplayPersonBlock person={person} key={person} />}
</For>

Размеры пакетов?

Производительность исполнения имеет важное значение. Но первоначальная загрузка тоже имеет значение — большой фактор — это размеры пакетов. Я создал одно и то же приложение с помощью Million и без него.

Размер пакета с использованием чистого React:

Размер пакета с использованием миллиона:

Конечно, последний размер пакета больше, так как мы используем сторонний код. Тем не менее, разница в размере пакета gzip составляет менее 5 КБ, поэтому выигрыш пренебрежимо мал. Это означает, что Million — это почти бесплатное повышение производительности для многих приложений React.

Ресурсы

Спасибо Айден Бай за ответы на мои вопросы! :)

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .