Frontend Academy · Урок

Vite: сервер разработки и сборка

Создайте проект Vite, используйте его мгновенный сервер разработки с HMR, запускайте команду сборки и просматривайте результат для production.

«Vite: сервер разработки и сборка» — бесплатный урок Frontend Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.

Что такое Vite

Vite — инструмент сборки фронтенда нового поколения, созданный Evan You (автором Vue). Он предоставляет чрезвычайно быстрый сервер разработки с использованием нативного ESM и esbuild, а также сборку для продакшена на основе Rollup.

Создание проекта Vite

npm create vite@latest создаёт каркас нового проекта. Выберите фреймворк (Vanilla, React, Vue, Svelte, Preact, Lit) и вариант (JS или TS). Проект сразу готов к работе — настройка не требуется.

npm create vite@latest my-app
# Choose: React + TypeScript

cd my-app
npm install
npm run dev  # dev server on localhost:5173

Сервер разработки — мгновенный запуск

В режиме разработки Vite не собирает приложение в единый бандл. Он отдаёт каждый файл как нативный модуль ESM. Браузер импортирует их напрямую. Отсутствие сборки означает холодный запуск менее чем за 100 мс независимо от размера проекта. При HMR перекомпилируются только изменённые файлы.

HMR — горячая замена модулей

HMR в Vite заменяет только изменённый модуль в работающем приложении, не перезагружая всю страницу. В React с @vitejs/plugin-react состояние компонентов сохраняется во время HMR. Изменения появляются менее чем за 50 мс.

vite.config.js / vite.config.ts

Vite настраивается с помощью файла vite.config.ts. Распространённые параметры: плагины, псевдонимы для разрешения импортов, порт сервера, прокси для вызовов API и каталог с результатами сборки.

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': '/src' },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
});

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

Vite предоставляет переменные окружения с префиксом VITE_ через import.meta.env. Храните их в файлах .env, .env.development и .env.production. Никогда не используйте префикс VITE_ для секретов — они попадут в бандл браузера.

# .env
VITE_API_URL=https://api.example.com

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

npm run build — сборка для продакшена

npm run build запускает Rollup для сборки, минификации и удаления неиспользуемого кода приложения. Результат помещается в папку dist/ и готов к развёртыванию.

npm run build
# Output:
# dist/
#   index.html
#   assets/
#     index-a1b2c3.js  (minified app bundle)
#     vendor-d4e5f6.js  (node_modules chunk)
#     index-7h8i9j.css

Анализ бандла

Используйте vite-bundle-visualizer или rollup-plugin-visualizer, чтобы создать древовидную карту содержимого бандла. Это помогает выявить слишком крупные зависимости и возможности для отложенной загрузки.

npm run preview

npm run preview локально предоставляет собранную для продакшена версию dist/. Используйте эту команду, чтобы проверить сборку перед развёртыванием: она выявляет проблемы, которые появляются только тогда, когда приложение работает не в режиме разработки.

Разбиение кода в Vite

Динамические операторы import() автоматически создают отдельные чанки. Отложенные маршруты React Router и defineAsyncComponent во Vue также запускают разбиение. Проверяйте размеры чанков в результате сборки.

Vite для библиотек

Режим библиотеки Vite (build.lib) собирает npm-библиотеки и создаёт форматы ESM и CJS. Укажите список внешних зависимостей, чтобы не включать в бандл зависимости, предоставляемые пользователем, например React.

Быстрая проверка

Почему сервер разработки Vite работает быстрее сервера webpack?

Итоги: Vite

npm create vite@latest мгновенно создаёт каркас проекта. Сервер разработки использует нативный ESM — без сборки, с мгновенным HMR. vite.config.ts предназначен для плагинов, псевдонимов и прокси. Префикс VITE_ используется для безопасных для браузера переменных окружения. npm run build создаёт оптимизированный бандл Rollup. npm run preview локально проверяет сборку для продакшена.

Часто задаваемые вопросы

Урок «Vite: сервер разработки и сборка» бесплатный?

Да — полный текст урока «Vite: сервер разработки и сборка» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.

Чему я научусь в уроке «Vite: сервер разработки и сборка»?

Создайте проект Vite, используйте его мгновенный сервер разработки с HMR, запускайте команду сборки и просматривайте результат для production. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Frontend Academy?

Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Vite: сервер разработки и сборка»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Frontend Academy?

Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

ES-модули: import, export и динамический import
npm и package.json: зависимости и скрипты
Vite: сервер разработки и сборка
Основы сборки: tree shaking и разделение кода

← Назад к Frontend Academy