Вийшла нова версія Vite 8

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Команда розробників Vite випустила нову мажорну стабільну версію Vite 8. Це наймасштабніша архітектурна зміна з моменту виходу другої версії інструмента. Також, щоб допомогти розробникам орієнтуватися у великій екосистемі, автори запустили сайт registry.vite.dev, який щодня збирає дані про плагіни з npm.

Головні зміни

Відмова від двох бандлерів на користь одного

Раніше Vite покладався на два різні інструменти. Для швидкої компіляції під час розробки застосовувався esbuild. Для фінального пакування коду та оптимізації використовувався Rollup. Це працювало добре роками, але згодом підтримка двох різних систем стала обтяжливою. З’являлося все більше коду для їхньої синхронізації та виникали розбіжності в обробці модулів між розробкою та продакшеном.

Тепер Vite 8 працює виключно на Rolldown. Це єдиний уніфікований бандлер, написаний мовою Rust. Він працює в 10-30 разів швидше за Rollup і при цьому підтримує той самий API для плагінів. Більшість наявних плагінів працюватимуть з восьмою версією без жодних змін.

Збільшення продуктивності

Під час тестування попереднього пакета rolldown-vite багато компаній помітили суттєве зменшення часу продакшн-збірок. Команда Linear повідомила, що їхній час збірки впав з 46 до 6 секунд. Проєкт Beehiiv зменшив цей час на 64 відсотки. Компанія Ramp прискорила процес на 57 відсотків, а розробники Mercedes-Benz отримали прискорення на 38 відсотків.

Нові функції та оновлення

Окрім переходу на новий рушій, розробники додали кілька важливих опцій.

• Додано налаштування devtools для ввімкнення інструментів дебагінгу прямо з локального сервера.
• З’явилася вбудована підтримка шляхів TypeScript, яку можна увімкнути через resolve.tsconfigPaths.
• Інструмент тепер автоматично підтримує опцію emitDecoratorMetadata без потреби встановлювати зовнішні плагіни.
• Імпорти формату .wasm?init тепер працюють при серверному рендерингу.
• Логи та помилки браузера тепер можна перенаправляти в термінал за допомогою опції server.forwardConsole. Це особливо зручно при роботі з інструментами на базі ШІ.

Для роботи Vite 8 потрібні версії Node.js 20.19+ або 22.12+. Це дозволяє безперебійну підтримку require(esm) без потреби вмикати додаткові прапорці.

Також оновився плагін @vitejs/plugin-react v6. Тепер він використовує компілятор Oxc замість Babel, тому займає менше місця і працює швидше. Для використання React Compiler передбачено допоміжне налаштування reactCompilerPreset, яке працює разом з @rolldown/plugin-babel. Попередня п’ята версія плагіна також залишається повністю сумісною з Vite 8.

Збільшення розміру та міграція

Розробники повідомили про збільшення розміру інсталяції. Новий Vite став приблизно на 15 мегабайтів важчим за сьому версію. Десять мегабайтів додає пакет lightningcss, який тепер вбудовано за замовчуванням для кращої мініфікації стилів. Ще п’ять мегабайтів додає сам бінарник Rolldown, оскільки його внутрішню архітектуру оптимізували для максимальної швидкості на шкоду розміру файлу.

Оновитися на нову версію має бути просто для більшості команд. У Vite 8 є спеціальний шар сумісності, який автоматично перетворює старі налаштування esbuild та rollupOptions у новий формат.

Для складних проєктів розробники радять поступову міграцію. Спочатку варто спробувати встановити пакет rolldown-vite на сьомій версії інструмента, перевірити сумісність і вже потім переходити на повноцінний пакет vite версії 8.

Спробувати новинку можна онлайн через сервіс vite.new, а для створення локального проєкту достатньо виконати команду pnpm create vite.