📦 Что это
Это набор рекомендаций и инструментов для оптимизации производительности разработки и сборки в Next.js 16+. Главная фича — Turbopack, инкрементальный бандлер на Rust, который используется по умолчанию в next dev и даёт значительный прирост скорости: холодный старт и горячее обновление (HMR) становятся в разы быстрее, особенно на крупных проектах. Сюда же относится экспериментальный Bundle Analyzer (Next.js 16.1+) для анализа финального бандла.
Объяснение покрывает, когда стоит оставить Turbopack, когда переключиться на webpack (только если баг или плагин), и как следить за размером продакшен-бандла.
⚙ Как работает
🔵 Turbopack в dev
В Next.js 16 команда next dev запускает Turbopack автоматически. Это инкрементальный бандлер: он кеширует результаты сборки на файловой системе (обычно в .next/cache), поэтому после перезапуска сервера не пересобирает всё заново — только изменившиеся части. На больших проектах прирост скорости — 5–14× по сравнению с webpack.
- Кеш работает «из коробки», дополнительной настройки не требуется.
- Если случайно удаляется папка
.next, кеш сбрасывается — следующий старт будет холодным.
🔴 Когда переключаться на webpack
Turbopack покрывает почти все стандартные сценарии, но бывают исключения:
- Встретился баг Turbopack (редко, но может быть на граничных конфигурациях).
- Используется webpack-only плагин, который не работает с Turbopack (например, кастомный лоадер для нестандартных форматов).
Тогда dev запускают с флагом:
next dev --webpack
(В некоторых версиях флаг может называться --no-turbopack — сверьтесь с документацией вашего релиза.)
🏭 Production build
В зависимости от версии Next.js, next build может использовать Turbopack или webpack. Не предполагайте, что раз в dev работает Turbopack, то и в билде тоже. Всегда проверяйте актуальную документацию Next.js для своей версии. Если главная боль — размер продакшен-бандла, нужен анализ, а не просто смена бандлера.
📊 Bundle Analyzer (экспериментальный)
Начиная с Next.js 16.1 доступен экспериментальный анализатор бандла. Он помогает:
- Увидеть, какие зависимости занимают больше всего места.
- Оптимизировать code-splitting (разделение кода).
- Найти и удалить или заменить тяжёлые библиотеки.
Включается через конфигурацию или экспериментальный флаг — точный синтаксис зависит от версии Next.js, смотрите в официальной документации.
🎯 Когда использовать
- Разработка и отладка любого проекта на Next.js 16+. Turbopack уже стоит по умолчанию, но важно понимать, как он работает, чтобы не сбрасывать кеш впустую и быстро диагностировать проблемы.
- Диагностика медленного старта dev-сервера. Если
next dev тормозит — проверьте, что включён Turbopack и кеш не очищается.
- Оптимизация продакшен-бандла. Если сайт грузится долго — используйте Bundle Analyzer, предпочитайте
App Router и Server Components (они уменьшают клиентский JS).
💡 Важно знать
- Не меняйте бандлер без причины. Если всё работает — оставляйте Turbopack. Переключение на webpack в dev имеет смысл только при конкретной проблеме.
- Следите за версией. Turbopack активно развивается, каждая новая минорная версия Next.js 16.x может приносить исправления и оптимизации. Рекомендуется держаться на актуальном патче.
- Кеш — ваш друг. Не чистите
.next папку без необходимости. Если dev замедлился, сначала проверьте, не удалили ли вы кеш вручную или через скрипты CI.
- Production — отдельная история. Разница между dev и build может быть существенной. Для анализа production-бандла используйте официальные инструменты Next.js, а не полагайтесь на то, что видите в dev.
Комментарии
Комментариев пока нет. Будьте первым.