В экосистеме Vue появился новый инструмент сборки под названием Vite, его сервер разработки в 10-100 раз быстрее, чем Vue CLI.
Означает ли это, что Vue CLI устарел?В этой статье я сравню два инструмента сборки и объясню их плюсы и минусы, чтобы вы могли решить, какой из них подходит для вашего следующего проекта.
Обзор интерфейса командной строки Vue
Большинство разработчиков Vue знают, что Vue CLI — незаменимый инструмент для быстрой настройки проектов на основе Vue с использованием стандартных инструментов сборки и передовых конфигураций.
К его основным функциям относятся:
- Инженерные леса
- Сервер разработки с горячей перезагрузкой модуля
- Система плагинов
- Пользовательский интерфейс
В этом обсуждении важно отметить, что Vue CLI построен поверх Webpack, поэтому как сервер разработки, так и функциональность и производительность сборки будут расширенным набором Webpack.
Обзор Vite
Подобно Vue CLI, Vite также является инструментом сборки, который обеспечивает базовую структуру проекта и сервер разработки.
Однако Vite не основан на Webpack, у него есть собственный сервер разработки, который использует собственные модули ES в браузере. Эта архитектура делает Vite на несколько порядков быстрее, чем сервер разработки Webpack. Vite построен с помощью Rollup, который также работает быстрее.
В настоящее время Vite находится в стадии бета-тестирования, и кажется, что цель проекта Vite не в том, чтобы быть универсальным инструментом, таким как Vue CLI, а в том, чтобы сосредоточиться на предоставлении быстрого сервера разработки и базовых инструментов сборки.
Как Vite такой быстрый?
Сервер разработки Vite будет как минимум в 10 раз быстрее, чем Webpack. Для базового проекта время сборки/перестроения разработчика отличается на 250 мс по сравнению с 2,5 секундами.
В более крупном проекте эта разница становится более заметной. Сервер разработки Webpack может работать 25-30 секунд при сборке/восстановлении, иногда даже медленнее. Между тем, сервер разработки Vite может обслуживать один и тот же проект с постоянной скоростью 250 мс.
Это, очевидно, разница в опыте разработки и изменении игры, как Vite делает это?
Архитектура сервера разработки Webpack
Принцип работы Webpack заключается в том, что он анализирует каждыйimportа такжеrequire, собирает все приложение в пакет на основе JavaScript и преобразует файлы (например, Sass, TypeScript, SFC) во время выполнения.
Все это делается на стороне сервера, и существует примерно линейная зависимость между количеством зависимостей и временем сборки/перестроения после изменения.
Архитектура сервера разработки Vite
Vite не объединяет сервер приложений. Вместо этого он опирается на встроенную в браузер поддержку модулей JavaScript (относительно новая функция, также известная как модули ES).
Браузер будет запрашивать любые модули JS через HTTP, когда это необходимо, и обрабатывать их во время выполнения. Сервер разработки Vite преобразует любой файл (например, Sass, TypeScript, SFC) по требованию.
Эта архитектура позволяет избежать связывания всего приложения на стороне сервера и использует эффективную обработку модулей браузером, обеспечивая значительно более быстрый сервер разработки.
Совет: Vite работает быстрее, когда вы разделяете код и встряхиваете свое приложение, потому что он загружает только те модули, которые ему нужны, даже во время разработки. Это отличается от Webpack, где разделение кода полезно только для производственных пакетов.
Недостатки Вайт
Как вы, возможно, уже поняли, главная особенность Vite заключается в том, что его сервер разработки невероятно быстр.
Без этой функции она, вероятно, не обсуждалась бы дальше, поскольку у нее действительно нет других функций по сравнению с Vue CLI, и у нее есть некоторые недостатки.
Поскольку Vite использует модули JavaScript, лучше всего, чтобы зависимости также использовали модули JavaScript. В то время как большинство современных пакетов JS предоставляют это, некоторые старые пакеты могут предоставлять только модули CommonJS.
Vite может преобразовывать модули CommonJS в модули JavaSript, но в некоторых крайних случаях это может быть невозможно. Конечно, для этого также требуется браузер, поддерживающий модули JavaScript.
В отличие от Webpack/Vue CLI, Vite не может создавать пакеты, предназначенные для старых браузеров, веб-компонентов и т. д.
Кроме того, в отличие от Vue CLI, сервер разработки и инструменты сборки — это разные системы, что может привести к потенциально несовместимому поведению в производстве и разработке.
Vue CLI против Vite Резюме
| Преимущества интерфейса командной строки Vue | Недостатки Vue CLI |
|---|---|
| испытан в боях и надежен | Скорость сервера разработки обратно пропорциональна количеству зависимостей |
| Совместимость с Вью 2 | |
| Может связывать любые типы зависимостей | |
| Экосистема плагинов | |
| Может быть построен для разных целей |
| Преимущества Вайт | Минусы |
|---|---|
| Сервер разработки в 10-100 раз быстрее, чем Webpack | Только для современных браузеров (ES2015+) |
| Сделайте разделение кода приоритетом | Не полностью совместим с модулями CommonJS. |
| В бета-версии поддерживает только Vue 3 | |
| Минимальные леса не включают Vuex, маршрутизаторы и т. д. | |
| Различные серверы разработки и инструменты сборки |
Итак, каков вердикт?
Для опытных разработчиков Vue Vite — отличный вариант, потому что его сервер разработки невероятно быстр и делает Webpack похожим на доисторические времена.
Тем не менее, для новых разработчиков Vue, которые предпочитают некоторые практические действия, или для более крупных проектов, использующих устаревшие модули и требующих сложных сборок, Vue CLI, вероятно, пока останется необходимым.
Будущее Вите
Хотя приведенное выше сравнение в основном сосредоточено на текущем состоянии Vite и Vue CLI, необходимо учитывать несколько моментов:
- Vite улучшится только в том случае, если улучшится поддержка модуля JavaScript в браузере.
- По мере того, как экосистема JS наверстывает упущенное, все больше пакетов будут поддерживать модули JavaScript, что уменьшит количество крайних случаев, с которыми Vite не может справиться.
- Vite все еще находится в стадии бета-тестирования — функции могут быть изменены.
- Вполне возможно, что Vue CLI в конечном итоге объединится с Vite, так что вам больше не придется использовать ни тот, ни другой.
Стоит отметить, что Vite — не единственный проект сервера разработки, использующий модули JavaScript в браузере. и более известныйSnowpack, и может даже вытеснить развитие Vite. Время покажет
Ссылаться на
оригинал:blog.Zhang Bing.site/2020/12/18/…
источник:vuejsdevelopers.com