Введение:
Vite и Create-React-App (CRA) — это инструменты для создания интерфейсных приложений, которые обеспечивают более быструю работу разработчиков. Они предоставляют множество функций «из коробки», что значительно сокращает время разработки и доставки приложений. Они предоставляют локальный сервер разработки для локальной разработки приложений, а также предоставляют возможность получить оптимизированную производственную сборку для отправки проекта.
Различия:
- CRA используется только для Scaffolding React Applications.
- Vite можно использовать для Scaffolding vanilla JS, Vue, React и т. Д., Приложения.
Работа с CRA и Vite для React:
Давайте испачкаем руки и проверим сами. Все команды будут запускаться из терминала vs code bash.
Очистить кеш NPM:
Во-первых, прежде чем перейти к сравнению, давайте очистим кеш npm, выполнив приведенные ниже команды.
$ npm cache clean --force
Мы очищаем кеш npm, чтобы начать с нуля. В противном случае пакеты, хранящиеся в кеше, могут использоваться при формировании шаблона приложения, что сократит время.
Создать-реагировать-приложение:
Формирование шаблона приложения:
Теперь давайте попробуем CRA. Откройте терминал и выполните следующую команду, чтобы установить пакет CRA глобально.
$ npm i -g create-react-app
Теперь запустите приведенную ниже команду, чтобы создать приложение для реагирования.
$ time npx create-react-app cra-demo
Команда time в Linux отобразит сведения о прошедшем времени следующей команды. Эта команда будет работать и в терминале vs code bash.
Таким образом, для создания приложения с использованием CRA истекшее время составляет 1 minute and 50 seconds (110s).
Производственная сборка. Не внося никаких изменений в приложение, давайте запустим команду сборки, чтобы проверить размер производственного пакета.
$ npm run build
Производственная сборка будет доступна в каталоге build. Давайте проверим размер папки сборки, используя приведенную ниже команду.
$ du -sh build
Размер производственного пакета: 586K. Теперь давайте перейдем к Вите.
Использование Вите:
Формирование шаблона приложения:
Перед запуском vite давайте еще раз очистим кеш npm с помощью команды, которую мы использовали выше.
Теперь давайте создадим приложение для реагирования, используя приведенную ниже команду.
$ time npm create vite@latest vite-demo -- --template react
Большой! Он только что создал приложение в 4.5s. Но ждать! Это еще не конец. Vite просто подготовит приложение без установки каких-либо зависимостей. Нам нужно запустить еще одну команду для установки зависимостей.
$ cd vite-demo $ time npm install
Давайте замерим продолжительность установки и посмотрим.
Это снова здорово! Установка зависимостей заняла всего 15 секунд. В общей сложности VIte потребовалось примерно 20 seconds, чтобы создать приложение для реагирования. Время значительно сократилось.
Производственная сборка:
Не внося никаких изменений в приложение, давайте запустим команду сборки, чтобы проверить размер производственного пакета.
$ npm run build
Производственная сборка будет доступна в каталоге dist. Теперь проверьте размер папки сборки, используя приведенную ниже команду.
$ du -sh dist
Размер производственного пакета составляет всего 165K, что составляет менее одной трети производственной сборки, созданной React. Чем меньше размер пакета, тем быстрее рендеринг приложения браузерами.
Краткое содержание:
Сведем наши выводы в таблицу для лучшего понимания.
Заключение
Как видно из таблицы выше, Vite здесь явный победитель. Следовательно, я предпочитаю Vite CRA. Прокомментируйте свое мнение ниже.
