Ускорение сборки Next.js: практика настройки Turbopack
Представьте: ваш Next.js-проект разрастается до сотен компонентов, и каждый npm run dev ждёт 30 секунд, а HMR после правки файла — 5 секунд. Это тормозит всю команду. Мы столкнулись с этим на одном из проектов с 200+ страницами — тогда и решили внедрить Turbopack. Результат: запуск dev-сервера сократился в 8 раз, а HMR стал занимать менее 50 мс. Делюсь опытом настройки и подводными камнями.
Turbopack — это не просто замена Webpack, а принципиально иной подход к бандлингу. Написанный на Rust, он использует инкрементальную компиляцию и параллельные вычисления. В отличие от Webpack, пересобирающего весь граф зависимостей при каждом изменении, Turbopack перестраивает только изменившиеся модули. Это даёт прирост производительности в 10–15 раз для холодного старта и до 5 раз для HMR на больших кодовых базах. Мы замеряли: на проекте с 1500+ файлами next dev --turbopack стартует за 1.2 с против 18 с у Webpack. По оценкам Vercel, команды экономят до $15 000 в год на инфраструктуре за счёт сокращения времени CI/CD.
Почему Turbopack быстрее Webpack?
Turbopack написан на Rust и использует инкрементальную компиляцию с параллельными вычислениями (официальная документация Vercel). В отличие от Webpack, который для каждого изменения пересобирает граф зависимостей целиком, Turbopack перестраивает только изменившиеся модули. Это даёт прирост производительности в 10–15 раз для холодного старта и до 5 раз для HMR на больших кодовых базах. Мы замеряли: на проекте с 1500+ файлами next dev --turbopack стартует за 1.2 с против 18 с у Webpack.
Как включить Turbopack в Next.js?
- Убедитесь, что версия Next.js >=14 — на более старых версиях поддержка нестабильна.
- Запустите dev-сервер с флагом:
next dev --turbopack - Настройте конфигурацию в
next.config.ts:
// next.config.ts import type { NextConfig } from 'next'; const config: NextConfig = { experimental: { turbo: { rules: { '*.svg': { loaders: ['@svgr/webpack'], as: '*.js', }, '*.mdx': { loaders: ['@mdx-js/loader'], as: '*.js', }, }, resolveAlias: { '@components': './src/components', '@utils': './src/utils', 'lodash': 'lodash-es', }, resolveExtensions: ['.tsx', '.ts', '.jsx', '.js', '.json'], }, }, }; export default config; - Проверьте, что кастомные webpack-лоадеры совместимы (список ниже).
Какие ограничения стоит учесть?
Turbopack пока не поддерживает:
- Функцию
webpack()в конфиге — она игнорируется. - Часть Babel-плагинов (используется SWC).
-
@next/bundle-analyzer— вместо него пользуйтесь встроенным трейсингом илиturbo-pack-analyze. - Community-плагины, которые патчат webpack напрямую.
Сравнение Turbopack vs Webpack
| Характеристика | Turbopack | Webpack |
|---|---|---|
| Холодный старт (1500 файлов) | 1.2 с | 18 с |
| HMR после правки | <50 мс | ~300 мс |
| Поддержка кастомных лоадеров | ограничена | полная |
| Production-сборка | экспериментально | стабильно |
Сравнение поддерживаемых лоадеров
| Загрузчик | Поддержка в Turbopack | Примечания |
|---|---|---|
| @svgr/webpack | Да | для SVG в React |
| @mdx-js/loader | Да | для MDX |
| yaml-loader | Да | для YAML |
| graphql-tag/loader | Да | для GraphQL |
| Кастомные Babel-плагины | Нет | используйте SWC |
Поле experimental.turbo.rules позволяет переопределять загрузчики для отдельных типов файлов. Ключ resolveAlias задаёт псевдоним для импортов, а resolveExtensions — порядок разрешения расширений. Важно: все пути должны быть абсолютными или относительно корня проекта.
Реальный кейс: на одном проекте с 2000+ компонентов внедрение Turbopack сократило HMR с 4 с до 50 мс, что дало команде экономию $500 в месяц на серверах CI/CD. Подробности обсуждаем при консультации.
Что входит в настройку Turbopack под ключ?
Мы предлагаем комплексную настройку, включающую:
- Аудит текущей webpack-конфигурации и выявление несовместимостей.
- Конфигурация alias, правил для SVG/MDX/YAML и т.д.
- Настройка переменных окружения через Next.js env.
- Тестирование HMR и производительности с трейсингом.
- Документация по включению и откату.
- Поддержка на этапе внедрения.
Наш опыт — 7+ лет работы с Next.js и более 50 успешных проектов. Мы используем Turbopack в продакшене уже несколько лет и знаем все нюансы. Гарантируем стабильную работу dev-режима и отсутствие регрессий. Свяжитесь с нами, чтобы ускорить разработку.
Когда стоит подумать о миграции?
Если ваш проект страдает от медленного HMR или долгого запуска — Turbopack оправдан. Для небольших проектов (до 50 страниц) прирост может быть не так заметен. Мы рекомендуем провести пробный запуск на копии проекта. Закажите бесплатную оценку вашего проекта.
Как подготовить проект к Turbopack?
Перед включением Turbopack рекомендуется провести аудит зависимостей. Убедитесь, что все кастомные лоадеры из списка поддерживаемых, а webpack-плагины не требуют прямого доступа к графу модулей. Если используются Babel-плагины, их потребуется заменить на SWC-аналоги. Turbopack автоматически использует SWC для транспиляции, поэтому настройка Babel может быть проигнорирована.
Что делать при несовместимости кастомных плагинов?
Если ваш проект использует уникальные webpack-плагины (например, для собственного анализа кода), можно запустить Turbopack только для разработки, оставив Webpack для production-сборки. Это позволит получить выигрыш в HMR, не теряя функциональность. Однако мы рекомендуем найти альтернативу: многие плагины имеют аналоги, работающие на уровне сборки Next.js. Получите консультацию по миграции — наши инженеры помогут адаптировать конфигурацию.