Архитектура Vite построена вокруг двух полностью разных сценариев работы:
development)production build)В отличие от старых bundler-систем, где один и тот же механизм использовался и для разработки, и для финальной сборки, Vite разделяет эти процессы на уровне архитектуры.
Это позволяет одновременно получить:
Ключевая идея Vite заключается в том, что разработка и production имеют разные требования, поэтому их нельзя эффективно обслуживать одной и той же системой.
До появления Vite большинство инструментов работали по схеме:
Даже при изменении одного файла приходилось:
На небольших проектах это было незаметно, но крупные SPA-приложения сталкивались с проблемами:
Vite устраняет эту проблему архитектурным разделением.
Во время разработки Vite:
Вместо этого используется:
Браузер сам загружает нужные модули.
Во время production-сборки Vite:
Для этого используется Rollup.
Главная особенность Vite dev-режима — использование ES-модулей браузера.
Например:
import { createApp } from './app.js'
import { router } from './router.js'
import './styles/main.css'Браузер сам делает запросы:
GET /app.js
GET /router.js
GET /styles/main.cssVite лишь перехватывает запросы и трансформирует файлы при необходимости.
Во время разработки Vite не объединяет проект в bundle.
Это фундаментальное отличие от Webpack.
Вместо:
src → build graph → bundle → serveиспользуется:
browser requests module → Vite transforms module → responseТрансформация происходит только по запросу.
Если модуль никогда не был импортирован:
import './admin-panel.js'то Vite не будет его обрабатывать до первого запроса.
Это радикально уменьшает время запуска проекта.
Vite dev server — это HTTP-сервер с middleware-архитектурой.
Он выполняет:
Например:
GET /src/main.jsСервер анализирует:
Применяются:
Например:
Исходник:
const message: string = 'Hello'После transform:
const message = 'Hello'Браузер выполняет модуль напрямую.
Самая дорогая операция bundler-систем отсутствует.
Работа по загрузке модулей делегируется браузеру.
Vite использует esbuild для:
esbuild написан на Go и значительно быстрее Babel.
Обрабатываются только реально используемые файлы.
Несмотря на ESM-подход, npm-зависимости создают проблему.
Многие библиотеки:
Для решения проблемы Vite использует pre-bundling.
Во время первого запуска:
viteVite:
Без pre-bundling:
lodash-es/
map.js
filter.js
reduce.js
...Браузер может отправить сотни запросов.
После оптимизации:
node_modules/.vite/deps/Создаются оптимизированные ESM-файлы.
Vite активно использует файловый кэш.
Каталог:
node_modules/.viteсодержит:
Это позволяет избежать повторной обработки.
Vite реализует HMR поверх ESM.
Когда файл изменяется:
Webpack часто инвалидировал большие части dependency graph.
Vite обновляет минимально необходимую область.
Это особенно важно на больших проектах.
Vite поддерживает внутренний граф модулей:
Module A
├── Module B
└── Module CПри изменении:
Module Bперезагружается только связанная часть дерева.
CSS обрабатывается отдельно от JS.
Поддерживаются:
Изменение CSS:
body {
background: black;
}не приводит к reload страницы.
Vite обновляет стиль напрямую через <style>
injection.
Vite не использует TypeScript compiler для transpilation.
Используется esbuild.
Преобразование:
const id: number = 10в:
const id = 10Проверка типов отсутствует.
Для type checking используется:
tsc --noEmitили:
vue-tscDevelopment-режим не подходит для production.
Причины:
Поэтому Vite использует отдельный production pipeline.
Production build выполняется через Rollup.
Команда:
vite buildзапускает полноценную сборку.
Rollup хорошо подходит для production благодаря:
Rollup анализирует:
import ...
export ...Неиспользуемый код удаляется.
Пример:
export function used() {}
export function unused() {}Если используется только:
used()то unused() будет удалена.
Vite автоматически создает chunks.
Например:
const page = await import('./admin.js')превращается в отдельный chunk.
Dynamic import:
import('./dashboard.js')создает lazy-loaded bundle.
Это уменьшает initial load.
Production build включает:
Vite обрабатывает:
Могут быть встроены как base64:
data:image/png;base64,...Копируются в:
dist/assetsProduction build генерирует:
app.8d72f.js
style.1f53c.cssХеш нужен для:
Можно включить manifest:
export default defineConfig({
build: {
manifest: true
}
})Vite создаст:
manifest.jsonЭто важно для backend-интеграций.
Ориентирован на:
Ориентирован на:
Rollup требует:
Даже быстрый Rollup не может обеспечить мгновенный startup на крупных проектах.
Двухрежимная система существенно улучшает developer experience.
Запуск:
npm run devобычно занимает менее секунды.
Изменения появляются практически мгновенно.
Разница особенно заметна на крупных codebase.
Проекты с тысячами модулей сохраняют высокую скорость разработки.
Архитектура Vite объединяет сильные стороны двух инструментов.
Используется для:
Используется для:
Browser
↓
Vite Dev Server
↓
On-demand Transform
↓
ESM ResponseSource Code
↓
Rollup Build
↓
Chunk Optimization
↓
Minification
↓
dist/Некоторые настройки применяются только к конкретному режиму.
server: {
port: 5173
}build: {
sourcemap: true
}Vite поддерживает режимы:
vite --mode development
vite --mode production
vite --mode stagingПоддерживаются:
.env
.env.local
.env.production
.env.developmentИспользуется:
import.meta.envНапример:
const api = import.meta.env.VITE_API_URLVite строится вокруг возможностей платформы:
Вместо эмуляции модульной системы через bundler.
Иногда код может работать по-разному.
Причины:
Некоторые edge-case сценарии:
import(path)могут вести себя иначе после bundling.
Vite расширяет архитектуру и на SSR.
Существует:
Vite можно встроить в собственный сервер:
const vite = await createViteServer({
server: {
middlewareMode: true
}
})Это используется в:
Плагины могут работать:
export default function plugin() {
return {
transform(code, id) {
return code
}
}
}Некоторые hooks вызываются:
Во время dev Vite перехватывает запросы:
/src/main.js
/@vite/client
/node_modules/Vite автоматически внедряет:
/@vite/clientЭтот клиент отвечает за:
Ошибки отображаются прямо в браузере.
Например:
Unexpected tokenVite показывает:
В dev source maps генерируются практически мгновенно.
Production source maps можно включить:
build: {
sourcemap: true
}Single Page Applications содержат:
Двухрежимная архитектура идеально подходит под такую нагрузку.
Архитектура Vite стала переходом:
от:
everything bundled alwaysк:
native modules in dev
optimized bundling in productionИменно это разделение стало ключевой причиной высокой скорости Vite по сравнению с традиционными bundler-системами.