Vite 3.0 против Create React App: Сравнение и руководство по миграции

Автор: Дэвид Омотайо✏️

Create React App (CRA) сыграл ключевую роль в развитии сообщества React и его экосистемы в целом. Это инструмент, который выбирают разработчики разной квалификации, когда нужно создать локальную среду разработки React по своей прихоти. CRA может похвастаться несколькими отличительными особенностями, которые делают его труднодостижимым, наиболее заметными из которых являются: локальный сервер разработки, горячая замена модулей (HMR) и сборка для производства.

Однако у CRA есть существенный недостаток, который заключается в постепенном снижении скорости и производительности.

По мере роста размера и сложности приложения производительность Create React App падает, а время, необходимое для запуска сервера разработки, значительно увеличивается. Это делает CRA непригодным для производства.

В этом руководстве мы представим Vite, инструмент сборки, построенный на esbuild. Мы расскажем обо всем, что вам нужно знать, чтобы начать создавать React-приложения с помощью Vite. Мы также рассмотрим различия между Vite и CRA и продемонстрируем, как перейти с Create React App на Vite.

Перейти вперед:

• Предварительные условия
• Что такое Vite?
• Как работают Vite и Create React App?
• Create React App в разработке
• Vite в разработке
• Почему стоит использовать Vite?
  • Превосходная производительность
  • Широкая совместимость с плагинами
  • Более быстрые обновления
  • Ускоренное время сборки
• Настройка проекта React с помощью Vite 3.0
• Перенос проекта Create React App в Vite
• Различия между Create React App и Vite
  • Абсолютный импорт
  • Переменные окружения

Предварительные условия

Чтобы следовать части этой статьи, вам понадобится следующее:

• Node.js v14.18 или выше
• Браузер с поддержкой нативных ES-модулей (ESM) и динамического импорта; большинство современных браузеров имеют такую поддержку
• Менеджер пакетов, например npm или Yarn.

Что такое Vite?

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

Vite построен на базе esbuild, JavaScript bundler, написанного на Go, который собирает зависимости в 10-100 раз быстрее, чем JavaScript bundlers.

Vite был создан Эваном Ю, создателем Vue.js. Однако он не зависит от платформы, то есть может использоваться для разработки приложений на JavaScript/TypeScript с поддержкой таких популярных библиотек, как React, Svelte, Preact, и даже ванильного JavaScript.

Vite использует встроенный ESM браузера для разбора и компиляции вашего кода по мере того, как браузер запрашивает его. Затем он предоставляет исходный файл с помощью такого плагина, как Koa (легкий веб-сервер Node.js), чтобы создать сервер разработки с поддержкой Hot Module Replacement (HMR) для обновления обслуживаемых модулей и Rollup для производственных сборок.

Как работают Vite и Create React App?

Vite и CRA не настолько разные, как вы можете подумать. В своей основе они делают практически одно и то же — обслуживают локальный сервер разработки и собирают коды для производства. Основное различие, которое вы заметите, заключается в том, как код обслуживается в процессе разработки и какие модули поддерживаются.

Create React App — это среда разработки, которая помогает ускорить процесс разработки, позволяя разработчикам сосредоточиться на коде, а не на настройке инструментов сборки.

CRA использует сторонний инструмент сборки под названием webpack для обработки своих основных функций под капотом. Это именно то, с чем сталкивается Vite.

Итак, что такое webpack? webpack, как и Vite, представляет собой инструмент для сборки модулей JavaScript. Но в отличие от Vite, webpack поддерживает более одного модуля из коробки:

• ESM
• CommonJS
• Asynchronous Module Definition (AMD) API

webpack использует любую из этих систем модулей JavaScript для объединения активов и модулей в один или несколько статических активов, затем он использует веб-сервер Express.js и webpack-dev-server для обслуживания контента из свернутого актива с поддержкой HMR.

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

Создание React-приложения в процессе разработки

Когда вы впервые начинаете разработку CRA, первое, что делает webpack, это использует точку входа приложения (файл index.js) для создания дерева зависимостей из всех модулей проекта.

Затем он переносит код с помощью Babel, собирает код в пучок и передает его на веб-сервер Express.js. Наконец, он устанавливает сокеты, которые будут обрабатывать горячую замену модулей.

Хотя этот подход быстрее и позволяет сосредоточиться на коде, у него есть существенный недостаток.

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

Вот визуальное изображение процесса разработки CRA:

Vite в разработке

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

Vite не нужно связывать все приложение или транспонировать модули и код перед запуском сервера разработки; транспонирование выполняется по требованию, что значительно быстрее, чем CRA.

После обслуживания приложения Vite использует разделение кода на основе маршрутов, чтобы определить, какая часть кода должна быть загружена, вместо того чтобы перестраивать и перезагружать всю страницу, как CRA. Далее, он использует браузер для разбора встроенных модулей ES из точки входа приложения.

Это означает, что браузер будет читать утверждения import и export в вашем коде и делать HTTP-запросы обратно на сервер для каждого импорта. Затем dev-сервер перехватывает эти запросы и выполняет преобразование кода, где это необходимо.

Модули без изменений возвращают код состояния 304 «не изменен», поэтому браузер просто игнорирует их. Таким образом, браузеру не приходится перезагружаться, а приложение сохраняет свое состояние.

Вот наглядное изображение процесса разработки Vite:

Почему стоит использовать Vite?

Ранее мы рассмотрели несколько преимуществ использования Vite для разработки приложений на React. Теперь давайте подробнее рассмотрим преимущества Vite.

Превосходная производительность

В процессе предварительной комплектации Vite конвертирует зависимости, поставляемые в виде CommonJS или UMD, в ESM. Это преобразование происходит потому, что Vite поддерживает только ESM и по умолчанию обслуживает родной ESM-код.

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

Широкая совместимость с плагинами

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

Более быстрые обновления

Ранее мы уже рассказывали о том, как скорость HMR значительно снижается в сервере на основе комплекта поставки по мере увеличения размера приложения.

В Vite HMR выполняется через собственный ESM. Когда изменения происходят в модуле, который принимает горячие обновления, Vite нужно только точно аннулировать модуль. Это позволяет ускорить время обновления HMR, независимо от размера приложения.

Более быстрое время сборки

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

Настройка проекта React с помощью Vite 3.0

Чтобы создать приложение Vite, зайдите в терминал вашей машины, cd в нужную папку и выполните следующую команду:

npm create vite@latest

После выполнения команды CLI предложит вам указать имя проекта. В нашем случае мы будем использовать имя по умолчанию vite-project. Далее мы выберем react из списка доступных шаблонов. Обычно это занимает не более 10 секунд.

В качестве альтернативы вы можете указать выбранный вами шаблон в команде и не проходить через подсказку.

Это можно сделать, добавив флаг --template, за которым следует название фреймворка:

npm init vite@latest vite-project --template react

Далее, cd в папку проекта, установите необходимые зависимости и запустите dev-сервер следующими командами:

cd vite-project
npm install
npm run dev

После выполнения этих команд сервер разработки будет запущен и будет работать на порту 5173. Обычно Vite требуется всего 1325 мс, чтобы обслужить приложение.

Теперь откройте браузер и введите localhost:5173. Вы увидите страницу, похожую на приведенную ниже, с кнопкой подсчета.

Вот и все! Мы успешно настроили среду разработки Vite React!

Далее мы рассмотрим, как перенести проект Create React App в Vite.

Перенос проекта Create React App в Vite

Если у вас есть существующий проект CRA, перенести его в Vite довольно просто.

В качестве первого шага откройте файл package.json в папке проекта и удалите react-scripts из списка зависимостей:

  "dependencies": {
    ...
    "react-scripts": "5.0.1",
    ...
  },  

Затем добавьте "devDependencies" со следующим содержанием:

  "devDependencies": {
    "@vitejs/plugin-react": "^2.0.1",
    "vite": "^3.0.7"
  },  

N.B., рекомендуется всегда использовать последнюю версию. Теперь замените скрипты:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

на следующие:

  "scripts": {
    "start": "vite",
    "build": "vite build",
  },  

Затем перейдите к файлу index.html в папке Public и удалите все %PUBLIC_URL%/префиксы в путях к ссылкам:

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

Замените удаленный префикс следующим:

<link rel="icon" href="./public/favicon.ico" />
 ...
<link rel="apple-touch-icon" href="./public/logo192.png" />
 ...
<link rel="manifest" href="./public/manifest.json" />

Затем добавьте скрипт точки входа внутри элемента body, чуть ниже div root:

<script type="module" src="/src/index.jsx"></script>

Но прежде чем это сделать, переименуйте каждый файл .js, содержащий коды React, в файл .jsx. Например, вы переименуете файл index.js в index.jsx.

Затем переместите файл index.html в корневую папку.

Следующим шагом будет создание конфигурационного файла Vite, удаление папки node modules и переустановка зависимостей.

Начните с создания файла vite.config.js в корневой папке и добавьте следующий код:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
})

Затем перейдите в корневую папку и удалите папку node_modules. Затем выполните следующую команду для переустановки зависимостей и запуска сервера разработки:

npm install
npm start

Теперь, если вы откроете браузер и перейдете на localhost:5173, сервер разработки должен успешно загрузиться.

Различия между Create React App и Vite

Мы рассмотрели, как работают CRA и Vite, и рассмотрели некоторые преимущества использования Vite перед CRA. Теперь давайте рассмотрим некоторые различия между этими инструментами.

Абсолютный импорт

Когда вы начнете разрабатывать с Vite, первое, что вы, вероятно, заметите, это разницу в разрешении путей. В отличие от CRA, Vite не имеет встроенного пути src.

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

import Cards from "components/cards";

вам нужно будет импортировать их следующим образом:

import Cards from “/src/components/cards.jsx”

К счастью, существует исправление для разрешения этого пути.

Перейдите в корневую папку проекта, откройте файл vite.config.js и замените существующий код:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
}); 

следующим:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  resolve: {
    alias: [
      {
        find: "common",
        replacement: resolve(__dirname, "src/common"),
      },
    ],
  },

  plugins: [react()],
});

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

Переменные окружения

Еще одно различие между Create React App и Vite заключается в соглашении об именовании переменных окружения. Если вы используете переменные окружения в своем проекте, вам нужно заменить префикс REACT_APP_ на VITE_.

//Instead of this 
REACT_APP_ API_KEY = 1234567890..
//Use this
VITE_API_KEY = 1234567890..

Изменение переменных по одной может быть хлопотным делом, особенно если у вас много переменных в файле .env. К счастью, пакет vite-plugin-env-compatible позволяет использовать переменные окружения без изменения их имен.

Используйте следующую команду для установки пакета vite-plugin-env-compatible:

npm i vite-plugin-env-compatible

Далее перейдите к файлу vite.config.js в корневой папке проекта и добавьте следующий код:

import envCompatible from 'vite-plugin-env-compatible';

export default defineConfig({
    ...
  envPrefix: 'REACT_APP_',

  plugins: [
    react(),
    envCompatible
  ],
});

Свойство envPrefix укажет Vite использовать переменные с префиксом REACT_APP_. Теперь вы можете использовать переменные окружения в своем проекте без изменения имен. Однако вам все равно придется заменить process.env на import.meta.env в своем коде.

Вы можете использовать функцию поиска в вашей IDE, чтобы быстро найти и заменить каждый process.env в вашей кодовой базе.

Заключение

В этой статье мы представили Vite, сравнили его основные концепции с концепциями Create React App и рассмотрели, как оба инструмента работают в процессе разработки. Мы также рассмотрели преимущества использования Vite и продемонстрировали, как перенести проект Create React App в Vite.

LogRocket проактивно обнаруживает и диагностирует наиболее важные проблемы в ваших приложениях React

Тысячи инженерных и продуктовых команд используют LogRocket, чтобы сократить время, необходимое для понимания первопричины технических и юзабилити проблем в приложениях React. С LogRocket вы будете тратить меньше времени на разговоры с клиентами и устраните бесконечный процесс поиска и устранения неисправностей. LogRocket позволит вам тратить больше времени на создание новых вещей и меньше времени на исправление ошибок.

Проактивно исправляйте свои приложения React — попробуйте LogRocket уже сегодня.