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

Минификация в SWC представляет собой этап преобразования JavaScript-кода, при котором исходный код уменьшается по размеру за счёт удаления пробелов, сокращения имён идентификаторов, упрощения выражений и применения наборов синтаксических оптимизаций. В отличие от транспиляции, где основная цель — изменение синтаксиса под целевую среду, минификация ориентирована исключительно на уменьшение итогового веса кода и ускорение загрузки в браузере.

SWC реализует минификацию как отдельный процесс, который может быть подключён в различных режимах: через CLI, программный API, конфигурационный файл .swcrc, а также через интеграции с сборщиками.

Базовое включение минификации через CLI

Самый прямой способ активировать минификацию — использование CLI SWC с флагом –minify. 

swc src -d dist --minify

При таком запуске выполняется:

  • трансформация исходного кода (если задан jsc в конфигурации),
  • минификация результата,
  • сохранение сжатых файлов в указанную директорию.

Дополнительно можно управлять поведением минификатора через параметры CLI: 

swc src -d dist --minify --source-maps

Генерация source maps часто используется в связке с минификацией для сохранения возможности отладки.

Минификация через программный API @swc/core

При использовании SWC как библиотеки минификация включается через функцию minify. 

import { minify } from "@swc/core";

const inputCode = `
function add(a, b) {
  return a + b;
}
`;

const result = await minify(inputCode, {
  compress: true,
  mangle: true,
  module: true,
});

Параметры минификации:

  • compress — включает оптимизации кода (удаление мёртвого кода, упрощение выражений)
  • mangle — сокращает имена переменных и функций
  • module — указывает, что код является ES Modules
  • toplevel — позволяет минимизировать глобальные переменные

Расширенный пример с сохранением читаемости для отладки: 

const result = await minify(inputCode, {
  compress: {
    drop_console: true,
    unused: true,
  },
  mangle: {
    keep_fnames: false,
  },
  sourceMap: true,
});

Настройка минификации через .swcrc

Конфигурационный файл .swcrc позволяет централизованно управлять процессом трансформации и минификации.

Простейшая активация: 

{
  "minify": true
}

В более детализированном виде конфигурация может включать параметры compress и mangle: 

{
  "minify": true,
  "jsc": {
    "target": "es2020",
    "parser": {
      "syntax": "ecmascript"
    }
  },
  "compress": {
    "unused": true,
    "dead_code": true,
    "drop_console": true
  },
  "mangle": {
    "keep_classnames": false,
    "keep_fnames": false
  }
}

Параметризация позволяет разделить уровни оптимизации:

  • синтаксический уровень (jsc)
  • уровень оптимизации и удаления кода (compress)
  • уровень переименования идентификаторов (mangle)

Минификация в связке с Webpack

В Webpack SWC часто используется как замена Terser через swc-minify.

Установка: 

npm install @swc/core swc-loader --save-dev

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

const swcMinify = require("@swc/core").minify;

module.exports = {
  mode: "production",
  optimization: {
    minimize: true,
    minimizer: [
      new (require("swc-webpack-plugin"))({
        minify: true,
        jsc: {
          target: "es2020",
        },
      }),
    ],
  },
};

В более современных конфигурациях используется встроенная поддержка: 

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new SwcMinifyPlugin({
        compress: {
          drop_console: true,
        },
        mangle: true,
      }),
    ],
  },
};

Минификация в Next.js

Next.js использует SWC как стандартный компилятор JavaScript и включает минификацию по умолчанию в production-режиме.

Включение или контроль поведения осуществляется через next.config.js: 

module.exports = {
  swcMinify: true,
};

Параметр swcMinify управляет использованием SWC вместо альтернативных минификаторов.

Поведение в production:

  • автоматическое включение compress и mangle
  • оптимизация React-кода
  • удаление dev-условий

Параметры compress и их влияние на результат

Блок compress определяет глубину оптимизации кода.

Ключевые параметры:

Удаление неиспользуемого кода 

{
  "compress": {
    "unused": true
  }
}

Удаляет:

  • неиспользуемые функции
  • переменные, не участвующие в вычислениях

Удаление console и debugger 

{
  "compress": {
    "drop_console": true,
    "drop_debugger": true
  }
}

Применяется в production-сборках для очистки логов.

Оптимизация выражений

SWC упрощает выражения:

  • !!a → Boolean(a)
  • a + ““ → String(a)
  • 0 || b → b

Это происходит автоматически при включённом compress.

Mangle: переименование идентификаторов

Минификация имён — один из самых значимых факторов уменьшения размера bundle. 

{
  "mangle": true
}

Результат:

  • calculateTotalPrice → a
  • userData → b

Дополнительные параметры: 

{
  "mangle": {
    "keep_fnames": true,
    "keep_classnames": false
  }
}

Сохранение имён функций может быть критично для:

  • рефлексии
  • dependency injection
  • некоторых ORM и DI-фреймворков

Работа с ESM и CommonJS при минификации

SWC учитывает формат модулей при оптимизации.

ES Modules: 

{
  "module": true
}

CommonJS требует более осторожной оптимизации из-за динамического характера require.

При включении module: true активируются дополнительные возможности:

  • tree-shaking совместимость
  • агрессивное удаление неиспользуемых экспортов

Контроль уровня минификации

Минификация может быть настроена на нескольких уровнях строгости:

Базовый уровень 

{
  "minify": true
}

Средний уровень 

{
  "compress": {
    "unused": true,
    "drop_console": true
  },
  "mangle": true
}

Агрессивный уровень 

{
  "compress": {
    "dead_code": true,
    "evaluate": true,
    "collapse_vars": true,
    "drop_console": true
  },
  "mangle": {
    "toplevel": true
  }
}

Агрессивная минификация может привести к:

  • ухудшению читаемости stack trace
  • сложностям отладки
  • несовместимости с рефлексивным кодом

Source Maps при минификации

Минификация без source maps существенно усложняет диагностику ошибок.

Пример включения: 

await minify(code, {
  sourceMap: true,
});

Или через CLI: 

swc src -d dist --minify --source-maps

Source maps сохраняют связь между:

  • исходным кодом
  • минифицированным кодом

Типичные проблемы при включении минификации

Потеря имён функций в логах

Причина: 

{
  "mangle": true
}

Решение: 

{
  "mangle": {
    "keep_fnames": true
  }
}

Ошибки в runtime из-за удаления кода

Причина:

  • агрессивный compress.unused
  • динамическое использование переменных

Несовместимость с библиотеками

Некоторые библиотеки зависят от:

  • имен классов
  • функции Function.name
  • рефлексии

Корректировка: 

{
  "mangle": {
    "keep_classnames": true,
    "keep_fnames": true
  }
}
Оглавление