Create React App (CRA) уже давно является основным инструментом для многих разработчиков всех уровней квалификации, когда дело доходит до создания React-приложений (начинающих, средних и даже экспертов). Тем не менее, у него есть несколько существенных недостатков, к которым относятся скорость и производительность.
Хорошо известно, что CRA может быть несколько медленным при создании проекта и настройке сервера разработки, требуя около 5-10 минут (в зависимости от таких факторов, как жесткие диски и проблемы с подключением к Интернету). Время обычно увеличивается, поэтому я хочу познакомить вас с инструментом под названием Vite. Vite — это инструмент сборки, похожий на Webpack (CRA использует Webpack под капотом). Более подробную информацию можно найти здесь).
В этой статье я проведу вас через процесс создания React App с помощью Vite. Вы узнаете о различиях между CRA и Vite, а также о некоторых их особенностях и преимуществах, а также о том, как создать React App с помощью Vite.
Что такое Vite?
Vite, произносится /vit/, как «veet» — это следующее поколение инструментов для фронтенда. Он фокусируется на скорости и производительности, улучшая опыт разработки современных веб-проектов.
Vite создан Эваном Ю, который является создателем Vue.js, но это не инструмент только для Vue. Его можно использовать для React, Preact, Svelte, Vue, Vanilla JS и LitElements.
Он состоит из двух основных частей:
- Сервер dev, который обеспечивает поддержку Hot Module Replacement (HMR) для обновления модулей во время выполнения приложения. При внесении изменений в исходный код приложения обновляются только изменения, а не все приложение. Эта функция помогает ускорить время разработки.
- Команда сборки, которая объединяет ваш код с Rollup, предварительно настроенным для вывода высоко оптимизированных статических активов для производства.
Как работает Vite?
По своей сути, Vite делает две вещи
- Локально обслуживает ваш код во время разработки.
- Собирает Javascript, CSS и другие активы вместе для производства.
Существуют другие инструменты (bundlers), которые делают то же самое, такие как webpack, Parcel и Rollup, так чем же отличается Vite?
Проблема с вышеупомянутыми инструментами заключается в том, что они должны создавать все при каждом сохранении, и если у вас очень большое приложение, это может занять несколько минут при каждом сохранении, даже с горячей перезагрузкой в некоторых фреймворках, скорость обновления становится значительно медленнее по мере добавления кода и зависимостей в приложение.
Vite применил другой подход к этому, своего рода обратный подход. Vite запускает сервер сразу, берет зависимости, которые не меняются часто, и предварительно собирает их с помощью esbuild.
Esbuild — это инструмент сборки на Javascript, написанный на Go, который выполняет предварительную сборку зависимостей в 10-100 раз быстрее, чем сборщики на Javascript.
Давайте посмотрим на иллюстрации ниже, чтобы лучше понять, как это работает.
На приведенной выше диаграмме представлен традиционный сервер разработки на основе связок, где у нас есть точка входа, возможные маршруты и все модули, которые затем связываются вместе, после чего сервер разработки готов.
Vite, с другой стороны, использует разделение кода на основе маршрутов, чтобы выяснить, какие части кода действительно должны быть загружены, и не требует предварительной компоновки всего.
Vite предоставляет исходный код, используя встроенную поддержку ES-модуля в современных браузерах. Это позволяет браузеру взять на себя работу по пакетированию при разработке, что, соответственно, делает ваш код загружаемым мгновенно, независимо от размера приложения.
Также поддерживается функция Hot Module Replacement для чрезвычайно быстрой обратной связи во время разработки.
При сборке для производства Vite использует Rollup под капотом, поэтому вам не нужно беспокоиться о его настройке.
Почему стоит использовать Vite вместо CRA?
Возможно, вы спросите, почему вы должны использовать Vite теперь, когда мы рассказали, что это такое и как это работает.
Мы рассмотрели несколько преимуществ в предыдущем разделе, поэтому я просто выделю их здесь.
Производительность
Предварительная обвязка с помощью ESbuild позволяет в 10-100 раз быстрее, чем использование любого другого JS bundler. Это происходит потому, что он помогает улучшить скорость работы страницы и конвертировать модули CommonJS / UMD в ESM.
Горячая замена модулей (HMR)
Vite использует возможности HMR для отслеживания изменений в вашем приложении без перезагрузки всей страницы. С помощью HMR API браузер будет загружать только измененную часть страницы, сохраняя состояние приложения.
Вам не нужно вручную настраивать эти параметры — когда вы создаете приложение с помощью create-vite, выбранные шаблоны уже будут предварительно настроены для вас.
Встроенная поддержка модулей ECMAscript
Vite поддерживает модули ES нативно. Это позволяет вам разрабатывать для браузера с «голыми» импортами, такими как Typescript, и преобразовывать их в правильно версионированные импорты при сборке.
Богатые возможности
Встроенная поддержка TypeScript, JSX, CSS и многого другого.
Ознакомьтесь с другими возможностями здесь.
Предварительные условия
Прежде чем использовать Vite, вам понадобится несколько предварительных условий:
- Node.js версии 12.2.0 или выше
- Менеджер пакетов — Npm или Yarn
- Совместимый браузер для разработки
Третье требование — это браузер, поддерживающий динамический импорт. Проверить, поддерживается ли ваш браузер, можно на сайте: https://caniuse.com/es6-module-dynamic-import.
Большинство современных браузеров поддерживаются, исключение составляют Internet Explorer, Opera Mini и браузеры Baidu. Но если вы используете последнюю версию Chrome, Edge, Safari или Firefox, то все должно быть в порядке.
Создание проекта с помощью Vite
Чтобы создать приложение Vite, откройте терминал и перейдите в папку, в которой вы хотите сохранить программу Vite. Затем выполните следующую команду:
npm create vite@latest
Вам будет предложено выбрать фреймворк и вариант (шаблон). В нашем случае мы будем использовать React, поэтому выберите React.
Вы также можете напрямую указать шаблон, который вы хотите использовать, и имя проекта в одной строке:
npm init vite@latest my-react-app --template react
Примечание: my-react-app — это имя приложения Vite, которое мы хотим создать. Вы можете изменить его на любое имя, которое вам больше нравится
Далее выполните следующие команды в терминале
cd my-react-app
npm install
npm run dev
Двигаемся дальше… Выполнение вышеуказанной команды запустит сервер разработки. Затем откройте браузер и введите http://localhost:3000.
Вы должны увидеть логотип React со счетчиком и кнопкой, как показано ниже:
Заключение
Вот и все! Мы рассмотрели, что такое Vite, как он работает и некоторые его возможности. Мы также узнали, как создавать приложения с помощью Vite.
Для этого проекта команда create vite app была создана за 10 секунд. После этого я запустил npm install для установки зависимостей, что заняло 35 секунд. Таким образом, в целом проект был создан за 45 секунд. Что, я уверен, вы согласитесь, гораздо быстрее, чем CRA 😉
Я буду рад услышать ваши мысли в разделе комментариев, и если вам понравилась эта статья или вы нашли ее глубокой, поделитесь ею со своими друзьями и коллегами. Кроме того, подпишитесь на мой блог.
До следующего раза, спасибо, что читаете, и счастливого кодинга!
Прежде чем вы уйдете, вот несколько шаблонов, поддерживаемых сообществом.