Настройка SWC для транспиляции JavaScript и TypeScript

Ваш проект на TypeScript и webpack, но сборка занимает минуты? Babel справляется, но при росте кодовой базы время теряется. Разработчики тратят до 30% времени на ожидание пересборки — мы устраняем эту задержку. Мы сталкивались с проектами, где холодный старт превышал 30 секунд — это снижает продуктивность команды. Каждая секунда ожидания — потеря фокуса. Решение — SWC (Speedy Web Compiler), транспилятор на Rust, работающий в 20–70 раз быстрее Babel. Внедрение занимает от 2 до 8 часов, а ускорение окупается при каждой пересборке. Мы помогаем настроить SWC под вашу инфраструктуру: от замены babel-loader до интеграции с Jest и Next.js. Получите консультацию по миграции — оценим проект и предложим план под ключ.

Почему SWC быстрее Babel?

Babel написан на JavaScript, каждый проход распарсивает и генерирует AST заново. SWC использует Rust и единый AST, что даёт радикальный прирост скорости. Как указано в документации SWC, это не замена TypeScript-компилятора — проверка типов остаётся на tsc --noEmit. Зато транспиляция и minification становятся почти мгновенными.

Какие проекты выигрывают от SWC?

SWC особенно эффективен в следующих сценариях:

• Монорепозитории с десятками пакетов (каждая секунда на сборке умножается на число пакетов)
• CI-пайплайны, где время сборки критично для деплоев
• Проекты с микрофронтендами и частыми пересборками

Как настроить SWC в вашем проекте?

Шаг 1. Создание конфигурации

Установите @swc/core и @swc/cli:

npm install --save-dev @swc/core @swc/cli @swc/helpers core-js@3 

Создайте файл .swcrc:

{
  "$schema": "https://swc.rs/schema.json",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "react": {
        "runtime": "automatic"
      }
    },
    "target": "es2020",
    "externalHelpers": true
  },
  "env": {
    "targets": "> 0.5%, last 2 versions, not dead",
    "mode": "usage",
    "coreJs": "3"
  }
}

Шаг 2. Интеграция с webpack

Замените babel-loader на swc-loader в webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(t|j)sx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
        },
      },
    ],
  },
};

Шаг 3. Интеграция с Jest

Установите @swc/jest и настройте transform в jest.config:

export default {
  transform: {
    '^.+\\.(t|j)sx?$': [
      '@swc/jest',
      {
        jsc: {
          parser: {
            syntax: 'typescript',
            tsx: true,
            decorators: true,
          },
          transform: {
            react: {
              runtime: 'automatic',
            },
          },
        },
        env: {
          targets: {
            node: 18,
          },
        },
      },
    ],
  },
};

Шаг 4. Настройка кастомных плагинов

Плагины для SWC компилируются в WebAssembly. Например, styled-components: установите пакет и добавьте в .swcrc:

{
  "jsc": {
    "experimental": {
      "plugins": [
        [
          "@swc-contrib/plugin-styled-components",
          {
            "displayName": true,
            "ssr": true
          }
        ]
      ]
    }
  }
}

Интеграция с Next.js (опционально)

Начиная с Next.js 13, SWC используется по умолчанию для транспиляции. Однако при кастомной конфигурации Babel может потребоваться ручная настройка. Если вы используете пользовательские плагины, их нужно адаптировать под SWC. Мы поможем перенести конфигурацию и проверить совместимость.

Что входит в работу по настройке SWC

• Аудит текущей конфигурации сборки (Babel, webpack, Jest)
• Разработка .swcrc с учетом ваших плагинов и транспиляции
• Замена babel-loader на swc-loader, настройка Jest и Next.js
• Тестирование всех сценариев (npm run build, npm test, dev-сервер)
• Документация внесённых изменений и рекомендации
• Гарантия 30 дней — исправление любых регрессий

Наш опыт и гарантии

Более 5 лет на рынке веб-разработки, 10+ проектов с миграцией на SWC. Мы гарантируем ускорение сборки минимум в 3 раза при замене Babel. Каждая настройка сопровождается тестами и документацией. Наши инженеры имеют опыт работы с Rust и компиляторами.

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

• Отсутствие проверки типов: SWC не проверяет типы, обязательно добавьте tsc --noEmit в CI.
• Неправильная версия target: если указать слишком низкий target, появится ошибка совместимости. Лучше ставить es2020.
• Игнорирование externalHelpers: без @swc/helpers хелперы будут инлайниться в каждый модуль, увеличивая бандл.
• Забытые плагины: styled-components, emotion, Linaria требуют wasm-плагинов.
• Неверная настройка source maps: SWC создает source maps по умолчанию, но их нужно явно включить в webpack.

Сроки настройки

• Замена Babel на SWC в webpack-проекте: 2–4 часа
• Настройка Jest с @swc/jest: 1–2 часа
• Полный переход с декораторами и кастомными плагинами: 4–8 часов

Как начать?

Свяжитесь с нами — мы проанализируем ваш проект и предложим оптимальную стратегию миграции на SWC. Оценим сроки и стоимость индивидуально.