На этой неделе мы отмечаем достижение важной вехи в дорожной карте Quasar. Интеграция Vite в качестве драйвера Quasar CLI, а также в качестве лучшей альтернативы более медленному и сложному CLI на основе Webpack.
Быстрое вводное видео
Почему Vite?
Если вы еще не слышали о Vite и почему он так хорош, у Vite есть следующие основные преимущества:
(из документации Vite)
Сервер разработки, который обеспечивает богатые возможности по сравнению с родными модулями ES, например, чрезвычайно быструю горячую замену модулей (HMR).
Команда сборки, которая объединяет ваш код с Rollup, предварительно настроенным для вывода высоко оптимизированных статических активов для производства.
Другими словами, основной целью Эвана Ю (создателя Vue) при создании Vite (произносится как veet) было значительное улучшение опыта разработчиков. Он увидел, что текущий процесс создания пакета, а затем загрузки приложения в браузер и разработки с помощью Hot-Module-Replacement (HMR) может быть улучшен с помощью новой системы разрешения модулей ES, доступной во всех браузерах.
Такова версия TLDR. Если хотите, вы также можете ознакомиться с более техническими причинами.
В итоге, отказ от этапа пакетирования или упаковки при первоначальной сборке, в том числе и при HMR, экономит массу времени даже в самых маленьких проектах (см. ниже). Но это преимущество становится особенно заметным, когда ваш проект становится даже отдаленно больше.
Первоначальная загрузка нового проекта Quasar с Webpack
Начальная загрузка нового проекта Quasar с помощью Vite
Хорошо. Разница с начальным проектом не столь значительна, но она есть. Подумайте вот о чем. Когда ваш проект начнет расти, производительность CLI на базе Vite при создании приложения останется примерно такой же или будет лишь немного замедляться при первоначальном запуске. Производительность Webpack будет снижаться гораздо сильнее по мере роста размера вашего проекта. Другими словами, то, что вы видите здесь в качестве начальной скорости запуска, является примерно тем, что вы будете иметь для проекта любого размера. Кроме того, любые обновления от HMR будут мгновенными при использовании Vite. При использовании Webpack эта производительность также снижается с ростом размера проекта.
Когда появился Vite, команде сразу стало ясно, что Quasar нужно будет его интегрировать. Таким образом, это был не вопрос «Если», а скорее «Когда?». Это был просто вопрос времени, доступности разработчиков с Разваном и наших прерогатив, чтобы это произошло. Нашей первой главной целью было перевести Quasar на Vue 3. Это произошло в прошлом году. Все это время Vite становился все лучше и стабильнее. И в этом году Quasar теперь имеет CLI, основанный на Vite.
Насколько это круто? 🤩
Начало работы
Если вы хотите просто начать работу с Vite в новом проекте, все, что вам нужно сделать, это запустить…
$ yarn create quasar
# or:
$ npm init quasar
Примечание: Команда quasar create больше не используется для проекта Quasar с новым CLI (>1.3.0).
ПРИМЕЧАНИЕ2: на момент публикации этой статьи Vite CLI все еще находился в стадии BETA. Таким образом, он не готов к производству, если все еще находится в статусе бета-версии или RC!!!
Во время выполнения приведенной выше команды процесс создания проекта будет задавать вам вопросы для создания проекта. Ответьте на вопросы как можно лучше. Если вы не знаете, что ответить, нажмите enter для значений по умолчанию (за исключением Vite CLI). После завершения процесса создания проекта перейдите в папку только что созданного проекта и запустите…
$ quasar dev
И вот вы уже готовы… молниеносная разработка у вас под рукой!!!
Миграция
Возможно, у вас есть проект Quasar, и вы хотите перенести его в новый Vite CLI. Если это так, то давайте познакомимся с официальным руководством по миграции.
В общих чертах, руководство по миграции проведет вас через следующие шаги:
- Создайте новый проект с самой новой версией (глобальной) Quasar CLI.
- Скопируйте определенные папки в новый проект из старого проекта, а также внесите небольшие правки в определенные файлы.
- Обновите файл
quasar.config.js, заметив в нем изменения изquasar-conf.js) с новыми настройками, если они вам понадобятся. - Обновите
package.json, чтобы удалить записьbrowserlist(если хотите). Он больше не действителен и не нужен, по крайней мере, для Vite. - Удалите папку для SSR и переместите другую.
- Для PWA вам нужно переместить манифест в
quasar.config.js. - Если вы используете режим BEX, вам также нужно будет перенести файлы манифеста вручную.
Итак, не так много работы, необходимой для получения гораздо лучшего DX.
Опять же, более подробную информацию можно найти в руководстве по миграции.
Вот и все!
Дайте нам знать в комментариях о том, что вы думаете! Vite с Quasar — это круто или нет?
Следите за новостями Quasar.
Quasar в Twitter
Quasar на Facebook
Quasar на Discord
Quasar на Github