Turbopack

Turbopack — это инкрементальный сборщик (bundler), оптимизированный для JavaScript и TypeScript, написанный на Rust и встроенный в Next.js. Вы можете использовать Turbopack как с Pages Router, так и с App Router для значительно более быстрого процесса локальной разработки.

Почему Turbopack?

Мы создали Turbopack, чтобы повысить производительность Next.js, включая:

• Унифицированный граф: Next.js поддерживает несколько окружений (например, клиент и сервер). Управление несколькими компиляторами и сборка бандлов может быть утомительной. Turbopack использует единый унифицированный граф для всех окружений.
• Бандлинг vs Native ESM: Некоторые инструменты пропускают сборку в режиме разработки и полагаются на нативный ESM в браузере. Это хорошо работает для небольших приложений, но может замедлить крупные из-за чрезмерного количества сетевых запросов. Turbopack собирает бандлы в dev-режиме, но делает это оптимально, чтобы крупные приложения оставались быстрыми.
• Инкрементальные вычисления: Turbopack распараллеливает работу между ядрами и кэширует результаты на уровне функций. Как только часть работы выполнена, Turbopack не будет повторять её.
• Ленивая сборка (Lazy Bundling): Turbopack собирает только то, что действительно запрошено dev-сервером. Такой ленивый подход может сократить время начальной компиляции и использование памяти.

Начало работы

Чтобы включить Turbopack в вашем проекте Next.js, добавьте флаг --turbopack к скриптам dev и build в файле package.json:

{
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build --turbopack",
    "start": "next start"
  }
}

В настоящее время Turbopack для dev стабилен, а для build находится в альфа-версии. Мы активно работаем над поддержкой production-сборок по мере приближения Turbopack к стабильности.

Поддерживаемые возможности

Turbopack в Next.js требует нулевой конфигурации для стандартных случаев использования. Ниже приведён обзор того, что поддерживается "из коробки", а также ссылки на настройки Turbopack, когда это необходимо.

Возможности языков

Возможности фреймворка и React

CSS и стили

Ассеты

Разрешение модулей

Производительность и Fast Refresh

Неподдерживаемые и незапланированные возможности

Некоторые возможности пока не реализованы или не планируются:

• Устаревшие возможности CSS Modules
  • Отдельные псевдоклассы :local и :global (поддерживается только вариант с функцией :global(...)).
  • Правило @value (заменено CSS-переменными).
  • Правила ICSS :import и :export.
  • composes в .module.css, ссылающийся на .css файл. В webpack такой .css файл рассматривался бы как CSS Module, в Turbopack .css файл всегда будет глобальным. Это означает, что если вы хотите использовать composes в CSS Module, вам нужно изменить .css файл на .module.css.
  • @import в CSS Modules, импортирующий .css как CSS Module. В webpack такой .css файл рассматривался бы как CSS Module, в Turbopack .css файл всегда будет глобальным. Это означает, что если вы хотите использовать @import в CSS Module, вам нужно изменить .css файл на .module.css.
• Конфигурация webpack() в next.config.js Turbopack заменяет webpack, поэтому конфигурации webpack() не распознаются. Вместо этого используйте конфиг turbopack.
• AMP Не планируется поддержка в Turbopack для Next.js.
• Yarn PnP Не планируется поддержка в Turbopack для Next.js.
• experimental.urlImports Не планируется поддержка в Turbopack.
• experimental.esmExternals Не поддерживается. Turbopack не поддерживает устаревшую конфигурацию esmExternals в Next.js.
• Некоторые экспериментальные флаги Next.js
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills Мы планируем реализовать их в будущем.

Для полного и детального описания каждого флага и его статуса см. Справочник API Turbopack.

Конфигурация

Turbopack можно настроить через next.config.js (или next.config.ts) с помощью ключа turbopack. Доступные опции конфигурации:

• rules Определяет дополнительные загрузчики webpack для трансформации файлов.
• resolveAlias Создаёт ручные псевдонимы (аналогично resolve.alias в webpack).
• resolveExtensions Изменяет или расширяет расширения файлов для разрешения модулей.
• moduleIds Устанавливает способ генерации ID модулей ('named' vs 'deterministic').
• treeShaking Включает или отключает tree shaking в dev-режиме и будущих production-сборках.
• memoryLimit Устанавливает лимит памяти (в байтах) для Turbopack.

module.exports = {
  turbopack: {
    // Пример: добавление псевдонима и пользовательского расширения файла
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

Для более детальных примеров конфигурации см. документацию по конфигурации Turbopack.

Генерация trace-файлов для отладки производительности

Если вы столкнулись с проблемами производительности или памяти и хотите помочь команде Next.js в их диагностике, вы можете сгенерировать trace-файл, добавив NEXT_TURBOPACK_TRACING=1 к вашей dev-команде:

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

Это создаст файл .next/trace-turbopack. Прикрепите этот файл при создании issue в репозитории Next.js, чтобы помочь нам в расследовании.

Итог

Turbopack — это основанный на Rust, инкрементальный сборщик, разработанный для ускорения локальной разработки и сборки, особенно для крупных приложений. Он интегрирован в Next.js и предлагает поддержку CSS, React и TypeScript без необходимости конфигурации.

Следите за обновлениями, пока мы продолжаем улучшать Turbopack и добавлять поддержку production-сборок. А пока попробуйте его с next dev --turbopack и поделитесь вашими отзывами.

Изменения версий