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

Пример 1: Кастомный плагин для обработки Markdown

Создаётся плагин, преобразующий .md файлы в строку HTML.

// plugins/markdown.ts
import { Plugin } from 'vite';
import { marked } from 'marked';

export function markdownPlugin(): Plugin {
  return {
    name: 'vite-markdown',
    transform(code, id) {
      if (!id.endsWith('.md')) return null;
      const html = marked(code);
      return { code: `export default ${JSON.stringify(html)};`, map: null };
    }
  };
}

В конфигурации:

import { defineConfig } from 'vite';
import { markdownPlugin } from './plugins/markdown';
export default defineConfig({ plugins: [markdownPlugin()] });

Содержимое readme.md:

# Hello
This is **bold** text.

Результат импорта в коде:

import html from './readme.md';
console.log(html);
// "
Hello
\n
This is bold text.
\n"

Пример 2: Настройка HTTPS и пользовательского сертификата

Для локальной разработки можно включить HTTPS с самоподписанным сертификатом.

import { defineConfig } from 'vite';
import fs from 'fs';
export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync('./certs/key.pem'),
      cert: fs.readFileSync('./certs/cert.pem')
    },
    port: 443
  }
});

Для генерации сертификатов используется mkcert:

mkcert -install
mkcert localhost 127.0.0.1 ::1
mv localhost+2-key.pem certs/key.pem
mv localhost+2.pem certs/cert.pem

Результат – dev-сервер доступен по https://localhost.

Пример 3: Динамические импорты с комментированием чанков

Vite поддерживает магические комментарии Webpack для именования чанков.

// src/router.ts
const Home = () => import(/* webpackChunkName: "home" */ './pages/Home');
const About = () => import(/* webpackChunkName: "about" */ './pages/About');

В vite.config.ts достаточно build.rollupOptions:

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        chunkFileNames: 'assets/[name]-[hash].js'
      }
    }
  }
});

Результат сборки:

dist/assets/home-abc123.js
ist/assets/about-def456.js

Пример 4: Настройка анализатора размера бандла

Плагин vite-plugin-visualizer генерирует интерактивную карту.

npm i -D vite-plugin-visualizer

import { visualizer } from 'vite-plugin-visualizer';
export default defineConfig({
  plugins: [visualizer({ filename: 'stats.html', gzipSize: true })]
});

После vite build появляется файл stats.html. Открытие в браузере показывает treemap всех модулей.

Пример 5: Использование Vite с Express для серверного рендеринга (SSR)

Настройка серверной сборки и клиентской сборки.

// vite.config.ts
export default defineConfig({
  build: {
    ssr: 'src/entry-server.ts',
    rollupOptions: {
      input: { client: 'index.html', server: 'src/entry-server.ts' }
    }
  }
});

Команды сборки:

"build": "vite build",
"preview": "node server.js"

Пример сервера server.js (упрощённо):

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from './dist/entry-server';
const app = express();
app.get('/*', async (req, res) => {
  const html = renderToString(React.createElement(App));
  res.send(`
${html}
`);
});
app.listen(3000);

Результат: страница рендерится на сервере, затем гидратируется на клиенте.

Пример 6: Переменные окружения с разными режимами

Файлы .env.development и .env.production.

# .env.development
VITE_API_URL=http://localhost:4000

# .env.production
VITE_API_URL=https://api.site.com

Использование в проекте:

fetch(import.meta.env.VITE_API_URL + '/data')

При запуске vite dev используется development, при vite build – production. Можно создать кастомные режимы: .env.staging и запуск vite build --mode staging.

Пример 7: Интеграция с TypeScript через пути (paths)

Настройка tsconfig.json совместно с алиасами Vite:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

Vite конфигурация:

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

После этого импорт import Button from '@/components/Button' работает в TypeScript и в сборке.

Пример 8: Использование Web Workers с Vite

Создание файла worker.ts:

self.onmessage = (e) => {
  self.postMessage(e.data * 2);
};

В основном коде:

const worker = new Worker(new URL('./worker.ts', import.meta.url));
worker.onmessage = (e) => console.log(e.data);
worker.postMessage(10);

Vite автоматически выделит worker в отдельный чанк. Результат: в консоль выводится 20.