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

Интеграция SWC в Rspack основана на идее вынесения трансформации исходного кода в высокопроизводительный компилятор, написанный на Rust, при сохранении совместимости с экосистемой JavaScript-инструментов. Rspack выступает как бандлер, а SWC — как слой трансформации модулей до этапа их упаковки.

Ключевая особенность архитектуры заключается в том, что Rspack изначально проектируется с возможностью замены классического Babel-транспайлера на SWC без изменения логики сборки. Это позволяет минимизировать накладные расходы на преобразование TypeScript, JSX и современных ECMAScript-синтаксисов.

Роль SWC в пайплайне обработки модулей

В процессе сборки Rspack выполняет несколько стадий обработки:

  1. Разрешение зависимостей модулей
  2. Трансформация исходного кода
  3. Оптимизация и генерация чанков

SWC включается во вторую стадию и отвечает за:

  • трансформацию TypeScript в JavaScript;
  • компиляцию JSX/TSX;
  • преобразование современных синтаксических конструкций ECMAScript;
  • поддержку экспериментальных возможностей языка через конфигурацию;
  • удаление типов TypeScript без type-checking.

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

Включение SWC в конфигурации Rspack

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

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

// rspack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        use: {
          loader: &
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            },
            env: {
              targets: 'defaults'
            }
          }
        }
      }
    ]
  }
};

Использование builtin:swc-loader позволяет Rspack применять встроенную реализацию SWC без необходимости отдельной установки внешнего пакета.

Обработка TypeScript

SWC выполняет удаление типов на этапе трансформации без проверки корректности типов. Это влияет на архитектуру проекта:

  • компиляция становится линейно быстрой;
  • отсутствует блокирующая стадия type-check;
  • проверка типов переносится в отдельный процесс (tsc –noEmit или IDE).

Конфигурация TypeScript-парсера: 

parser: {
  syntax: 'typescript',
  tsx: true,
  decorators: true,
  dynamicImport: true
}

Поддерживаются следующие возможности:

  • enum трансформации;
  • namespace (ограниченно);
  • decorators (в зависимости от версии);
  • optional chaining и nullish coalescing без дополнительной настройки.

Интеграция React и JSX

Rspack через SWC обрабатывает JSX значительно быстрее классических Babel-конфигураций. 

transform: {
  react: {
    runtime: 'automatic',
    importSource: 'react'
  }
}

Особенности:

  • автоматический JSX runtime исключает необходимость import React;
  • поддерживается JSX Transform нового поколения;
  • возможна кастомизация фабрики JSX.

Пример обработки: 

const Component = () => {
  return <div className="box">Text</div>;
};

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

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

const Component = () => {
  return _jsx("div", { className: "box", children: "Text" });
};

Поддержка декораторов

SWC реализует поддержку legacy и standard decorators через конфигурацию: 

jsc: {
  transform: {
    legacyDecorator: true,
    decoratorMetadata: true
  }
}

Пример использования: 

function log(target: any) {}

@log
class Service {}

Важно учитывать, что семантика декораторов зависит от выбранного режима трансформации и может отличаться от Babel-реализации.

Использование .swcrc в Rspack

Помимо inline-конфигурации, SWC может использовать внешний файл .swcrc, что упрощает переносимость между инструментами. 

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

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

Производительность и кэширование

Основное преимущество интеграции SWC в Rspack заключается в снижении времени трансформации модулей.

Характерные оптимизации:

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

В сравнении с Babel:

  • отсутствие интерпретируемых плагинов;
  • отсутствие JS-плагин-цепочки;
  • сокращение времени cold build;
  • ускорение incremental build.

Инкрементальная сборка

Rspack использует граф модулей, в котором SWC участвует только при изменении исходного файла.

Сценарий:

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

Это особенно эффективно в монорепозиториях с большим количеством пакетов.

Работа с целевыми платформами (targets)

SWC позволяет задавать уровень трансформации через env.targets: 

env: {
  targets: '> 0.25%, not dead'
}

Поведение:

  • удаление современных API при необходимости;
  • транспиляция синтаксиса под ES5/ES2017/ES2020;
  • управление полифилами на уровне внешних инструментов.

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

Замена Babel на SWC в существующих проектах

Миграция обычно включает следующие изменения:

  • удаление babel-loader;
  • замена правил на builtin:swc-loader;
  • перенос .babelrc логики в .swcrc;
  • проверка совместимости плагинов.

Типичная замена:

До: 

use: {
  loader: 'babel-loader',
  options: {
    presets: ['@babel/preset-env', '@babel/preset-react']
  }
}

После: 

use: {
  loader: 'builtin:swc-loader',
  options: {
    jsc: {
      parser: {
        syntax: 'ecmascript',
        jsx: true
      },
      transform: {
        react: {
          runtime: 'automatic'
        }
      }
    }
  }
}

Ограничения интеграции SWC в Rspack

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

  • отсутствие экосистемы Babel-плагинов в полном объёме;
  • невозможность сложных AST-трансформаций JS-уровня;
  • ограниченная кастомизация пайплайна трансформации;
  • необходимость отдельного type-check процесса для TypeScript.

Монорепозитории и масштабирование

В монорепозиториях SWC в связке с Rspack показывает линейную масштабируемость благодаря:

  • разделению кэшей по пакетам;
  • параллельной обработке модулей;
  • минимизации повторных трансформаций зависимостей.

Структура типичного монорепо: 

packages/
  ui/
  core/
  app/

Каждый пакет компилируется независимо, но использует общий cache layer Rspack.

Обработка современных возможностей ECMAScript

SWC поддерживает широкий спектр современных фич:

  • top-level await;
  • dynamic import;
  • optional chaining;
  • nullish coalescing;
  • class fields;
  • private methods.

Пример: 

class A {
  #value = 1;

  getValue() {
    return this.#value ?? 0;
  }
}

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

class A {
  constructor() {
    this.#value = 1;
  }

  getValue() {
    return this.#value ?? 0;
  }
}

Кеширование и повторное использование результатов

Rspack хранит результаты SWC-трансформации на уровне:

  • файлового хэша;
  • зависимостей модуля;
  • конфигурации SWC.

Изменение .swcrc или loader options инвалидирует соответствующий кеш, что предотвращает устаревшие сборки.

Совместимость с экосистемой Webpack

Rspack стремится сохранять совместимость с конфигурациями Webpack, однако SWC-интеграция вводит различия:

  • loader-цепочки упрощаются;
  • плагины трансформации заменяются конфигурацией SWC;
  • поведение AST-плагинов не переносится напрямую.

Это требует пересмотра архитектуры сборки при миграции крупных проектов.

Оглавление