Vite 8.1: режим сборки в dev-режиме
ускорение запуска в 15 раз

Введение

Vite 8 вышел в марте 2026 года с важным архитектурным изменением — единым бандлером на базе Rolldown, преемника Rollup, написанного на Rust. С тех пор Vite достиг 41,6 миллиона еженедельных загрузок и приближается к пиковой популярности Vite 7.

Теперь Vite 8.1 (выпущен 23 июня 2026) доставляет функцию, которую ждали разработчики больших приложений: экспериментальный bundled dev mode. Это не просто инкрементальное улучшение — это фундаментальное изменение работы dev-сервера, приближающее режим разработки к production-сборке.

Кроме ключевой функции, Vite 8.1 добавляет нативную WASM ESM интеграцию, экспериментальный Chunk Import Map для лучшего кэширования и делает шаг к использованию Lightning CSS в качестве процессора CSS по умолчанию. Разберём каждое нововведение.

Экспериментальный Bundled Dev Mode

Основная идея bundled dev mode проста: классический dev-сервер Vite отдаёт каждый модуль отдельным ESM-запросом. Для небольших и средних проектов это крайне быстро — мгновенный HMR, почти нулевой старт. Но для больших приложений с тысячами модулей накладные расходы на резолвинг и отдачу каждого отдельного модуля становятся значительными.

Bundled dev mode (ранее назывался "Full Bundle Mode") запускает Rolldown во время разработки, объединяя модули в меньшее количество запросов. Результат — драматический прирост производительности, масштабирующийся с размером приложения.

Бенчмарки: 10 000 React-компонентов

В тестах Vite с приложением, загружающим 10 000 React-компонентов:

Реальный опыт: Linear

Команда Linear — один из самых известных пользователей Vite с большим и сложным приложением — протестировала bundled dev mode и сообщила:

• Холодный старт: ускорение до 3 раз
• Полные перезагрузки: примерно на 40% быстрее
• Сетевые запросы: в 10 раз меньше во время разработки

Эти цифры из реального production-приложения подтверждают, что синтетические бенчмарки конвертируются в измеримые улучшения ежедневного Developer Experience.

Как включить Bundled Dev Mode

Режим опциональный и экспериментальный. Включите через флаг CLI:

npx vite --experimental-bundle

Или в vite.config.js:

import { defineConfig } from 'vite'

export default defineConfig({
  experimental: {
    bundledDev: true,
  },
})

Текущие ограничения

Bundled dev mode пока фокусируется на браузерной стороне и работает со встроенными плагинами и основными функциями. Если вы используете сторонние плагины или нишевые возможности, они могут работать некорректно. Команда Vite активно:

• Расширяет совместимость с плагинами
• Готовит документацию для авторов плагинов о необходимых изменениях
• Работает над паритетом функций с unbundled dev-сервером

Для большинства крупных проектов со стандартными функциями Vite режим стоит включить уже сегодня. Для проектов с кастомными плагинами или экзотическими конфигурациями — тщательно протестируйте перед внедрением.

WASM ESM Интеграция

Одно из самых удобных для разработчика дополнений в Vite 8.1 — нативная WASM ESM интеграция. Теперь можно импортировать WebAssembly-модули как ES-модули и использовать их экспортированные функции напрямую:

import { add } from './add.wasm'

console.log(add(1, 2)) // 3

Раньше для импорта WASM требовался плагин — vite-plugin-wasm, созданный и поддерживаемый Menci на ранних этапах развития предложения Wasm ESM Integration. Теперь реализация перенесена в ядро Vite, устраняя зависимость от плагина.

Это приводит Vite в соответствие с развитием веб-платформы. Предложение Wasm ESM Integration позволяет браузерам обрабатывать WASM-модули нативно через систему модулей — как JavaScript-модули — устраняя необходимость ручной инициализации через WebAssembly.instantiate().

Для разработчиков, работающих с вычислительно интенсивными задачами — обработка изображений, криптография, сжатие, игровые движки — это означает более чистый импорт и лучшую интеграцию с инструментами «из коробки».

Экспериментальный Chunk Import Map

Тонкое, но важное улучшение производительности. В выходном бандле каждый чанк содержит в импорте хеш того чанка, на который ссылается. Это гарантирует, что браузер загрузит правильную версию после изменений содержимого.

Проблема: когда меняется чанк utils.js, чанк page.js (который импортирует utils) получает новый хеш. Затем чанк entry.js (который импортирует page) тоже перехешируется. Эта каскадная цепочка хешей инвалидирует всё дерево зависимостей при каждом изменении, сводя на нет долгосрочное кэширование.

Экспериментальный Chunk Import Map решает эту проблему с помощью import maps — браузерного механизма для переназначения спецификаторов модулей. Вместо того чтобы встраивать хеш в оператор импорта, используется import map, которая сопоставляет логические имена чанков с их хешированными URL. Когда меняется только utils.js, import map обновляется, но page.js и entry.js сохраняют свои хеши нетронутыми.

Эта функция построена на основе поддержки chunk import map в Rolldown с дополнительной работой Taisei Mima по интеграции специфических для Vite возможностей. Обратите внимание: experimental.renderBuiltUrl пока не работает с этой опцией.

Шаг к Lightning CSS по умолчанию

Vite предлагает Lightning CSS в качестве опционального CSS-процессора начиная с Vite 5.3. Планируется сделать его процессором по умолчанию в следующем мажорном релизе, но двух функций не хватало по сравнению с PostCSS:

• Импорт внешних CSS-файлов внутри CSS — возможность импортировать внешний CSS-файл из другого CSS-файла через @import
• Регистрация файловых зависимостей плагинами — чтобы CSS-плагины могли регистрировать зависимости, и Vite пересобирал проект при изменении этих файлов

Команда Vite совместно с командой Lightning CSS добавила обе функции. Они доступны в Vite 8.1. Попробовать Lightning CSS можно уже сейчас:

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    transformer: 'lightningcss',
  },
})

Lightning CSS обеспечивает значительно более быструю обработку CSS (написан на Rust), встроенные вендорные префиксы, CSS Nesting и современные цветовые функции — всё без PostCSS-плагинов. Если вы начинаете новый проект в 2026 году, нет причин не включить его сейчас.

Другие заметные изменения

Регистронезависимый import.meta.glob

import.meta.glob теперь поддерживает опцию caseSensitive. При значении false файлы сопоставляются без учёта регистра:

const modules = import.meta.glob('./dir/module*.js', {
  caseSensitive: false,
})

Это особенно полезно на регистронезависимых файловых системах или при работе с кодом, использующим разные соглашения об именовании во время миграции.

Обнаружение ресурсов для кастомных HTML-элементов

Vite теперь обнаруживает ресурсы в кастомных HTML-элементах и атрибутах. Раньше сканировались только предопределённые элементы (например, <img src>). Теперь можно настроить дополнительные источники:

import { defineConfig } from 'vite'

export default defineConfig({
  html: {
    additionalAssetSources: {
      'html-import': {
        srcAttributes: 'src',
      },
      img: {
        srcAttributes: ['data-src-dark', 'data-src-light'],
      },
    },
  },
})

Это позволяет кастомным элементам (веб-компонентам, фреймворк-специфичным импортам, тематической загрузке изображений) участвовать в пайплайне ресурсов Vite.

Миграция с Vite 8.0

Обновление до Vite 8.1 для большинства проектов тривиально:

npm install [email protected]

Релиз сосредоточен на дополнительных функциях — обратно совместимых изменений нет. Все существующие конфигурации, плагины и структуры проектов остаются совместимыми.

Рекомендуемые шаги миграции:

1. Обновите версию Vite и убедитесь, что сборка работает
2. Для крупных приложений включите experimental.bundledDev и протестируйте рабочий процесс
3. Если используете WASM-модули, удалите vite-plugin-wasm — теперь он встроен
4. Для новых проектов включите css.transformer: 'lightningcss'
5. Включите Chunk Import Maps, если долгосрочное кэширование критично для вашего деплоя

Bundled vs Unbundled: когда что использовать

В Vite 8.1 у вас есть осознанный выбор. Практическое руководство:

Используйте unbundled dev mode (по умолчанию), если:

• В вашем приложении меньше ~500 модулей
• Вы активно используете сторонние плагины
• У вас нишевые возможности Vite или кастомные цепочки плагинов
• Скорость холодного старта и полной перезагрузки не является узким местом

Включите bundled dev mode, если:

• У вас тысячи модулей (большие монорепозитории, enterprise-приложения)
• Холодный старт в 10+ секунд снижает продуктивность
• Полная перезагрузка занимает несколько секунд
• Вы используете стандартные возможности Vite с минимумом кастомных плагинов

Прелесть Vite 8.1 в том, что можно переключаться между режимами одним изменением конфигурации. Нет неправильного выбора — есть правильный для текущей фазы вашего проекта.

Vite 8.1 vs другие инструменты сборки

Как bundled dev mode Vite 8.1 соотносится с альтернативами?

• Webpack: Webpack всегда использовал бандлинг в dev-режиме, но его холодный старт печально медленный для больших приложений. Vite 8.1 в bundled режиме даёт похожее поведение, но с гораздо более быстрой обработкой на Rust.
• Turbopack: Rust-бандлер от Next.js быстр, но привязан к Next.js. Vite 8.1 работает с любым фреймворком — React, Vue, Svelte, Solid, Lit и vanilla JS.
• Rspack: Совместимый с Webpack Rust-бандлер с отличной производительностью. Vite 8.1 конкурирует по скорости, сохраняя более простую модель конфигурации и богатую экосистему плагинов.

Для контекста — как Vite вписывается в ландшафт инструментов сборки, читайте мой анализ присоединения VoidZero к Cloudflare и что это значит для будущего Vite.

Заключение

Vite 8.1 — значительный релиз, решающий единственную оставшуюся проблему для крупных пользователей Vite: производительность dev-сервера. Bundled dev mode превращает сервер, который и так был быстрым для небольших проектов, в масштабируемое решение для самых больших приложений без деградации.

Добавление нативной WASM ESM интеграции, Chunk Import Maps и работа над Lightning CSS по умолчанию показывают, что экосистема Vite быстро созревает. Для разработчиков, создающих production-приложения в 2026 году, Vite 8.1 — убедительный апгрейд.

Как веб-разработчик, создающий приложения с современными инструментами, я тестирую Vite 8.1 начиная с бета-версии — улучшения производительности реальны и заметны сразу на больших проектах. Если вы планируете новый проект или рассматриваете обновление тулчейна, я помогу вам сделать правильный выбор.

FAQ