Как минифицировать CSS и JS так, чтобы не поломать вёрстку?
Минификация сжимает код за счёт удаления пробелов, комментариев и переносов строк, сокращения имён переменных и функций, но не меняет логику — вёрстка ломается не от самого сжатия, а от агрессивных настроек, которые переименовывают классы, селекторы или глобальные идентификаторы, к которым обращается разметка и сторонние скрипты. Безопасный путь — сжимать CSS через cssnano или csso, а JS через Terser или esbuild, оставив нетронутыми имена CSS-классов и публичных API.
Готовое решение выглядит так: сборщик (Vite, Webpack, Gulp) прогоняет исходники через PostCSS и Terser на этапе production-сборки, рядом генерируются source maps для отладки, а на сервер уходит только сжатый бандл. Перед выкатом проверяют критичные сценарии: динамические классы, собранные конкатенацией строк, обращения вида querySelector по именам, инлайновые обработчики в HTML, стили сторонних виджетов и CSS-переменные в темах. Дальше — сравнение скриншотов ключевых страниц до и после, прогон автотестов, замер Core Web Vitals и поэтапный релиз с возможностью быстрого отката. Настройки сохраняют в конфиге с комментариями, чтобы следующая сборка не сломала уже проверенное.
Важный нюанс: не стоит смешивать минификацию с обфускацией и автоматическим переименованием классов (CSS Modules, css-loader с modules) без синхронизации с шаблонами — именно там чаще всего и теряется вёрстка. Если проект на легаси-стеке без сборщика, безопаснее сначала собрать его в единый пайплайн, чем сжимать файлы вручную. Настроить такой пайплайн, подобрать безопасные параметры сжатия и проверить результат на реальных страницах можно за один спринт — с гарантией, что визуал и скрипты останутся рабочими.