Terser — зачем фронтендерам современный минификатор JavaScript

Помните времена, когда UglifyJS был единственным вариантом для минификации JavaScript? С тех пор многое изменилось: появились ES6+, модули, новые возможности языка. И тут на сцену выходит Terser — форк UglifyJS, который не просто поддерживает современный JavaScript, но и предлагает целый набор полезных функций для оптимизации кода.

Почему именно Terser?

Главная причина проста: оригинальный uglify-es больше не поддерживается, а uglify-js не работает с ES6+.

Terser сохраняет совместимость с API и CLI интерфейсами UglifyJS, но при этом:

Поддерживает все современные возможности JavaScript (ES6+)
Активно развивается (более 9k звёзд на GitHub)
Интегрируется с современными инструментами вроде Rollup и Webpack
Предлагает тонкую настройку процесса минификации

Установка и базовое использование

Установка через npm стандартна:

# Глобально для CLI использования
npm install terser -g

# Локально для программного использования
npm install terser

Базовый пример минификации файла:

terser input.js -o output.min.js -c -m

Где:

-c включает компрессию (оптимизацию кода)
-m включает обфускацию (переименование переменных)

Ключевые возможности

1. Гибкая настройка минификации

Terser предлагает десятки опций для точной настройки процесса. Например:

terser input.js -c ecma=2015,computed_props=false -m reserved=['$','jQuery']

Здесь мы:

Указываем версию ECMAScript (2015)
Отключаем оптимизацию computed properties
Запрещаем обфускацию переменных $ и jQuery

2. Обфускация свойств объектов

Уникальная возможность Terser — манглинг (обфускация) свойств объектов:

terser example.js -c -m --mangle-props regex=/_$/

Эта команда обфусцирует все свойства, заканчивающиеся на подчёркивание (например, _private). Полезно для сокрытия внутренней логики.

3. Генерация source maps

Для отладки минифицированного кода Terser умеет генерировать source maps:

terser input.js -o output.min.js --source-map "url='output.min.js.map'"

4. Программный API

Terser можно использовать не только через CLI, но и программно:

const { minify } = require("terser");

async function run() {
  const result = await minify("function add(first, second) { return first + second; }");
  console.log(result.code); // "function add(n,d){return n+d}"
}

run();

Практическое применение

Оптимизация бандлов — уменьшение размера JavaScript перед деплоем
Защита кода — обфускация делает код сложным для анализа
Автоматизация сборки — интеграция в CI/CD процессы
Оптимизация библиотек — уменьшение размера npm-пакетов

Альтернативы и сравнение

Хотя Terser — не единственный минификатор, у него есть преимущества:

| Инструмент | Поддержка ES6+ | Обфускация | Source Maps | Активное развитие | |------------|----------------|------------|-------------|-------------------| | Terser | ✅ | ✅ | ✅ | ✅ | | UglifyJS | ❌ | ✅ | ✅ | ❌ | | Babel Minify| ✅ | ✅ | ✅ | ❌ |

Вывод: стоит ли использовать?

Да, если:

Вы работаете с современным JavaScript (ES6+)
Вам нужна тонкая настройка процесса минификации
Важен баланс между скоростью работы и качеством оптимизации

Terser особенно полезен:

Разработчикам библиотек
Командам с большими codebase
Тем, кому важна обратная совместимость с UglifyJS

Установите и попробуйте — возможно, это именно тот инструмент, которого вам не хватало в пайплайне сборки!

P.S. Проект поддерживается через Open Collective — можно стать спонсором.