Поиск

ПоискПоиск

Обзор Vite

Feb 06, 2025, 12 min read

keywords:

Vite - это инструмент сборки frontend-приложения. С его помощью создаётся среда разбработки#React#JavaScript#Vue - приложений без этапа пакетирования. Vite предоставляет браузеру собственные модули#ES и Шаблоны (набор стартовых файлов) для ряда фреёмворков , ванильного JS , а также реализует поддержку#TypeScript ,#JSX#Sass .

Обычно мы собираем наши проекты с помощью#webpack , в то время когда Vite использует технологию#esbuild . Особенность этой технологии в том, что она написана на#GO , что делает его в 10-100 раз быстрее , чем другие инструменты написанные на JS.

Скорости#bundle для веб-разработки: #esbuild 0.37 s. #parcel 30.5 s. #rollup +#terser 32.07 s. #webpack 39.7 s.

Bundle основанный на dev - server’ е :

Сборка приложения на основе ES-модулей

Отмечу, что Bundle происходит не с помощью технологии#esbuild , а использует#rollup , потому что esbuild пока еще не покрывает все запросы разработчиков .

Преимущества:

  • не требует пересборки всего пакета, когда что-то меняется ;
  • работа с проектом без необходимости устанавливать Vue CLI или Create React App ;
  • обновления#HMR становятся стабильно быстрыми, независимо от размера всего приложения;
  • несмотря на увеличение разницы окружений, ускорился их запуск , а также ускорился hot reload
  • Vite поставляется с предварительно настроенной командой сборки, куда встроены многие оптимизации производительности.

Недостатки:

  • увеличилось количество зависимостей в нашем package.json файле
  • увеличилась разница окружений (тк файлы запускаются разными инструментами)

Установка ViteJS

npm init @vitejs/app
cd vite-project
npm install

В документации#ViteJS говорится , что#TypeScript поддерживается по-умолчанию. Vite компилирует его автоматически. Для использования#Sass выполним команду в консоли :

npm install sass --save-dev

Ещё одно преимущество, при продумывании выбора необходимых технологий (стека) Vite удобен при переключении JS на TS и CSS на SCSS соответственно.

Мы можем созданить одностраничное , так и многостраничное React, Vue -приложение , используя функционал#Router . Установим необходимые плагины.

Интегрируем Vite с нашим бэкендом .

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

Некоторые дополнения к описанию:

Для установки#viteJS в действующий проект необходимо удалить и установить:

yarn remove react-scripts
 
yarn add vite @vitejs/plugin-react

Изменяем команды запуска и билда приложения:

{
 "scripts": {
	 "start": "vite",
	 "build": "vite build"
	 }
}

В vite необходимо добавить config и необходимо указать с какими технологиями придётся работать:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react'
 
export default () => {
	return defineConfig({
		plugins:[react()],
	});
}

Далее необходимо извлечь файл index.html в корень проекта:

./public/index.html   
./index.html

Редактируем index.html , важно удалить везде слово PUBLIC <link rel="stylesheet" href="%PUBLIC_URL%/font-icons/index.css" />

Явно указываем точку входа в приложение: <script type="module" src="/src/index/tsx"></script>

Теперь точка входа обрабатывается не через bundler , а через html-файл .

Изменяем расширения файлов с .js на .jsx Если там действительно используется .jsx .

Причина почему Vite использует расширение .jsx заключается в том, что в большинстве случаев файлы .js не нуждаются в полном преобразовании AST для работы в браузере. Разрешая JSX код в файлах .js означает, что каждый обслуживаемый файл, должен полностью быть обработан на всякий случай, если он содержит JSX.

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react'
 
export default () => {
	return defineConfig({
		plugins:[react()],
		resolve: {
			alias: {
			`~`: path.resolve(__dirname, `./src`),
			},
		},
	});
}

— БЫСТРОЕ ГЛОБАЛЬНОЕ РЕДАКТИРОВАНИЕ КОДА

Если в проекте используется стандартный конфиг для работы с SVG предоставляемый при инициализации проекта через Create React App , то необходимо дополнительно его установить для проекта на Vite :

yarn add vite-plugin-svgr

Естественно, его необходимо добавить в config:

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
 
export default () => {
	return defineConfig({
		plugins:[react(), svgr()],
		resolve: {
			alias: {
			`~`: path.resolve(__dirname, `./src`),
			},
		},
	});
}

Запустим проект в консоли :

yarn dev // yarn start

Проект запускается молниеносно ( в консоли указано время )

После запуска проекта, вероятно, будут отображаться ошибки в консоли. Причина может быть в process.env (пробрасывает окружение в проект). РЕШЕНИЕ для этой проблемы в установке rollup плагина inject и с его помощью добавить переменную process.

import {defineConfig} from 'vite';
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import inject from '@rollup/plugin-inject'
 
export default () => {
	return defineConfig({
		plugins:[react(), svgr()],
		resolve: {
			alias: {
			`~`: path.resolve(__dirname, `./src`),
			},
		},
		build: {
			rollupOptions: {
				plugins: [
					inject({
					process: 'process',
					}),
				],
			},
		},
	});
}

Следующий этап интегрировать#module-federation - это плагин для микрофронтенда .

Создатель Vite и Vue - один человек и очень вероятно, что Vite под Vue будет полноценно интегрирован, но решит ли он все проблемы использования Vite под React , пока не ясно .

!!! ИЗУЧАЮ ДАЛЬШЕ #import-meta-env

Введение

Vite - это инструмент сборки, который значительно улучшает опыт разработки фронтенда. С помощью Vite можно создать среду разработки для таких фреймворков, как Vue и React и даже для ванильного JavaScript-приложения с dev-сервером и hot reloading всего за три команды.

Без дополнительной настройки ты также можешь использовать Vite для TypeScript, а с помощью одной дополнительной команды ты можешь использовать его для#Sass. (Если бы мы то же самое делали с webpack, нам пришлось бы немного повозиться с настройками, с загрузчиками и отдельно устанавливать webpack dev server).

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

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

Интересный факт: название «Vite» происходит от французского слова «быстрый», которое произносится как «vit».

Как работает Vite

Vite следует недавней тенденции таких инструментов, как Svelte (где фреймворк практически скомпилирован) и других инструментов, таких как Snowpack, которые используют современные возможности JavaScript (например, модули ES) для обеспечения плавной и быстрой разработки с минимальной конфигурацией и минимальными накладными расходами в виде установленных пакетов. По сути, ты устанавливаешь Vite с одним или двумя плагинами, делаешь очень мало настроек и просто начинаешь работать над своим приложением.

Vite - это современная среда разработки, в которой можно обойтись без этапа пакетирования, поскольку она предоставляет браузеру собственные модули ES. Он предоставляет шаблоны (набор стартовых файлов) для ряда фреймворков и ванильного JavaScript, а также предлагает поддержку TypeScript, JSX и Sass (хотя для Sass необходимо установить одну зависимость).

Vite работает очень быстро, поскольку использует встроенные модули ES и не требует пересборки всего пакета, когда что-то меняется. Это делает обновления HMR стабильно быстрыми, независимо от размера твоего приложения. При сборке в продакшен, Vite поставляется с предварительно настроенной командой сборки, в которую встроены многие оптимизации производительности.

Помимо высокой скорости, Vite также предлагает горячую замену модулей (то есть ты видишь обновление кода в браузере в процессе разработки), также можно использовать его для компиляции минифицированной версии твоего проекта (при использовании в продакшене). Используя его, ты можешь очень быстро приступить к работе с проектом Vue или React без необходимости устанавливать Vue CLI или Create React App. Это делает его идеальным для быстрого создания прототипов и небольших проектов, хотя ничто не мешает тебе использовать его и в более крупных проектах.

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

Первая установка

Начнем с установки Vite.

Примечание. Чтобы следовать этому руководству, тебе понадобится Node.js, установленная на твоем компьютере.

После запуска npm init @vitejs/app мы получаем возможность выбрать имя проекта и шаблон. На момент написания статьи доступны следующие варианты:

  • vanilla
  • vue
  • vue-ts
  • react
  • react-ts
  • preact
  • preact-ts
  • lit-element
  • lit-element-ts
  • svelte
  • svelte-ts

Пока давайте остановимся на vanilla. В результате создается каталог (по имени проекта) с некоторыми файлами в нем. Здесь есть index.html, main.js, style.css, favicon.svg и несколько файлов для npm и Git. В package.json содержится только vite как зависимость и несколько скриптов для запуска среды разработки и начала сборки.

Как говорится в инструкциях на экране, нам нужно перейти в папку проекта и установить зависимости:

Затем мы можем запустить сервер dev с помощью npm run dev и просмотреть наше приложение на сайте http://localhost:3000/. При редактировании любого из файлов нашего проекта изменения немедленно отражаются на экране.

Запуск npm run build компилирует проект в папку dist, где можно найти файлы JavaScript и CSS. Оба файла минифицированы.

В документации говорится, что файлы TypeScript поддерживаются из коробки. Поэтому, хотя в vanilla нет специального шаблона TypeScript, мы должны иметь возможность переименовать main.js в main.ts и Vite должен скомпилировать его автоматически, верно? Да, так и есть! После переименования файла и добавления некоторого синтаксиса, специфичного для TypeScript, все вроде бы компилируется нормально.

Попробуем теперь проделать то же самое с CSS, переименовав его в style.scss и добавив некоторый синтаксис, специфичный для Sass. Следующая ошибка отображается как в консоли, так и на веб-странице:

Как же я люблю (достаточно) описательные ошибки! После выполнения npm install sass --save-dev и перезапуска watcher мы можем использовать Sass по своему усмотрению.

Обычно я заранее продумываю стек, устанавливаю необходимые зависимости и трачу немыслимое количество времени на настройку и выяснение того, почему некоторые инструменты не будут хорошо работать вместе. Конечно, мы все равно должны думать о нашем стеке заранее, но возможность переключиться с JavaScript на TypeScript и с CSS на Sass без особых усилий - это очень приятно.

Мне очень нравится идея того что мы можем настроить довольно продвинутый стек за минуту или две. Учитывая, что Vite использует index.html в качестве точки входа и создает обычный HTML, CSS и JavaScript, Vite уже показывает себя как отличный инструмент для статических сайтов и, возможно, приложений Jamstack.

Одностраничное приложение

Теперь выясним, можем ли мы создать одностраничное приложение. Давай попробуем Vue!

После запуска npm init @vitejs/app и выбора шаблона Vue мы получим Vite, Vue и плагин Vite для компиляции Vue. Если мы создаем SPA, мы, вероятно, хотим работать с маршрутами, поэтому установим Vue Router.

Похоже, что Vite здесь не поможет. Мы получаем простую настройку Vue и отвечаем за то, что мы подключаем к Vue. После установки vue-router и настройки Vue на его использование, все работает. Мы также можем использовать Vite для создания нескольких страниц, как описано на странице многостраничного приложения в документации, хотя это требует настройки конфигурации Rollup в Vite.

Я нашел vite-plugin-vue-router, относительно новый плагин, созданный сообществом, который генерирует маршрутизатор на основе путей к файлам, как мы получаем в Nuxt.

Я уверен, что в какой-то момент кто-то создаст шаблон Vue + Vue Router + Vuex для Vite, но я сомневаюсь, что он будет лучше, чем Nuxt. Полагаю, то же самое можно сказать о React и Next.js, а также Svelte и Sapper/SvelteKit. Это фреймворки для веб-приложений, которые оптимизированы для соответствующих библиотек и для сложных веб-приложений.

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

Интеграция с другими бэкэндами

Иногда мне приходится работать над кодовыми базами, которые не являются Jamstack, но используют .NET или PHP в качестве бэкэнда. Теоретически, мы все еще можем использовать Vite для генерации оптимизированных пакетов JavaScript и CSS. У Vite есть удобная страница интеграции с бэкэндом специально для этой цели.

После выполнения инструкций Vite создает файл манифеста, который содержит информацию обо всех созданных пакетах. Этот файл может быть прочитан для генерации тегов <link> и <script> для пакетов CSS и JavaScript соответственно. Все import файлы собираются в main.js, а все динамические импорты (import('path/to/file.js')) становятся отдельными пакетами.

Эффективность

На странице “Почему Vite” речь идет в основном о производительности и опыте разработчиков. После нескольких тестов я должен сказать, что впечатлен. Действительно впечатлен. Vite dev server запускается мгновенно, а благодаря функции Hot Module Replacement каждое изменение кода отражается в браузере быстро, иногда мгновенно.

Здесь я импортировал библиотеку JavaScript размером 100 кБ, добавил 20 тысяч строк CSS, изменил типы файлов на TypeScript и Sass, чтобы заставить Vite использовать компиляторы TypeScript и Sass соответственно. Конечно, есть некоторая задержка после моих попыток замедлить работу, но она все равно превосходит мои ожидания.

Опыт разработчика

За свою карьеру я настроил сотни проектов с помощью инструментов сборки. Независимо от того, использовал ли я#Grunt,#Gulp,#Rollup или#webpack, большие и сложные проекты занимали у меня день или два, чтобы настроить и убедиться, что все инструменты и плагины работают как надо. Позже я уделял больше времени инструментам, чтобы исправить ошибки, улучшить оптимизацию связок и время сборки.

По сравнению с этим, Vite - это легкий бриз. Для этого введения я установил четыре стека и слегка настроил их в кратчайшие сроки. Vite избавляет от необходимости связывать вместе два десятка инструментов и плагинов. С некоторыми замечательными настройками по умолчанию ты даже сможешь пропустить настройку и сразу приступить к работе. Это потрясающе. У меня похожие чувства по отношению к Nuxt и Next.js.

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

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

Заключение

В целом, Vite - это очень здорово! Это прекрасное дополнение к недавней тенденции инструментов, упрощающих работу с инструментами, таких как Parcel и Snowpack. Я был удивлен тем, насколько легко его настроить. Это требует так мало усилий, что создается ощущение что здесь что-то не чисто и мне это нравится.

Если ты собираешься использовать frontend#фреймворк, я бы, вероятно, выбрал#Nuxt,#Next.js,#SvelteKit /#Sapper или аналогичные. Эти инструменты не только упрощают инструментарий и ускоряют разработку, но и добавляют множество плагинов, которые, вероятно, понадобятся тебе для сложных приложений.

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

Упоминания со ссылкой