«Эта статья участвовала в мероприятии Haowen Convocation Order, щелкните, чтобы просмотреть:Двойные заявки на внутреннюю и внешнюю стороны, призовой фонд в 20 000 юаней ждет вас, чтобы бросить вызов!"

1. Что такое Вайт

В апреле 2020 года Юда написал в Твиттере:

Затем, в феврале 2021 года, появился Vite 2.0, и это была комбинация ударов:

на основеesbuildРеализован чрезвычайно быстрый опыт разработки
Поддержка нескольких кадров
Совместимый с Rollup механизм плагинов и API
поддержка ССР
Поддержка старого браузера

Сначала я отказался от него, от grunt, gulp до Webpack, Rollup, Snowpack и нескольких известных и неизвестных фреймворков сборки, все они в 2021 году, все еще будут? Потом попробовала, ну очень вкусно!

2. Преимущества Vite

2.1 очень быстро

Vite очень, очень быстр по сравнению с Vue-cli (на основе Webpack):

	Время запуска разработчика	Скорость загрузки страницы разработки	Продолжительность сборки
Vue-cli	2568ms	320ms	5.14s
Vite	232ms	379ms	2.39s

Пример кода: проект Vue3, 10 компонентов

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

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

И Vite делает только две вещи после запуска команды Dev: одна — запускать службу для размещения служб ресурсов; другая — использоватьesbuildГотовые зависимости npm. После этого он оставался там, пока браузер не отправил запрос модуля спецификации ESM в виде http, Vite начал "компилировать по запросу"Запрашиваемый модуль.

Предпосылка предустановки Vite здесь:

Большинство современных браузеров уже изначально поддерживают спецификацию ESM и инструменты сборки — особенно в среде разработки, нет необходимости тратить много времени на компиляцию и упаковку для совместимости с низкими версиями!

В этом сравнении Webpack делает все, и браузеру нужно только запустить скомпилированный код низкой версии (es5); в то время как Vite обрабатывает только часть проблемы, а остальное браузер обрабатывает сам, поэтому скорость должна быть вор быстро.

Помимо пропуска операции компиляции на этапе запуска, Vite имеет множество оптимизаций производительности, о которых стоит упомянуть.Давайте разберемся в целом:

Предварительная компиляция: модули, которые в основном не меняются, например пакеты npm, используют Esbuild вготовыйЭтап сначала упаковывается и организуется для уменьшения количества http-запросов.
Компиляция по запросу: модули, которые часто изменяются, например пользовательский код, не будут компилироваться до тех пор, пока они не будут использованы.
Сильное кэширование на стороне клиента: запрошенные модули будут отправлены с заголовками http.max-age=31536000,immutableУстановите сильный кеш, сделайте его недействительным с дополнительным запросом версии, если модуль изменится
Оптимизация продукта: по сравнению с Webpack, Vite напрямую привязывает браузеры высокой версии, и ему не нужно вставлять слишком много кода среды выполнения и шаблона в продукт сборки.
Встроенная улучшенная реализация субподряда: вмешательство пользователя не требуется, а ряд интеллектуальных правил субподряда включен по умолчанию, чтобы максимально сократить повторную упаковку модулей.
Лучшая обработка статических ресурсов: Vite пытается избежать прямой обработки статических ресурсов и вместо этого предпочитает следовать методу ESM для предоставления услуг, таких как импорт изображений.import img from 'xxx.png'заявление, после выполненияimgПеременная — это просто строка пути.

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

2.2 Простой

Использовать Vite очень просто, выполните команду инициализации:

yarn create @vitejs/app my-vue-app --template vue

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

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

Производительность Vite легко напоминает vue-cli, но разница между ними довольно велика: vue-cli полагается на Webpack внизу, а фактическая работа по строительству обычно выполняется различными загрузчиками и плагинами Webpack, такими как less => css за счет реализации less -loader, загрузка изображений осуществляется через img-loader и т.д. Этот набор дизайна очень гибкий.Вы можете вносить любые изменения, которые вы можете придумать в системе Webpack.Вам нужно только немного изучить Webpack, включая сотни элементов конфигурации, тысячи плагинов и некоторые иллюзорные концепции построения.

Vite очень прост. Он предоставляет только несколько элементов конфигурации и интерфейсов плагинов. Он не предназначен для того, чтобы вы могли выполнять слишком много пользовательских операций. . . Это связано с тем, что Vite с самого начала не планировал создавать еще один Webpack, а планировал создать набор «инструментов для создания внешнего интерфейса, которые могут значительно улучшить опыт разработки внешнего интерфейса», сосредоточив внимание наопыт разработкиАх, студенты, Vite из лучших побуждений, изо всех сил старается снизить стоимость обучения, он не хочет, чтобы вы изучали множество сложных и неземных концепций, чтобы использовать инструменты, и надеется, что эти вещи защищены в уровень фреймворка - хотя цена - потеря гибкости.

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

2.3 Экология

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

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

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

3. Недостатки Вайта

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

3.1 Совместимость

По умолчанию и dev, и build будут напрямую печатать ESM-версию пакета кода, что требует, чтобы клиентский браузер имел относительно новую версию, что немного сложно в текущих национальных условиях.

Однако Vite также предоставляет некоторые методы компенсации, используяbuild.polyfillDynamicImportкоординация элемента конфигурации @vitejs/plugin-legacyУпакуйте версию, которая выглядит более совместимой, я думаю, что со временем это будет сглажено.

3.2 Отсутствующая витрина

Vite настолько нов, что официальная версия 2.0 не вышла до недавнего времени.Сообщество не очень хорошо отреагировало.Естественно больших и сложных коммерческих кейсов по посадке нет.Никто не может сказать,сколько там может быть ям.

Хорошей новостью, однако, является то, что за последние месяцы количество поисковых запросов Vite в сообществе резко выросло:

Данные из индекса Google

Я верю, что скоро появится большое количество евангелистов, ведь это дело действительно очень конкурентное.

3.3 Рассмотрение

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

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

3. Резюме

Vite вдохновил меня больше всего: Webpack не является стандартным ответом, инструменты для сборки интерфейса могут иметь несколько новых способов игры:

Пакетне цель,бегатьПравильно, это 2021 год. Что может сделать браузер, остается за браузером.
Гибкая структура может означать неконтролируемый объем разработки для авторов, высокие затраты на обучение для пользователей и повторяющиеся дебаты, такие как пробелы или табуляции. Затем набор встроенных различных производствЛучшие практики, Существует не так много инструментов для настройки пространства, но в некоторых случаях это может повысить эффективность каждого.

Мое личное отношение к Vite: краткосрочное выжидательное, долгосрочное очень оптимистичное.

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