Интеграция с Vite

Интеграция SWC с Vite строится вокруг замены стандартных механизмов трансформации JavaScript и TypeScript на высокопроизводительный компилятор, реализованный на Rust, что позволяет существенно ускорить холодный старт dev-сервера, обновление модулей и финальную сборку. В экосистеме Vite SWC используется либо через специализированные плагины, либо через интеграцию с React/TypeScript пайплайном, где основная цель — минимизировать время преобразования кода при сохранении совместимости с современным стандартом ECMAScript.

Vite по умолчанию использует ESBuild для предварительных трансформаций и Rollup для production-сборки. SWC может встроиться в этот процесс как замена или дополнение трансформирующего слоя.

Ключевые точки интеграции:

  • трансформация TypeScript в JavaScript;
  • компиляция JSX/TSX;
  • применение Babel-подобных преобразований (плагины SWC);
  • ускорение HMR за счёт уменьшения времени трансформации модулей.

SWC работает на уровне AST, но выполняет преобразования значительно быстрее благодаря нативной реализации парсера и генератора кода.

Установка и базовая интеграция

В Vite-проектах SWC чаще всего подключается через специализированные плагины:

  • @vitejs/plugin-react-swc — стандартный путь для React;
  • кастомные интеграции через @swc/core;
  • экспериментальные плагины для Vue/TS пайплайнов.

Установка React-интеграции: 

npm install -D @vitejs/plugin-react-swc

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

import { defineConfig } from &
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [react()]
})

В этом сценарии SWC полностью заменяет Babel-трансформации React-кода, включая JSX runtime и Fast Refresh.

Конфигурация SWC через .swcrc

SWC управляется через файл конфигурации .swcrc, который определяет правила трансформации.

Пример базовой конфигурации: 

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": false
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "refresh": true
      }
    },
    "target": "es2020"
  },
  "module": {
    "type": "es6"
  }
}

Основные параметры:

  • jsc.parser.syntax — определяет язык (typescript, ecmascript);
  • tsx — поддержка JSX/TSX;
  • transform.react.runtime — automatic runtime для React 17+;
  • refresh — включение Fast Refresh;
  • target — целевая версия ECMAScript.

SWC вместо Babel в React-пайплайне Vite

При использовании @vitejs/plugin-react-swc происходит замена цепочки Babel на SWC:

  • JSX трансформация выполняется SWC;
  • TypeScript stripping выполняется SWC;
  • React Fast Refresh реализуется через SWC plugin API;
  • минимизируются задержки HMR.

Разница особенно заметна в больших кодовых базах, где Babel-пайплайн становится узким местом.

Производительность и влияние на dev-server

SWC снижает время обработки модулей за счёт:

  • компиляции на Rust без GC-пауз;
  • параллельной обработки файлов;
  • отсутствия сложной plugin-цепочки Babel;
  • оптимизированного AST-представления.

В проектах среднего и крупного размера наблюдаются следующие эффекты:

  • ускорение cold start Vite dev-server;
  • уменьшение latency HMR обновлений;
  • снижение времени трансформации TSX-компонентов;
  • более стабильное потребление памяти при активной разработке.

Интеграция SWC вручную через @swc/core

Для нестандартных сценариев SWC подключается напрямую: 

npm install -D @swc/core

Далее можно использовать программный API: 

import { transform } from '@swc/core'

const result = await transform(code, {
  filename: "input.tsx",
  jsc: {
    parser: {
      syntax: "typescript",
      tsx: true
    },
    target: "es2020",
    transform: {
      react: {
        runtime: "automatic"
      }
    }
  },
  module: {
    type: "es6"
  }
})

Такой подход используется при создании кастомных Vite-плагинов, где требуется контроль над трансформацией кода.

Создание собственного Vite-плагина на SWC

Vite-плагин на SWC обычно реализует hook transform: 

import { transform } from '@swc/core'

export default function swcPlugin() {
  return {
    name: 'swc-transform',
    async transform(code, id) {
      if (id.endsWith('.ts') || id.endsWith('.tsx')) {
        const result = await transform(code, {
          filename: id,
          jsc: {
            parser: {
              syntax: "typescript",
              tsx: id.endsWith('.tsx')
            },
            target: "es2020"
          },
          module: {
            type: "es6"
          }
        })

        return {
          code: result.code,
          map: result.map
        }
      }
    }
  }
}

Такой плагин заменяет стандартную трансформацию TypeScript внутри Vite.

Работа с source maps

SWC генерирует source maps, совместимые с Vite pipeline: 

{
  "sourceMaps": true,
  "inlineSourcesContent": true
}

Корректная настройка source maps критична для:

  • debugging в браузере;
  • корректного отображения stack traces;
  • интеграции с Vite HMR overlay.

SSR и SWC в Vite

При server-side rendering SWC может использоваться для унификации трансформации:

  • одинаковый AST pipeline для client и server;
  • уменьшение расхождений между окружениями;
  • ускорение server build при pre-render.

Однако важно учитывать:

  • необходимость синхронизации конфигурации .swcrc;
  • возможные расхождения с Node-specific синтаксисом;
  • ограничения плагинов SWC в SSR-режиме.

Интеграция с TypeScript

SWC не выполняет type-checking, он только удаляет типы. В Vite это означает разделение ответственности:

  • SWC: трансформация TS → JS;
  • tsc: проверка типов.

Типичный workflow: 

tsc --noEmit
vite dev

Такое разделение повышает скорость dev-сервера, сохраняя строгую типизацию.

Оптимизация сборки

В production режиме SWC может участвовать в:

  • предварительной трансформации модулей;
  • ускорении Rollup pipeline через плагины;
  • уменьшении времени minify (частично, в связке с другими инструментами).

Однако Vite чаще полагается на ESBuild для minification, поэтому SWC в production чаще играет вспомогательную роль.

Частые проблемы интеграции

1. Конфликт конфигураций Babel и SWC

При одновременном использовании Babel-плагинов и SWC возможны дублирующиеся трансформации JSX.

Решение — отключение Babel-слоя: 

react({
  babel: false
})

2. Несовместимость декораторов

SWC требует явной настройки: 

{
  "jsc": {
    "parser": {
      "decorators": true
    }
  }
}

3. Расхождения target ES версии

Неправильный target может приводить к:

  • некорректной транспиляции optional chaining;
  • проблемам с dynamic import.

Использование SWC в монорепозиториях

В монорепозиториях SWC часто используется для:

  • унифицированной трансформации пакетов;
  • ускорения сборки отдельных workspace;
  • уменьшения дублирования конфигурации Babel.

Рекомендуется централизовать .swcrc на уровне root и наследовать его в пакетах.

Сравнение подходов внутри Vite

  • ESBuild: максимальная скорость, ограниченные трансформации
  • Babel: гибкость, но высокая стоимость
  • SWC: баланс скорости и функциональности

SWC занимает промежуточную позицию, позволяя реализовывать сложные трансформации без существенной потери производительности.

Инкрементальная разработка и HMR

SWC напрямую влияет на скорость Hot Module Replacement за счёт:

  • быстрого AST parsing;
  • минимального overhead трансформации;
  • эффективной работы с JSX runtime.

В крупных SPA это особенно заметно при частых изменениях компонентов и стилей логики отображения.

Оглавление