Что ж, Vite, что по-французски означает быстрый, — это современный инструмент сборки, созданный Эваном Ю. Он призван обеспечить более быструю и экономичную разработку, чтобы разработчики могли тратить меньше времени на ожидание компиляции своего кода для предварительного просмотра изменений и больше времени на собственно разработку. С точки зрения практического применения, наиболее близким сравнением, вероятно, является Webpack или Vue CLI, которые используют webpack под капотом.

Разработчики используют веб-пакет для запуска серверов разработки с горячей перезагрузкой модулей и объединения своих приложений для производства. Это то же самое, что и Vite, разница, однако, заключается в том, как Vite на самом деле работает под капотом, и как это влияет на его скорость и масштабируемость.

Как работает Вите?

Итак, как же работает Vite? Vite нацелен на 2 узких места на традиционном сервере разработки.

Медленный запуск сервера.

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

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

  1. Зависимости. :-

Зависимости в основном представляют собой простой JavaScript, который не часто меняется во время разработки. Они часто находятся в каталоге модулей вашего узла. Vite предварительно связывает эти зависимости с помощью сборки, которая представляет собой сборщик, написанный на языке Go, и предварительно связывает зависимости в 10–100 раз быстрее, чем сборщики на основе JavaScript.

2. Исходный код. :-

Другая категория, исходный код, часто содержит нестандартный JavaScript, который требует преобразования, например компоненты CSS или Vue, и будет часто редактироваться. Vite предоставляет исходный код поверх собственного ESM.

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

Медленные обновления

Когда файл редактируется в настройке сборки на основе abundler, по понятным причинам неэффективно перестраивать весь пакет. Обновленная скорость будет уменьшаться линейно с размером приложения. Чем больше ваше приложение, тем больше времени займет обновление. Однако в Vite горячая замена модуля выполняется поверх собственного ESM, необходимо обновить только затронутый файл и файлы, которые зависят от него, а не весь пакет. Благодаря этому горячие обновления модулей всегда выполняются быстро, независимо от размера вашего приложения.

Фреймворк-агностик

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

Рекомендации

"Начиная"

Подпишитесь на меня на GitHub: Мадхуша Прасад