Vite — это новый инструмент сборки в экосистеме Vue, который может похвастаться значительно более быстрым сервером разработки по сравнению с Vue CLI (в 10–100 раз быстрее). И Vue CLI, и Vite — популярные инструменты для создания приложений Vue.js. Они предлагают строительные леса, серверы разработки и функции сборки, но отличаются архитектурой и производительностью.

Vue CLI

Vue CLI — это инструмент для быстрой настройки проекта на основе Vue со стандартными инструментами сборки и передовой конфигурацией.

Его основные особенности включают в себя:

  • Леса проекта
  • Сервер разработки с перезагрузкой горячего модуля
  • Система плагинов
  • Пользовательский интерфейс

В этом обсуждении важно отметить, что Vue CLI построен поверх Webpack, поэтому как сервер разработки, так и функциональность и производительность сборки будут расширенным набором Webpack.

Веб-пакет

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

Webpack работает, создавая пакет всего вашего приложения на основе JavaScript, обращаясь к каждому оператору import и require в приложении и изменяя файлы по мере необходимости, такие как Sass, TypeScript и SFC (компоненты одного файла).

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

Вите

Vite — это сервер разработки и инструмент для сборки, который повышает скорость и эффективность веб-разработки. Он предлагает сервер разработки, который обслуживает ваш проект, пока вы над ним работаете, с функцией мгновенной горячей замены модуля (HMR), которая позволяет вам наблюдать за изменениями кода в режиме реального времени.

В отличие от Vue CLI, Vite не использует Webpack. Вместо этого у него есть собственный сервер разработки, который использует собственные модули ES непосредственно в браузере. Vite использует Rollup для процесса сборки, что приводит к более высокой производительности по сравнению с другими методами.

Чем Vite быстрее, чем Vue CLI

Как мы упоминали ранее, и Vue CLI, и Vite предлагают скаффолдинг, серверы разработки и функции сборки, но различаются по архитектуре и производительности.

Сервер разработки Vue CLI

Сервер разработки Vue CLI основан на сервере разработки Webpack, который поставляется с возможностью горячей замены модулей (HMR).

Установка сборки на основе сборщика должна жадно сканировать и собирать все ваше приложение, прежде чем оно сможет быть обслужено.
Когда сборщик запускает процесс сборки, он сканирует точку входа приложения и следует каждому оператору import и require, чтобы идентифицировать все зависимости в проекте. Он проходит по всему графу зависимостей, гарантируя, что каждый модуль и файл, требуемые приложением, учтены. Затем он создает приложение, преобразуя, оптимизируя и объединяя модули, включая обработку JavaScript, CSS и ресурсов.
Этот подход требует завершения полного процесса сборки, прежде чем приложение можно будет обслуживать или развертывать. Изменения в кодовой базе требуют повторения всего процесса. При обеспечении надлежащей оптимизации этот подход может привести к увеличению времени сборки. В целом, настройка сборки на основе сборщика обеспечивает полную обработку приложения перед его обслуживанием.

Vite сервер разработки

Vite сокращает время запуска сервера разработки, разделяя модули на две категории.
1. Зависимости
2. Исходный код

Зависимости — это обычный JavaScript, который редко меняется. Некоторые большие зависимости требуют больших затрат для обработки. Vite предварительно связывает зависимости с помощью быстрого инструмента esbuild.
Исходный код содержит нестандартный код JavaScript, который требует преобразования и будет часто редактироваться. Vite использует исходный код как собственный ESM, позволяя браузеру обрабатывать часть пакета. Он преобразует и обслуживает код по запросу, оптимизируя загрузку для разделения кода на основе маршрутов.
Проще говоря, Vite ускоряет работу сервера разработки, быстро предварительно объединяя зависимости и предоставляя исходный код по запросу, используя возможности браузера для оптимизировать загрузку.

Когда вы создаете базовый проект Vite (в нашем случае проект Vite для Vue 3), файл index.html довольно прост:

Index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

Эта настройка напоминает Vue CLI, но с одним ключевым отличием: скрипт tag имеет атрибут type="module". Атрибут src сценария указывает непосредственно на исходный файл исходного кода.

При выполнении этого запроса файл main.js отправляется в браузер как собственный модуль ES. В результате ваш код вообще не связан. По сути, исходный файл служит базовым файлом запуска Vue.

Main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

Что здесь происходит?

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

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

Кроме того, Vite использует замену горячего модуля (HMR) для обновления измененного кода во время разработки вашего проекта. Это создает наименьшее количество трений во время разработки с почти мгновенной скоростью запуска вашего проекта.

Заключение

При создании приложений Vue.js Vite предоставляет более быстрый вариант по сравнению с Vue CLI. Он использует загрузку кода по запросу и горячую замену модулей (HMR), чтобы обеспечить более короткие циклы разработки и мгновенное обновление кода. Сокращая время сборки и перезагрузки, Vite улучшает общий процесс разработки.

Если для вас важны скорость и эффективность, выбор Vite в качестве инструмента сборки может значительно повысить производительность и ускорить разработку вашего проекта Vue.js.

Об авторе:

Тамиларасу, SDE в KBX Digital, движет страсть к изучению новых технологий и стремление к выдающимся результатам. С веселым подходом он решает проблемы, связанные с решением проблем, воодушевляя команду своим оптимизмом и энтузиазмом. Он твердо верит в силу позитива, который подпитывает его решимость добиться успеха.

О KBX Digital:

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