На всякий случай, если вы задаетесь вопросом, как увеличить скорость работы вашего сервера разработки, если у вас уже есть проект с нашим прекрасным приложением react, здесь я покажу вам, как внедрить Vite в ваш проект и ощутить ту скорость, о которой вы всегда мечтали.
Также, если вам интересно, что такое Vite и, возможно, вы хотите его использовать, вы можете ознакомиться с моим последним уроком «Как использовать Vite с React».
Без лишних слов…
Что вам нужно иметь в наличии.
- Запущенное приложение react
- Хорошая сеть
Затем
Установите необходимые пакеты из терминала следующим образом
$ yarn add vite @vitejs/plugin-react-refresh
Создайте файл vite.config.js в вашей корневой папке и добавьте следующий код
// vite.config.js
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
export default defineConfig({
plugins: [reactRefresh()]
})
Этот файл config будет предварительно связывать ваши зависимости, когда sever запущен.
В корневой папке также отредактируйте файл package.json. Он определяет пакет для запуска, сборки и предварительного просмотра приложения с начального запуска react-create start…
// package.json
"scripts": {
"start": "vite",
"build": "vite build",
"test": "vite test",
"eject": "vite eject"
},
Еще из корневой папки откройте папку /public и переместите файл index.html в родительскую папку.
В файле удалите все %PUBLIC_URL%, прикрепленные к любому <link.../> и тегу <script> и, следовательно, ссылку на соответствующий каталог, например, /src/index.js/.
<!-- Before edit -->
<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" />
<!-- After edit -->
...
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/logo192.png" />
<link rel="manifest" href="/manifest.json" />
<body>
...
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
Наконец,
Теперь вы можете запустить
$ yarn start
Счастливого кодирования.