В основе сборки production-артефактов в Vite лежит Rollup — модульный бандлер, ориентированный на работу с ES Modules и максимально агрессивную оптимизацию итогового кода. Такая архитектурная связка разделяет обязанности: Vite отвечает за дев-сервер и быстрые трансформации в режиме разработки, а Rollup берет на себя финальную сборку, где важны оптимизация, минимизация и корректное формирование графа зависимостей.
Подобное разделение позволяет избежать дублирования сложной логики бандлинга и использовать зрелую экосистему Rollup как основу production pipeline.
Rollup изначально проектировался вокруг ES Modules и статического анализа импортов. Это дает ключевое преимущество — возможность точного построения графа зависимостей без необходимости эмуляции CommonJS-динамики.
Основные свойства, определившие его роль в Vite:
Vite использует эти свойства для production-сборки, где критичны размер бандла и корректная оптимизация зависимостей.
Архитектура Vite построена на разделении runtime-сценариев:
В dev-режиме Vite не использует Rollup напрямую. Вместо этого применяется:
Такой подход обеспечивает мгновенный старт и отсутствие полной сборки проекта.
При vite build включается Rollup-пайплайн:
Таким образом, Rollup активируется только на этапе, где требуется глобальный анализ проекта.
Rollup оперирует понятием статического графа зависимостей. Каждый модуль рассматривается как узел, а импорты — как ребра.
Процесс построения графа включает:
import и exportВ контексте Vite этот процесс дополняется специфическими слоями:
resolve.alias)node_modulesРезультат — единый граф, пригодный для оптимизации и последующей генерации чанков.
Одним из ключевых преимуществ Rollup является глубокий tree-shaking на уровне AST.
Принцип работы:
exportVite усиливает этот процесс за счет предварительной оптимизации зависимостей, но именно Rollup выполняет финальную фазу удаления мертвого кода.
Особенно важно это для библиотек с модульной структурой, где часто присутствуют:
Rollup в Vite отвечает за разделение кода на чанки в production-сборке.
Основные механизмы:
import() как триггер разделенияАлгоритм построения чанков основан на анализе графа:
Это позволяет уменьшать дублирование кода между страницами и улучшать кешируемость.
Плагины Rollup являются фундаментальной частью сборочного процесса Vite. Несмотря на наличие собственной плагинной системы Vite для dev-режима, production-сборка опирается на Rollup API.
Основные хуки:
resolveId — разрешение модулейload — загрузка содержимого модуляtransform — трансформация AST/кодаrenderChunk — постобработка чанковgenerateBundle — финальная стадия генерации
ассетовVite расширяет эту модель:
Плагины Vite часто выглядят как единый интерфейс, но внутри разделяются:
Это приводит к гибридной модели:
В production режиме Vite фактически передает управление Rollup, добавляя:
Перед запуском Rollup Vite выполняет этап dependency pre-bundling (обычно через esbuild). Однако итоговый граф все равно проходит через Rollup.
Задачи этого этапа:
Rollup затем работает уже с нормализованным графом, что упрощает tree-shaking и оптимизацию.
Rollup в Vite использует расширенную систему резолвинга:
package.jsonОсобую роль играют:
exports field resolutionЭто позволяет корректно собирать современные npm-экосистемы без ручной настройки.
На финальном этапе Rollup выполняет генерацию output:
Vite добавляет дополнительные шаги:
Rollup в Vite используется с учетом агрессивного кеширования:
Это особенно важно при больших приложениях, где пересборка полного графа была бы слишком дорогой.
В SSR-режиме Vite также использует Rollup, но с модифицированными настройками:
Rollup здесь обеспечивает корректную упаковку серверного кода без браузерных зависимостей.
Роль Rollup в Vite можно рассматривать как слой финальной детерминированной сборки поверх более динамичной dev-архитектуры:
Такое разделение делает архитектуру устойчивой к росту проектов и сложным зависимостям в современном фронтенде.