0Pricing
Frontend Academy · Урок

Vite: система плагинов и режим SSR

Напишите плагин Vite с хуками transform и load, подключите сторонние плагины и настройте Vite для серверного рендеринга с параметром ssrBuild

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

Почему победил Vite

Vite (по-французски «быстро») создан Evan You. В режиме разработки он предоставляет исходные файлы без объединения через нативные модули ES — холодный запуск происходит мгновенно. В production для объединения используется Rollup. Опыт разработки значительно быстрее, чем у Webpack.

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

Современные браузеры нативно поддерживают модули ES. Vite предоставляет исходные файлы без изменений и по запросу преобразует TypeScript и JSX. Нет объединения — нет ожидания во время холодного запуска.

Горячая замена модулей

HMR заменяет модули без перезагрузки страницы. HMR в Vite построен на ESM и работает значительно быстрее, чем в Webpack. Большинство фреймворков (React, Vue и Svelte) подключаются к нему для обновления отдельных компонентов с сохранением состояния.

Основы конфигурации Vite

Настройка выполняется через vite.config.ts в корне проекта.

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

export default defineConfig({
  plugins: [react()],
  server: { port: 5173 },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom']
        }
      }
    }
  }
});

Система плагинов

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

// myPlugin.ts
export default function myPlugin() {
  return {
    name: 'my-plugin',
    transform(code, id) {
      if (!id.endsWith('.mdx')) return null;
      // transform MDX to JS:
      return { code: compileMdx(code), map: null };
    },
    handleHotUpdate(ctx) {
      // react to file changes
    }
  };
}

// vite.config.ts
import myPlugin from './myPlugin';
export default { plugins: [myPlugin()] };

Ключевые обработчики

transform(code, id): изменяет содержимое файла (например, компилирует MDX и внедряет переменные среды). load(id): предоставляет содержимое для виртуальных модулей. resolveId(source): настраивает разрешение модулей. configureServer(server): добавляет промежуточное ПО на сервер разработки.

Популярные плагины

@vitejs/plugin-react (React и быстрое обновление). @vitejs/plugin-vue. vite-plugin-pwa. vite-plugin-svgr (импорт SVG как компонентов). vite-plugin-checker (TypeScript и ESLint в наложении). vite-plugin-mkcert (локальный HTTPS).

Режим SSR в Vite

Vite поддерживает серверный рендеринг с помощью низкоуровневых примитивов. На его основе построены такие фреймворки, как Nuxt, SvelteKit, Remix и Astro. Для собственного SSR следуйте руководству Vite по SSR.

// server.ts
import { createServer } from 'vite';

const vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom'
});

express()
  .use(vite.middlewares)
  .use('*', async (req, res) => {
    const url = req.originalUrl;
    let template = await readFile('index.html', 'utf-8');
    template = await vite.transformIndexHtml(url, template);
    const { render } = await vite.ssrLoadModule('/src/entry-server.ts');
    const appHtml = await render(url);
    res.send(template.replace('<!--app-html-->', appHtml));
  });

Сборка для SSR

Нужно выполнить две сборки: клиентскую и серверную. vite build --ssr entry-server.ts создает серверный пакет.

// package.json
"scripts": {
  "build:client": "vite build",
  "build:server": "vite build --ssr src/entry-server.ts",
  "build": "npm run build:client && npm run build:server"
}

Переменные среды

import.meta.env.MODE имеет значение 'development' или 'production'. Пользовательские переменные с префиксом VITE_ становятся доступными.

Работа с CSS

Vite из коробки обрабатывает CSS, CSS Modules (foo.module.css), PostCSS (автоматически обнаруживает postcss.config.js) и препроцессоры CSS (Sass, Less и Stylus). Критический CSS можно внедрять с помощью плагинов.

Vite, Webpack и Turbopack

Vite: разработка на основе ESM, сборки Rollup и широкая экосистема. Webpack: большой устаревший инструмент, более гибко настраиваемый, но медленный. Turbopack (Vercel): создан на Rust, совместим с Webpack и сейчас поставляется вместе с Next. Для новых проектов выбирайте Vite для одностраничных приложений, а Next/Turbopack — для проектов, специфичных для Next.

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

Почему холодный запуск сервера разработки Vite значительно быстрее, чем у Webpack?

Повторение: Vite

Сервер разработки на основе ESM: мгновенный холодный запуск и быстрый HMR. В production используется Rollup. Плагины расширяют обработчики Rollup (transform, load, resolveId), а также специальные обработчики Vite (configureServer, handleHotUpdate). Режим SSR работает через createServer и middlewareMode; сборка выполняется с помощью --ssr. Доступны плагины для PWA, MDX, SVGR и mkcert. Для переменных среды используется import.meta.env. CSS Modules, PostCSS и препроцессоры встроены.

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

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

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

Чему я научусь в уроке «Vite: система плагинов и режим SSR»?

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

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

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

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

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

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

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

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

  1. Vite: система плагинов и режим SSR
  2. esbuild: скорость и ограничения
  3. Рабочие пространства pnpm для монорепозиториев
  4. Turbo: кэширование и конвейеры задач
← Назад к Frontend Academy