Next.js ускорил импорт пакетов: как работает оптимизация и что изменится для разработчиков

В последнем обновлении Next.js команда Vercel внедрила автоматическую оптимизацию импорта пакетов, которая ускоряет загрузку модулей при использовании крупных библиотек иконок, компонентов и других зависимостей, реэкспортирующих сотни или тысячи модулей. Улучшения коснулись как локальной разработки, так и холодного старта в продакшене, что особенно важно для проектов с большим количеством зависимостей. Теперь разработчикам не нужно вручную настраивать сборщик — фреймворк сам анализирует и оптимизирует импорты.

Как оптимизировали импорт пакетов в Next.js

Проблема возникла из-за того, что многие популярные библиотеки, такие как наборы иконок (например, Lucide, Heroicons) или UI-компоненты (Radix UI), используют технику реэкспорта: они импортируют множество модулей и затем экспортируют их все из одного файла. Когда разработчик пишет import { IconName } from 'library', JavaScript-рантайм вынужден загружать и парсить весь файл реэкспорта, даже если нужен только один символ. Это приводило к замедлению запуска dev-сервера и увеличению времени холодного старта в продакшене.

Vercel решила эту проблему на уровне фреймворка. В Next.js 14 (или ближайшем обновлении) была добавлена автоматическая оптимизация импортов: при сборке фреймворк анализирует зависимости и заменяет реэкспорты прямыми импортами из исходных модулей. Например, import { IconName } from 'icons-library' может быть преобразован в import IconName from 'icons-library/path/to/icon'. Это снижает количество загружаемого кода и ускоряет выполнение.

Предыстория и контекст

Проблема реэкспортов известна давно, но с ростом популярности библиотек с сотнями компонентов (например, Radix UI, shadcn/ui) она стала критичной. Разработчики жаловались на медленный запуск dev-сервера при использовании нескольких таких библиотек. Ранее Next.js уже предпринимал шаги по оптимизации: в версии 13 появилась поддержка турбо-модулей (Turbopack), но проблема реэкспортов оставалась.

Решение Vercel напоминает подходы, используемые в других инструментах: например, Webpack с плагинами для tree-shaking или esbuild с автоматическим разрешением путей. Однако Next.js внедрил эту оптимизацию на уровне фреймворка, без необходимости вручную настраивать сборщик. Это часть более широкой стратегии Vercel по улучшению производительности разработки и деплоя.

Как это работает для разработчика?

Разработчику не нужно ничего менять в коде. Оптимизация происходит автоматически во время сборки (как для dev, так и для production). Next.js анализирует граф зависимостей и заменяет реэкспорты на прямые импорты, где это безопасно. Если библиотека не поддерживает прямой импорт (например, из-за отсутствия отдельных файлов), оптимизация не применяется. Для библиотек, которые поддерживают exports в package.json, Next.js использует этот механизм.

Технические детали оптимизации

Оптимизация работает на этапе компиляции. Next.js использует собственный код на Rust (Turbopack) для анализа модулей. Когда встречается импорт из пакета, который реэкспортирует много модулей, фреймворк проверяет, можно ли заменить его на прямой импорт. Для этого он смотрит на структуру пакета: если экспортируемый символ происходит из конкретного файла, а не создаётся в файле реэкспорта, то импорт переписывается.

Vercel сообщает, что в тестах с библиотекой Lucide (содержит более 1000 иконок) время холодного старта production-сборки сократилось на 60%, а время запуска dev-сервера — на 40%. Для Radix UI улучшения составили 50% и 30% соответственно. Эти цифры достигаются за счёт уменьшения количества загружаемых модулей: вместо одного большого файла загружается только нужный модуль.

Какие библиотеки выиграют больше всего?

Оптимизация наиболее заметна для библиотек с большим количеством реэкспортов, таких как наборы иконок (Lucide, Heroicons, Phosphor) и UI-компонентов (Radix UI, Ark UI). Для проектов с небольшим количеством зависимостей улучшение будет менее заметно. Также изменения коснутся разработчиков, работающих на Next.js: они получат более быстрый dev-сервер и более быстрые деплои. В российском контексте это может быть особенно актуально для проектов, использующих self-hosted решения, где холодный старт критичен.

Что будет дальше

Vercel планирует расширить оптимизацию на другие сценарии, например, на динамические импорты и импорты с условиями. Также в будущем может появиться возможность настраивать оптимизацию вручную для специфических случаев. Разработчикам стоит обновить Next.js до последней версии, чтобы получить улучшения. Следующим шагом, вероятно, станет интеграция аналогичных оптимизаций в Turbopack для других фреймворков.

Итог

Оптимизация импорта пакетов в Next.js — значительное улучшение для разработчиков, работающих с крупными библиотеками. Оно не требует дополнительных действий, но даёт ощутимый прирост производительности. Если вы используете Next.js и замечали замедление при импорте иконок или компонентов, обновление решит эту проблему. Следите за обновлениями — Vercel продолжает улучшать производительность фреймворка.