Что такое Vite Rollup?

Что такое Vite Rollup?

Этот вопрос содержит небольшую терминологическую неточность. Vite и Rollup — это два отдельных, но тесно связанных инструмента в современной экосистеме фронтенд-разработки. Правильнее сказать, что Vite использует Rollup в качестве своего бандлера для production-сборки.

Давайте подробно разберем оба инструмента и их симбиоз.

Vite (Современный инструмент для разработки)

Vite (фр. "быстрый", произносится как "вит") — это Next Generation Frontend Tooling, созданный Эваном Ю (создателем Vue.js). Его основная философия — молниеносная скорость разработки за счет радикально нового подхода.

Ключевые принципы и архитектура Vite:

• Нативный ESM (ES Modules) в разработке: Вместо предварительной сборки всего приложения, как это делает Webpack, Vite использует нативные ES-модули браузера. Сервер разработки предоставляет модули по требованию, что обеспечивает практически мгновенный запуск и горячую перезагрузку модулей (HMR).
• Разделение на зависимости и исходный код: Vite предварительно собирает зависимости (node_modules) с помощью esbuild (написан на Go, невероятно быстрый). Исходный код вашего приложения обрабатывается и обслуживается по запросу.
• Богатая встроенная функциональность: Из коробки поддерживает TypeScript, JSX, CSS, CSS-модули, PostCSS, статические ассеты, WebAssembly и многое другое.
• Оптимизированная production-сборка: А вот здесь на сцену выходит Rollup.

Rollup (Мощный сборщик модулей)

Rollup — это модульный бандлер для JavaScript, известный своим подходом на основе ES-модулей и созданием максимально оптимизированных бандлов. Его ключевая особенность — tree-shaking (дословно "встряхивание дерева") — статический анализ импортов и экспортов, позволяющий удалять неиспользуемый код из финальной сборки.

Почему Vite выбрал Rollup для production?

1. Высокое качество output: Rollup создает чистые, эффективные бандлы с лучшим в своем классе tree-shaking.
2.  Поддержка плагинов: Огромная экосистема плагинов Rollup совместима с Vite. Многие плагины Rollup "просто работают" в Vite.
3.  Предсказуемость: Rollup отлично подходит для создания библиотек и оптимизированных production-бандлов приложений.
4.  Совместимость с ESM: Поскольку и Vite, и Rollup построены вокруг философии ES-модулей, их интеграция глубока и естественна.

Симбиоз Vite и Rollup: Как это работает на практике

Архитектура Vite использует оба инструмента на разных этапах.

В режиме разработки (vite dev):

• Запускается Dev-сервер Vite.
• Запросы к модулям преобразуются на лету.
• HMR работает на уровне модулей с минимальными затратами.
• Rollup в этом процессе не участвует. Основная "тяжелая" работа по трансформации делается esbuild.

В режиме production-сборки (vite build):

• Vite запускает Rollup под капотом.
• Конфигурация Rollup генерируется на основе вашего vite.config.js.
• Применяются все плагины Vite, которые адаптируют свою логику для Rollup.
• Выполняется комплексная оптимизация: tree-shaking, объединение чанков, минификация, обработка ассетов.

Пример конфигурации Vite, которая влияет на Rollup:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()], // Плагин Vue будет работать и в dev-сервере, и в Rollup-сборке
  build: {
    // Эти опции напрямую передаются в Rollup
    rollupOptions: {
      input: {
        main: './index.html'
      },
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'], // Принудительное разделение кода (code-splitting)
        }
      }
    },
    minify: 'terser', // Минификатор, используемый Rollup
    sourcemap: true   // Генерация source maps
  }
})

Сравнительная таблица ролей

Заключение

Таким образом, "Vite Rollup" — это не отдельный продукт, а мощный тандем, где каждый инструмент играет свою сильную роль. Vite переосмысливает и drastically ускоряет опыт разработки, предоставляя мгновенный сервер и HMR. Когда же приходит время развертывания, Vite делегирует задачу создания максимально оптимизированного, готового к production кода проверенному и мощному бандлеру — Rollup. Эта синергия делает Vite одним из самых популярных и эффективных инструментов для современной фронтенд-разработки на React, Vue, Svelte и других фреймворках.