Что такое Vite и зачем его используют

Какие возможности предоставляет Vite

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

Среда разработки

Среда разработки - это единое рабочее окружение (программное), с помощью которого программист занимается разработкой.

Vite используют JavaScript-программисты для разработки веб-приложений. Обычно Vite используют вместе с другими инструментами: Vue, React. Хотя, ничего не мешает использовать Vite и с чистым JavaScript.

С помощью Vite программисты создают себе удобное пространство для работы, которое можно разделить с другими разработчиками и легко передать для совместной деятельности. Чтобы влиться в коллектив, новому члену команды достаточно будет установить зависимости через NPM внутри Vite-проекта… и проект готов к работе, сиди и пиши код.

Встроенный сервер

Vite имеет свой собственный сервер с режимом контроля изменений. То есть, изменяя один файл где-то в проекте, Vite сам обновляет представление в браузере и отображает изменения в реальном времени.

Обычно сервер с проектом запускается через консольную команду npm run dev и располагается по адресу http://localhost:3000 (числа в конце могут быть другими).

Сборка проекта и оптимизация

С помощью Vite можно разделить проект на модули: то есть разбить один большой компонент с кодом на кучу маленьких. Также, Vite позволяет разделить продукт на две версии: production (окончательная версия) и dev (в производстве). В дальнейшем такой проект легче обслуживать.

Во-первых, программистам куда удобней править один маленький компонент на 150 строк, чем один большой на 3000 строк. 

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

Хотя стоит уточнить, что создание грамотной модульности лежит только на плечах хорошего программиста. 

В-третьих, разделение (production и dev) нужно для разных режимов работы. Например, в production (окончательной сборке) в модульности особо смысла нет, там главное другое: чтобы все было собрано так, дабы быстро работало. И Vite это успешно делает, разбивая все на “чанки” (кусочки), которые поэтапно скармливаются браузеру, и за счет этого достигается хорошая оптимизация веб-приложения.

Транспиляция 

Транспиляция - это автоматизированный процесс переписывания кода с одного языка на аналогичный код на другом языке.

По умолчанию Vite использует все современные наработки исполнения JavaScript в браузерах, поэтому программы, собранные на нем работают только в современных браузерах. Но, если Вам требуется поддержка старых браузеров, тут есть специальные инструменты для реализации таких потребностей.

Vite сам, с помощью Babel, перепишет ваш код c новых стандартов JavaScript на более поздний. С помощью этого вы можете не беспокоиться за работоспособность своего приложения в старых браузерах.

Vite и Webpack: в чем различия

Webpack - как и Vite, позволяет собирать проект из модулей, а также организовывать среду разработки.

Главное отличие Vite от Webpack - это скорость сборки, он очень быстрый. Vite использует новые достижения в браузерной экосистеме: нативные ES модули (файлы с расширением .mjs). За счет этого, Vite во много раз быстрее собирает все модули в единую конструкцию.

Пример Vite проекта

Автор использует Node.js 18.16.0.

Vite позволяет быстро инициализировать стартовые проекты (с них удобно начинать работу). Давайте создадим стартовый Vue.js проект. 

На рабочем столе создайте папку и откройте по ее адресу терминал (для Windows командную строку). И выполните команду:

npm create vite@latest my-vue-app -- --template vue

Теперь, перейдите в проект:

cd my-vue-app

И установите пакеты:

npm install

Готово, теперь запустите проект командой:

npm run dev

По адресу http://localhost:5173 у Вас откроется стартовый проект:

Если остались вопросы, то оставляйте комментарии, автор статьи с радостью на них ответит.