Мій досвід міграції з Vue CLI на Rsbuild

Vue CLI до Rsbuild

Протягом минулого року я взявся за завдання міграції старого проєкту на Vue 2 до новішого стеку. Проєкт складався з Vuetify 2, різноманітних плагінів, великих stores та численних компонентів, написаних за допомогою синтаксису класів. Хоча Vue CLI був чудовим інструментом для збирання застосунку, його час настав і закінчився.

Чому не Vite

Vite — це чудовий інструмент для збірки: неймовірно швидкий, з багатим набором плагінів та гарною документацією. Це без сумніву найкращий вибір для початку нового проєкту.

Проте для нашого існуючого проєкту, побудованого на Webpack 5 (через Vue CLI) та сильно залежного від конкретних плагінів і обхідних рішень, Vite виявився менш ідеальним. Міграція на Vite була б болісною через його несумісність з системою плагінів Webpack.

Чому Rsbuild?

Rsbuild — це порівняно новий інструмент для збірки, заснований на Rspack, швидкому збирачі веб-програм на базі Rust. Створений ByteDance і вперше випущений у вересні 2024 року, Rsbuild виявився відмінним вибором для нашого проєкту:

[

Rsbuild

Інструмент для збірки на базі Rspack для вебу

rsbuild.dev

](https://rsbuild.dev/community/releases/v1-0?source=post_page-----96125ad792c9--------------------------------)

Основні причини для міграції на Rsbuild:

1. Сумісність з плагінами Webpack

• Rspack, на основі якого працює Rsbuild, надає широкі можливості підтримки плагінів Webpack. Це робить Rsbuild чудовим вибором для проєктів, що переходять від Webpack, Create React App або Vue CLI.
• Rsbuild також має свої плагіни, що спрощують налаштування. Для мого проєкту Rsbuild надав необхідні плагіни для підтримки Vue 2, Vue 3 SFC, а також препроцесорів HTML/CSS:

@rsbuild/plugin-vue  
@rsbuild/plugin-vue2  
@rsbuild/plugin-sass  
@rsbuild/plugin-pug

• Щодо підтримки Vuetify 2, то vuetify-loader повністю сумісний з Rspack. Інший плагін Webpack для SVG vue-svg-loader також працює без проблем.

2. Підтримка Module Federation

Module Federation, підхід мікрофронтендів, використовувався в моєму старому проєкті і спочатку підтримувався лише Webpack 4 і 5. Однак з версії 2, Rsbuild також підтримує Module Federation.

Для тих, хто не знайомий з мікрофронтендами, раджу ознайомитися з вступною статтею Мартіна Фаулера:

[

Мікрофронтенди

Як розділити ваш великий, складний фронтенд-код на прості, складові, незалежно доставляємні додатки.

martinfowler.com

](https://martinfowler.com/articles/micro-frontends.html?source=post_page-----96125ad792c9--------------------------------)

Module Federation спрощує налаштування мікрофронтендів, роблячи це технологією, орієнтованою на майбутнє.

3. Покращення продуктивності

Оскільки Rsbuild побудований на Rust, він значно швидший за Webpack за замовчуванням. Команда Rsbuild постійно випускає оновлення, спрямовані на подальше покращення продуктивності.

https://rsbuild.dev/community/releases/v1-0#performance

Для мого проєкту я помітив різницю в швидкості збірки близько 2–3 разів, що дійсно приносить задоволення!

Посібник з міграції

Rspack надає докладні посібники з міграції для Webpack, CRA, Vue CLI та Vite, які були дуже корисні під час міграції. Ви можете знайти ці посібники на офіційному вебсайті Rsbuild.

[

Rsbuild

Інструмент для збірки на базі Rspack для вебу

rsbuild.dev

](https://rsbuild.dev/guide/migration/vue-cli?source=post_page-----96125ad792c9--------------------------------)

Висновок

Перехід на Rsbuild дозволив мені зробити проєкт готовим до майбутнього, одночасно отримавши покращену продуктивність і сумісність з існуючими плагінами та налаштуваннями.
Якщо ви розглядаєте можливість міграції проєкту на Vue CLI, Rsbuild є потужним і ефективним вибором.

🙏 Сподіваюся, що ви прочитали цікаву та корисну історію.

👏 Якщо вам сподобалося, просто відправте аплодисменти, я буду дуже радий побачити вашу реакцію!

👆Слідуйте за мною, щоб бути першим, хто побачить мої нові статті.

Дякую і BR, Олександр

Перекладено з: Vue CLI to Rsbuild Migration Experience