Next.js 12 - Измеряем скорость сборки

И снова большой релиз у Next.js. Новая версия принесла нам пару действительно полезных нововведений, среди которых - новый компилятор. Проверим на реальном проекте, какой прирост мы получим.

Что обещают?

Next.js уходит наконец от babel в пользу нового компилятора, который базируется на Speedy Web Compiler, написанного на Rust. За счёт этого ваши сборки ускорятся в 3 раза в режиме разработки и в 5 раз в режиме build. Давайте посмотрим на практике, как изменилась скорость сборки.

Как измеряем

У меня на руках сайт c 2135 страницами. Достаточно большой, чтобы замерить реальный прирост скорости. Сборка будет происходить на моей рабочей машине с i7 10-го поколения под Mac OS Big Sur.

Для измерения выполнения команд мы будем использовать gnomon, который позволяет измерять время выполнения скриптов. В обоих случаях версия React будет 17.0.2.

Production build

Сначала возьмём 11 версию и выполним команду:

npm run build | gnomon --type=elapsed-total

В результате получаем 86.27 секунд от старта до завершения. После этого поменяем версию на 12.0.1 и повторим команду. Получаем 89.1 секунд. Стоп... что-то не то. 🤨

Действительно мы не получили вообще никакого прироста. Наиболее узкое место в которое мы упираемся - это получение данных для 2000 страниц. Скорость компиляции самого кода не на столько нас ограничивает. Если у вас множество разных layout и страниц, то да, тут может быть небольшой прирост.

Development

Что у нас будет теперь при локальной разработке? На 11й он не показывает время выполнения сборки, но gnomon нам поможет:

4.9914s - event - compiled successfully

А после открытия страницы - 6 секунд на сборку.

Если делаем на 12й:

event - compiled successfully in 1914 ms (617 modules)

А после открытия страницы - 2,5 секунды на сборку.

Вот тут виден явный прирост более чем в 2 раза.

Итог

Разработчики Next.js молодцы, что не стоят на месте и радуют нам новыми фичами. В рамках разработки 12-я версия показывает себя просто отлично. Ты даже перестаёшь замечать что что-то в фоне собирает твою страницу, так быстро она обновляется.

Но не стоит рассчитывать, что production build будет собираться быстрее в 5 раз как описано в официальном блоге, вы всё равно будете упираться в получение данных.