Frontend
Подробное руководство по Vite
Toni_Dev
Иконка календаря 18.01.2025
Иконка чата 0
Иконка глаза 36
 

Если вы разработчик, который хоть раз сталкивался с веб-проектами, вы наверняка знаете, что сборка фронтенда может быть настоящим кошмаром. Долгие минуты (иногда часы) на сборку, настройки, конфигурации, которые выглядят как древняя магия, и общая тяжесть инструментов, таких как Webpack. В 2025 году мы живем в эпоху скорости, и здесь на сцену выходит Vite — инструмент, который переворачивает мир сборки фронтенда с ног на голову.

Навигация по статье

Часть 1. Основы Vite

Давайте начнем с азов: что такое Vite и почему он считается настолько крутым? В первой части мы разберем его основные особенности, преимущества, и, конечно, как его установить и настроить.

Что такое Vite?

Vite (произносится как «вит», от французского слова «быстрый») — это современный инструмент сборки фронтенда, разработанный создателем Vue.js Эваном Ю. Основная идея Vite — максимальная производительность и удобство. Он создан, чтобы сделать разработку легкой и быстрой, убрав сложности, которые были характерны для предыдущих инструментов.

В чем же его особенности?

  • Молниеносный запуск Dev-сервера: Vite использует нативные модули ES (ESM), что позволяет избегать предварительной сборки всего проекта. Это значит, что даже огромные проекты запускаются за доли секунды.
  • Горячая перезагрузка (HMR): Изменения в коде отображаются мгновенно, без задержек.
  • Модерн из коробки: Vite работает с последними стандартами JavaScript, что убирает необходимость в Polyfills и тяжелых конфигурациях.
  • Универсальность: Он отлично работает не только с Vue.js, но и с React, Svelte, Preact, и даже Vanilla JS.

Почему Vite — это будущее?

  1. Скорость — и еще раз скорость: Одна из главных проблем старых сборщиков — это их медлительность при работе с большими проектами. Webpack или Parcel часто вынуждены собирать весь проект даже для небольшой правки в одном файле. Vite этого избегает, просто отправляя в браузер только то, что необходимо.
  2. Простота настройки: Если вы привыкли бороться с загадочными файлами конфигурации Webpack, то Vite будет как глоток свежего воздуха. Конфигурация здесь минимальна, но при этом легко расширяется.
  3. Экосистема и плагины: Благодаря популярности Vite, для него создано множество плагинов: от работы с GraphQL до интеграции с TailwindCSS. Это позволяет вам настроить окружение под свои нужды без лишних усилий.
  4. Стабильность и поддержка: К 2025 году Vite стал одним из самых популярных инструментов среди разработчиков, благодаря регулярным обновлениям и активному сообществу.

Как установить Vite?

Давайте перейдем к практике. Установка Vite настолько проста, что вы удивитесь, как вообще раньше с этим жили.

Шаг 1. Установка Node.js

Прежде чем начать, убедитесь, что у вас установлена последняя версия Node.js. Вы можете скачать ее с официального сайта.

Шаг 2. Создание проекта

Создать новый проект на Vite можно одной командой:

npm create vite@latest my-vite-app

После выполнения этой команды вы увидите интерактивный интерфейс, где нужно выбрать фреймворк (Vue, React, Svelte, Vanilla) и вариант TypeScript (если нужен).

Шаг 3. Установка зависимостей

Перейдите в папку проекта и установите все зависимости:

cd my-vite-app
npm install

Шаг 4. Запуск Dev-сервера

После установки просто запустите сервер разработки:

npm run dev

Ваш проект запущен. Теперь вы можете открыть браузер и увидеть ваш проект по адресу http://localhost:5173.

Структура проекта на Vite

После создания проекта структура будет выглядеть примерно так:

my-vite-app/
├── node_modules/      # Папка с зависимостями
├── public/            # Статические файлы (картинки, шрифты)
├── src/               # Исходный код приложения
│   ├── main.js        # Точка входа
│   └── App.vue        # Основной компонент (для Vue)
├── .gitignore         # Файлы, игнорируемые Git
├── package.json       # Список зависимостей
├── vite.config.js     # Конфигурация Vite
└── index.html         # Основной HTML-файл

Часть 2. Настройка Vite

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

Настройка конфигурации

Конфигурационный файл vite.config.js (или vite.config.ts), если вы используете TypeScript) находится в корне проекта. Vite изначально работает «из коробки», но иногда вам нужно что-то донастроить — будь то алиасы для путей, прокси для API или добавление плагинов.

Базовая конфигурация

Вот как выглядит минимальный конфигурационный файл:

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // Или @vitejs/plugin-react для React

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000, // Меняем порт с 5173 на 3000
    open: true, // Автоматически открывать браузер
  },
  resolve: {
    alias: {
      '@': '/src', // Удобный алиас для src
    },
  },
});

Интересные опции

base: Используется для указания базового пути вашего приложения. Например, если ваше приложение будет развернуто на /my-app/, добавьте:

base: '/my-app/',

build: Здесь вы можете настроить продакшн-сборку. Например, изменить выходную директорию или минимизатор:

build: {
  outDir: 'dist', // Выходная папка
  sourcemap: true, // Генерация sourcemaps
  minify: 'terser', // Используем Terser для минификации
},

server.proxy: Если ваше приложение взаимодействует с API, находящимся на другом домене, настройте прокси:

server: {
  proxy: {
    '/api': {
      target: 'https://api.example.com',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''), // Удаляем /api из запросов
    },
  },
},

Работа с плагинами

Плагины — это один из самых мощных аспектов Vite. Они добавляют новую функциональность или интеграции в проект. Например, можно добавить поддержку GraphQL, PostCSS, или TailwindCSS.

Установка популярных плагинов

Для Vue-проектов плагин уже идет по умолчанию:

npm install @vitejs/plugin-vue

Если вы работаете с React:

npm install @vitejs/plugin-react

Для использования TailwindCSS:

Установите необходимые пакеты:

npm install tailwindcss postcss autoprefixer

Инициализируйте конфигурацию:

npx tailwindcss init

Добавьте Tailwind в ваш CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Настройте Vite для использования PostCSS:

export default defineConfig({
  css: {
    postcss: './postcss.config.js',
  },
});

SVG как компоненты
Хотите использовать SVG-файлы как React/Vue-компоненты? Установите плагин vite-svg-loader:

npm install vite-svg-loader

Добавьте в конфигурацию:

import svgLoader from 'vite-svg-loader';

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

Оптимизация для продакшена

Когда ваш проект готов, самое время подготовить его для продакшена. Вот несколько шагов для максимальной оптимизации.

Минимизация бандла

Vite автоматически минимизирует файлы с помощью Terser или Esbuild. Если у вас специфические требования, вы можете настроить это через опцию build.minify.

Кэширование файлов

Vite добавляет хэши в имена файлов, чтобы браузеры могли их кэшировать. Например: app.a1b2c3.js.

Если вы хотите настроить это поведение, измените параметр build.rollupOptions.output.entryFileNames:

build: {
  rollupOptions: {
    output: {
      entryFileNames: 'assets/[name].[hash].js',
      chunkFileNames: 'assets/[name].[hash].js',
      assetFileNames: 'assets/[name].[hash].[ext]',
    },
  },
},

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

Чтобы понять, что занимает место в вашем бандле, установите плагин rollup-plugin-visualizer:

npm install rollup-plugin-visualizer --save-dev

Добавьте его в конфигурацию:

import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    vue(),
    visualizer({
      open: true, // Откроет результат в браузере
    }),
  ],
});

После сборки вы увидите граф, показывающий размеры всех файлов.

Lazy Loading модулей

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

import('./BigComponent.vue').then((module) => {
  const BigComponent = module.default;
});

Это разбивает ваш бандл на чанки, которые загружаются только при их использовании.

Деплой

Когда все готово, давайте задеплоим проект! После сборки (npm run build) вы получите папку dist.

Деплой на Netlify

  1. Зарегистрируйтесь на Netlify.
  2. Подключите репозиторий из GitHub.
  3. Укажите:

Build Command: npm run build

Publish Directory: dist

Деплой на Vercel

1. Установите Vercel CLI:

npm install -g vercel

2. Разверните проект одной командой:

vercel

Часть 3. Продвинутые темы

В предыдущих частях мы разобрали основы работы с Vite, его настройку, работу с плагинами и оптимизацию для продакшена. Теперь настало время углубиться в продвинутые темы, которые пригодятся для сложных проектов: интеграция с CI/CD, тестирование и использование Vite для микрофронтендов.

Интеграция с CI/CD

Современные приложения редко разворачиваются вручную. Интеграция с системами CI/CD помогает автоматизировать сборку, тестирование и деплой, что делает процесс стабильным и повторяемым.

Пример интеграции с GitHub Actions

GitHub Actions — один из самых популярных инструментов для автоматизации. Вот пример workflow для Vite:

# .github/workflows/deploy.yml
name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Netlify
        uses: netlify/actions-cli@v2
        with:
          args: deploy --dir=dist --prod
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}

Пояснения:

  • actions/checkout@v3: Клонирует репозиторий.
  • actions/setup-node@v3: Устанавливает Node.js.
  • npm run build: Собирает проект.
  • netlify/actions-cli@v2: Деплоит проект на Netlify.

Интеграция с Vercel CLI

Если вы используете Vercel, настройка еще проще. После установки Vercel CLI:

vercel deploy --prod

Чтобы автоматизировать деплой через CI/CD, добавьте следующую команду в ваш pipeline:

vercel --token $VERCEL_AUTH_TOKEN

Тестирование приложения

В 2025 году тесты — это не роскошь, а необходимость. Для Vite есть отличная интеграция с тестовыми фреймворками, такими как Vitest и Playwright.

Тестирование с Vitest

Vitest — это тестовый фреймворк, специально разработанный для работы с Vite. Он быстрый, интегрируется с HMR, и поддерживает тесты на JavaScript/TypeScript.

Установка:

npm install -D vitest

Конфигурация:

Добавьте скрипт в package.json:

"scripts": {
  "test": "vitest"
}

Создайте файл конфигурации vitest.config.js:

import { defineConfig } from 'vitest/config';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom', // Для тестирования DOM
  },
});

Пример теста:

import { describe, it, expect } from 'vitest';

describe('Math tests', () => {
  it('adds numbers', () => {
    expect(1 + 1).toBe(2);
  });
});

Запустите тесты:

npm run test

End-to-End тестирование с Playwright

Playwright позволяет тестировать приложение в реальных браузерах (Chromium, Firefox, WebKit).

Установка:

npm install -D playwright

Запуск:

Добавьте Playwright в workflow:

npx playwright install

Напишите тесты, которые проверяют пользовательские сценарии:

import { test, expect } from '@playwright/test';

test('homepage has correct title', async ({ page }) => {
  await page.goto('http://localhost:5173');
  await expect(page).toHaveTitle(/My Vite App/);
});

Работа с микрофронтендами

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

Использование Module Federation

Module Federation позволяет шарить модули между разными приложениями. В Vite это можно реализовать с помощью плагинов, например vite-plugin-federation.

Установка:

npm install vite-plugin-federation --save-dev

Настройка:

Добавьте плагин в конфигурацию:

import { defineConfig } from 'vite';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    federation({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button.vue',
      },
      shared: ['vue'],
    }),
  ],
});

Теперь компонент Button из одного приложения может быть использован в другом:

import('app1/Button').then((module) => {
  const Button = module.default;
});

Поддержка монорепозиториев

Если вы работаете с монорепозиториями, Vite легко интегрируется с инструментами вроде pnpm workspaces или Nx.

Настройка с pnpm:

Установите pnpm:

npm install -g pnpm

Создайте файл pnpm-workspace.yaml:

packages:
  - 'packages/*'

Добавьте алиасы в Vite:

resolve: {
  alias: {
    '@shared': '/packages/shared',
  },
},

Заключение

Поздравляю, вы теперь мастер Vite! Мы прошли путь от базовой настройки до сложных кейсов с CI/CD, тестами, микрофронтендами и монорепозиториями. Vite стал не просто инструментом для сборки, а универсальным решением для современных фронтенд-разработчиков.

Напоследок несколько советов:

  • Обновляйте зависимости. Vite активно развивается, и новые версии часто включают крутые фичи.
  • Экспериментируйте с плагинами. Их экосистема растет с каждым днем.
  • Делитесь опытом. Сообщество Vite активно, и вы всегда можете найти помощь или вдохновение.
 

Комментарии

0

Без регистрации и смс