ЛонгридРазработкаOpen SourceViteRolldown

Переход сборщика Vite на Rust-инструмент Rolldown

Разработчики Vite готовят масштабное обновление архитектуры путем интеграции нового Rust-сборщика Rolldown и компилятора Oxc. Переход на единый нативный движок призван кардинально сократить время сборки, объединить процессы разработки и продакшена, а также устранить избыточные запросы к сети.

100

Переход сборщика Vite на Rust-инструмент Rolldown

Разработчики популярного инструмента сборки Vite готовят масштабное обновление архитектуры: переход на новый высокопроизводительный сборщик Rolldown, написанный на языке Rust, и компилятор Oxc. Это изменение призвано кардинально повысить скорость сборки проектов, объединить процессы разработки и продакшена, а также устранить избыточные сетевые запросы при работе с масштабными приложениями. В данном руководстве подробно разобраны цели перехода, ключевые изменения в API и практические шаги по тестированию экспериментального режима.

Что такое Rolldown и почему Vite мигрирует на него?

Rolldown — это современный быстрый сборщик JavaScript-кода на Rust, спроектированный как полноценная замена Rollup. Он ориентирован на максимальную скорость работы и совместимость с существующей экосистемой плагинов.

В текущей версии Vite используется два разных сборщика:

esbuild — для предварительной сборки зависимостей (dependency pre-bundling) на этапе разработки.
Rollup — для финальной сборки проекта в продакшен.

Такой гибридный подход создает серьезную проблему: разницу в поведении кода между локальной разработкой и рабочей средой. Из-за различий в алгоритмах esbuild и Rollup некоторые баги могут проявляться исключительно в готовой сборке, усложняя отладку. Интеграция Rolldown решает эту проблему за счет использования единого нативного движка на обоих этапах.

Дополнительно Rolldown предлагает функции, недоступные в esbuild или Rollup по отдельности, такие как встроенная поддержка горячей перезагрузки (HMR), Module Federation и продвинутый контроль разделения кода на чанки. На тестовых проектах переход на Rolldown показывает кратное ускорение сборки: например, время сборки интерфейса GitLab снизилось с 2,5 минут до 40 секунд, Excalidraw — с 22,9 до 1,4 секунды, а Appwrite — с 12 до 3 минут.

Почему unbundled-разработка уступает место Full Bundle Mode?

Исторически Vite завоевал популярность благодаря концепции «unbundled dev server», когда в режиме разработки файлы поставлялись в браузер без предварительной сборки в виде отдельных ESM-модулей. Однако с ростом масштабов приложений этот подход выявил критические ограничения:

performance-деградация на больших масштабах: Если проект содержит тысячи модулей, браузер вынужден совершать тысячи параллельных сетевых запросов при первой загрузке или обновлении страницы. Это приводит к длительному ожиданию и замедлению отклика. Ситуация усугубляется при использовании сетевых прокси-серверов.
Неконсистентность сред: Различия между разрозненными файлами в dev-режиме и единым бандлом в prod-режиме создают риски несовместимости логики.

Для решения этих проблем в будущем в Vite будет внедрен режим Full Bundle Mode (полное кэширование сборки). Он позволит отдавать сгруппированные бандлы и в процессе разработки, сохраняя при этом мгновенный HMR. Режим сначала будет доступен опционально, а затем станет стандартом.

Изменения в API: переход от manualChunks к advancedChunks

Rolldown вводит новые подходы к конфигурации. Опция manualChunks, унаследованная от Rollup для ручной группировки модулей, объявлена устаревшей. Вместо нее предлагается использовать более гибкую настройку advancedChunks, аналогичную splitChunks в webpack.

Пример старой конфигурации (Rollup):

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (/\/react(?:-dom)?/.test(id)) {
            return 'vendor';
          }
        }
      }
    }
  }
}

Пример новой конфигурации (Rolldown):

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        advancedChunks: {
          groups: [
            {
              name: 'vendor',
              test: /\/react(?:-dom)?/
            }
          ]
        }
      }
    }
  }
}

Интеграция с Oxc и оптимизация плагинов

С выходом @vitejs/plugin-react версии 5.0.0+ для трансформации React refresh по умолчанию задействован компилятор Oxc на Rust (если в проекте не используются сторонние Babel-плагины). Это позволяет отказаться от Babel, существенно ускорив сборку react-компонентов. Ранее рекомендовавшийся плагин @vitejs/plugin-react-oxc официально объявлен устаревшим и не поддерживается, так как вся его логика перенесена в основной плагин.

Поскольку Vite полностью избавляется от esbuild, функция transformWithEsbuild теперь требует явной установки esbuild в зависимости проекта. Разработчикам плагинов рекомендуется мигрировать на экспортируемую функцию transformWithOxc.

Повышение производительности: хук-фильтры и обертка withFilter

Для снижения накладных расходов на передачу данных между Rust-окружением Rolldown и JavaScript-окружением плагинов используется механизм хук-фильтров. Он позволяет вызывать JS-хуки только для файлов, соответствующих заданным паттернам. Если плагин еще не адаптирован под новые фильтры, разработчик может обернуть его самостоятельно с помощью экспортируемой функции withFilter:

// vite.config.ts
import { withFilter, defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    // Вызывать плагин svgr только для файлов с расширением .svg?react
    withFilter(
      svgr({ /* параметры */ }),
      { load: { id: /\.svg\?react$/ } }
    )
  ]
});

Инструкция по тестированию экспериментального сборщика rolldown-vite

Для тестирования новой архитектуры выпущена экспериментальная версия Vite под именем rolldown-vite. Переход на нее осуществляется без изменения кодовой базы проекта через подмену зависимостей в пакетном менеджере.

Подготовка окружения:
- Перед началом тестирования создайте отдельную ветку в Git, чтобы избежать случайной поломки основной конфигурации:
```
git checkout -b test/rolldown-vite
```
Настройка зависимостей в package.json:
- Для npm и Bun: добавьте переопределение в секцию overrides:
```
{
  "overrides": {
    "vite": "npm:rolldown-vite@latest"
  }
}
```
- Для Yarn: используйте секцию resolutions:
```
{
  "resolutions": {
    "vite": "npm:rolldown-vite@latest"
  }
}
```
- Для pnpm: переопределение задается следующим образом:
```
{
  "pnpm": {
    "overrides": {
      "vite": "npm:rolldown-vite@latest"
    }
  }
}
```
  Рекомендация: Вместо @latest лучше указать конкретную версию rolldown-vite из реестра npm, чтобы зафиксировать рабочее окружение и избежать неожиданных поломок при обновлениях экспериментального пакета.
Установка пакетов: Удалите старую папку node_modules и установите зависимости заново:
```
# Для npm
npm install
# Для pnpm
pnpm install
```
Запуск и валидация:
- Запустите сервер разработки или запустите сборку проекта:
```
npm run dev
# или
npm run build
```
- Проверьте работу приложения в браузере, уделив внимание HMR (горячей перезагрузке) и корректности разделения кода.
- Изучите предупреждения в консоли. Rolldown строго валидирует переданные опции и выводит предупреждения вида Warning validate output options. For the "generatedCode". Invalid key... при наличии устаревших настроек Rollup, которые должны быть исправлены на уровне мета-фреймворка или конфигурации проекта.
Откат изменений: Если сборка упала или работает некорректно, удалите добавленные секции overrides/resolutions из package.json, выполните повторную установку зависимостей и сообщите о найденных багах в официальный репозиторий vitejs/rolldown-vite на GitHub.