Vite — идеальный инструмент для веб-разработки
Vite (французское слово «быстрый») — это инструмент сборки, целью которого является обеспечение более быстрой и удобной разработки современных веб-проектов.
Почему Вите
До того, как модули ES стали доступны в браузерах, у разработчиков не было встроенного механизма для модульного написания JavaScript. Вот почему мы все знакомы с концепцией «связки»: с использованием инструментов, которые сканируют, обрабатывают и объединяют наши исходные модули в файлы, которые можно запускать в браузере.
Однако по мере того, как мы начинаем создавать все более и более амбициозные приложения, количество JavaScript, с которым мы имеем дело, также увеличивается в геометрической прогрессии. Крупномасштабные проекты нередко содержат тысячи модулей. Мы начинаем сталкиваться с узким местом производительности для инструментов на основе JavaScript: часто может потребоваться неоправданно долгое ожидание (иногда до нескольких минут!) для запуска сервера разработки, и даже с HMR редактирование файлов может занять пару секунд, чтобы отражаться в браузере.
Как работает Вайт
В то время как Vite имеет огромную реализацию, чтобы улучшить время выполнения работ. Этот раздел в основном охватывает 2 аспекта этого.
Улучшено время запуска сервера:
При холодном запуске сервера разработки установка сборки на основе сборщика должна жадно просканировать и собрать все ваше приложение, прежде чем оно сможет быть обслужено.
Vite улучшает время запуска сервера разработки, сначала разделяя модули в приложении на две категории: зависимости и исходный код.
Зависимости в основном представляют собой простой JavaScript, который не часто меняется во время разработки. Обработка некоторых больших зависимостей также довольно затратна.
Vite предварительно связывает зависимости с помощью esbuild.
Исходный код часто содержит нестандартный JavaScript, который необходимо преобразовать (например, компоненты JSX, CSS или Vue/Svelte), и будет очень часто редактироваться. Кроме того, не весь исходный код нужно загружать одновременно (например, при разделении кода на основе маршрута).
Vite предоставляет исходный код поверх нативного ESM. По сути, это позволяет браузеру взять на себя часть работы сборщика: Vite нужно только преобразовывать и обслуживать исходный код по запросу, когда браузер его запрашивает.
Улучшенное обновление кода:
Когда файл редактируется в настройке сборки на основе сборщика, неэффективно перестраивать весь пакет по очевидным причинам: скорость обновления будет снижаться линейно с размером приложения.
Некоторые серверы разработки пакетов запускают сборку в памяти, поэтому ему нужно только аннулировать часть своего графа модуля при изменении файла, но ему все равно нужно перестроить весь пакет и перезагрузить веб-страницу. Реконструкция пакета может быть дорогостоящей, а перезагрузка страницы сбрасывает текущее состояние приложения.
В Vite HMR выполняется поверх собственного ESM. Когда файл редактируется, Vite нужно только точно аннулировать цепочку между редактируемым модулем и его ближайшей границей HMR (в большинстве случаев только сам модуль), что делает обновления HMR постоянно быстрыми независимо от размера вашего приложения.
Преимущества Вите.
Мгновенный запуск сервера.
Молниеносный HMR.
Оптимизированная сборка.
Универсальные плагины.
Полностью типизированные API.
Если вы хотите подробно узнать о том, как работает Vite, я рекомендую вам перейти по ссылке ниже.
