Использование с Preact, Solid и другими фреймворками

SWC (Speedy Web Compiler) применяется как высокопроизводительный транспайлер и минификатор, который может выступать заменой Babel и части инструментов сборки. В экосистеме фронтенда его ключевая роль раскрывается не только в React-проектах, но и в связке с альтернативными фреймворками, такими как Preact, Solid, а также в универсальных сборках через Vite, Webpack и Rollup.

Архитектурно SWC работает как компилятор на базе Rust, что обеспечивает высокую скорость обработки AST и минимальные задержки при трансформации большого объёма модулей. В контексте фреймворков это позволяет существенно ускорить dev-серверы и production-сборки без потери функциональности трансформаций JSX и TypeScript.

Общая модель интеграции SWC во фреймворки

SWC не является фреймворк-специфичным инструментом. Он работает на уровне синтаксического преобразования:

  • JSX → JavaScript
  • TypeScript → JavaScript
  • Modern JS → совместимый ES5/ESNext
  • Макросы и плагинные трансформации (ограниченно)

Фреймворки используют SWC через плагины бандлеров или через собственные инструменты:

  • Vite: @vitejs/plugin-react-swc
  • Next.js: встроенный SWC-компилятор
  • Webpack: swc-loader
  • Turbopack: нативная интеграция SWC

В каждом случае SWC выступает как слой, заменяющий Babel + Terser.

SWC в связке с Preact

Preact использует JSX, почти идентичный React, но с другим runtime. Это создаёт удобную точку интеграции SWC: трансформация JSX остаётся стандартной, но требуется корректная настройка pragma.

Базовая настройка через Vite

В Vite Preact обычно подключается через @preact/preset-vite, который может работать поверх SWC: 

npm install preact
npm install -D @vitejs/plugin-react-swc @preact/preset-vite

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

import { defineConfig } from &
import preact from '@preact/preset-vite'

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

В этом режиме SWC используется для JSX-трансформации, а Preact заменяет React runtime.

Настройка JSX runtime под Preact

SWC поддерживает настройку JSX через .swcrc: 

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic",
        "importSource": "preact"
      }
    }
  }
}

Ключевой момент — importSource: “preact”. Это переключает генерацию JSX функций с react/jsx-runtime на preact/jsx-runtime.

Пример трансформации:

Исходный код: 

const App = () => <div>Hello</div>

После SWC: 

import { jsx as _jsx } from "preact/jsx-runtime";

const App = () => _jsx("div", { children: "Hello" });

Особенности поведения SWC в Preact-экосистеме

Preact отличается более компактным runtime и иной моделью reconciler. SWC не знает о runtime-специфике, но обеспечивает корректную генерацию JSX.

Ключевые моменты:

  • отсутствует необходимость React-specific helpers (React.createElement)
  • минимальный runtime overhead
  • возможна более агрессивная оптимизация production-сборок
  • tree-shaking становится эффективнее из-за меньшего количества импортов

SWC и Solid

Solid принципиально отличается от React и Preact. Он не использует virtual DOM в классическом смысле, а применяет fine-grained reactivity. Это влияет на стратегию JSX-трансформации.

SWC в Solid используется исключительно как JSX-компилятор, но semantic transformation обычно выполняется отдельно через babel-preset-solid или solid-plugin.

Конфигурация SWC для Solid 

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "solid": {
        "generate": "dom",
        "hydratable": true
      }
    }
  }
}

Однако на практике SWC сам по себе не реализует полноценную семантическую трансформацию Solid JSX. Поэтому используется гибридный подход:

  • SWC: быстрый parsing и базовая трансформация
  • Solid plugin: преобразование JSX в реактивные примитивы

Пример пайплайна Solid + SWC

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

npm install solid-js
npm install -D vite-plugin-solid @swc/core @swc/helpers
import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'

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

Здесь SWC может использоваться внутри плагина для ускорения обработки TypeScript, но JSX преобразование делегируется Solid-компилятору.

Разделение ответственности: SWC vs Solid Compiler

В Solid экосистеме важно различать уровни:

Этап Инструмент Роль
Парсинг TS/JSX SWC Быстрое построение AST
JSX transform Solid compiler Реактивная модель
Минификация SWC Оптимизация кода
Bundling Vite/Rollup Сборка модулей

SWC в этом контексте не заменяет Solid compiler, а ускоряет инфраструктурные этапы.

SWC с универсальными JSX-фреймворками

Помимо Preact и Solid, SWC активно используется с другими JSX-фреймворками:

Inferno 

{
  "jsc": {
    "transform": {
      "react": {
        "runtime": "automatic",
        "importSource": "inferno"
      }
    }
  }
}

Inferno использует React-подобный API, поэтому SWC интегрируется напрямую через JSX runtime override.

Lit (частично JSX-ориентированные сборки)

Lit не использует JSX как основной подход, но в гибридных проектах SWC применяется для TypeScript: 

{
  "jsc": {
    "parser": {
      "syntax": "typescript"
    }
  }
}

В таких конфигурациях SWC выполняет исключительно transpilation слоя языка.

Использование SWC в Vite-экосистеме

Vite является одной из ключевых точек распространения SWC в современных фронтенд-стэках.

React + SWC (базовая модель) 

npm install -D @vitejs/plugin-react-swc
import react from '@vitejs/plugin-react-swc'

export default {
  plugins: [react()]
}

Хотя это React-ориентированный плагин, архитектура аналогична Preact и Solid: SWC заменяет Babel в трансформационном слое.

Переиспользование SWC конфигурации между фреймворками

В крупных монорепозиториях SWC конфигурация часто унифицируется: 

{
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "target": "es2020"
  },
  "minify": true
}

Фреймворк-специфичные настройки выносятся отдельно:

  • Preact: importSource: “preact”
  • React: react
  • Solid: внешние плагины
  • Inferno: importSource: “inferno”

Оптимизация сборки при использовании SWC с UI-фреймворками

Основные оптимизационные эффекты:

Ускорение dev-сборки

SWC компилирует модули значительно быстрее Babel за счёт Rust-реализации и потоковой обработки AST.

Снижение времени HMR

При использовании Vite или аналогичных инструментов SWC уменьшает latency между изменением файла и обновлением UI.

Упрощение pipeline

Вместо цепочки Babel + Terser + TypeScript используется единый инструмент.

Ограничения SWC в контексте фреймворков

Несмотря на высокую производительность, SWC имеет ограничения:

  • ограниченная система плагинов по сравнению с Babel
  • неполная поддержка сложных макросов
  • зависимость от внешних трансформеров для специфичных фреймворков (например, Solid)
  • менее гибкая кастомизация AST-операций

В результате SWC чаще используется как инфраструктурный слой, а не как полноценный семантический трансформер для всех UI-фреймворков.

Гибридные конфигурации SWC в мультифреймворковых проектах

В проектах, где одновременно используются Preact и Solid (например, микрофронтенды), SWC конфигурация разделяется: 

{
  "env": {
    "targets": "es2020"
  },
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    }
  }
}

При этом Solid-компоненты обрабатываются отдельным плагином сборщика.

Роль SWC в современной архитектуре фронтенда

SWC становится стандартным низкоуровневым компилятором, который:

  • унифицирует обработку JS/TS/JSX
  • заменяет Babel в большинстве новых проектов
  • интегрируется с разными UI-экосистемами без жёсткой привязки
  • обеспечивает стабильную производительность независимо от фреймворка

Его основная ценность проявляется в том, что он не диктует архитектуру приложения, а ускоряет существующие трансформационные цепочки, сохраняя совместимость с Preact, Solid и другими JSX-ориентированными системами.

Оглавление