Минификация — автоматическое сжатие исходного кода: удаляются пробелы, комментарии, переносы строк, сокращаются имена переменных. Файл становится нечитаемым для человека, но функционально идентичен оригиналу. Применяется к CSS, JavaScript и HTML перед деплоем.
Как работает
Минификатор CSS: удаляет пробелы вокруг :{}, объединяет сокращённые свойства (margin: 10px 0 10px 0 → margin:10px 0), удаляет комментарии. bootstrap.css (187 КБ) → bootstrap.min.css (157 КБ) — экономия ~16%.
Минификатор JavaScript дополнительно переименовывает переменные: functionName → a, встраивает константы. Инструменты: Terser (современный), UglifyJS, esbuild (самый быстрый — Go), webpack минификация через TerserPlugin. React производственная сборка уменьшает main.js с 3 МБ до 130 КБ (96%).
HTML-минификация: удаляет необязательные кавычки атрибутов, незначимые пробелы. Экономия небольшая — обычно 10-20%, так как HTML всегда передаётся с Gzip/Brotli сжатием.
История
Первые минификаторы появились около 2004-2006 годов с ростом Ajax-приложений. Douglas Crockford выпустил JSMin в 2001 году. Dean Edwards — Packer в 2004 году. YUI Compressor от Yahoo (2007) стал стандартом до появления UglifyJS (2010). Современный стек: esbuild (2020) и SWC (2021) ускорили минификацию в 10-100 раз по сравнению с Node.js-инструментами.
Инструменты минификации
- CSS: cssnano, clean-css, postcss.
- JS: Terser, esbuild, SWC, Closure Compiler.
- HTML: html-minifier-terser.
- Сборщики: webpack, Vite, Parcel — минификация встроена в production build.
Связь с хостингом
На виртуальном хостинге и VPS минификацию настраивают в nginx на лету (модуль ngx_http_js_minification) или используют CDN с автоминификацией (Cloudflare → Speed → Optimization → Auto Minify). WordPress: плагины W3 Total Cache и Autoptimize минифицируют CSS и JS автоматически.
Ключевые отличия от похожих терминов
Обфускация (obfuscation) — намеренно запутывает код для защиты IP, усложняет чтение. Минификация — только удаляет лишнее для скорости, не защищает код. Бандлинг (bundling) — объединение нескольких файлов в один, часто выполняется вместе с минификацией.
Алгоритмы минификации
CSS: удаление пробелов, комментариев, сокращение цветов (#ffffff → #fff). JS: удаление пробелов, переименование переменных (uglify), удаление недостижимого кода (tree shaking). HTML: удаление пробелов, inline-комментариев. Инструменты: Terser (JS), cssnano (CSS), html-minifier-tercel.
Сборщики и конвейеры минификации
Webpack: TerserPlugin + CssMinimizerPlugin. Vite: встроенная минификация (esbuild в dev, Rollup + Terser в prod). Next.js: автоматическая минификация в production build. Для PHP/WordPress: WP Rocket, Autoptimize, W3 Total Cache — авто-минификация без ручных конфигов.
Влияние на SEO и производительность
Минификация снижает размер JS/CSS файлов на 20–50%. В связке со сжатием Gzip/Brotli — ещё 60–80%. Улучшение LCP и TBT в Core Web Vitals. Критично для мобильного интернета: каждые 100 КБ JS = ~1 секунда парсинга на слабом устройстве.