cssnano: сжатие CSS

Минификация — уменьшение размера CSS без изменения его смысла: удаляются пробелы, переносы строк и комментарии, значения записываются короче. Файл быстрее скачивается, а браузер применяет его точно так же. В PostCSS для этого служит плагин cssnano.

Установка

npm install --save-dev cssnano

cssnano ставится последним — сжимать нужно уже готовый CSS:

// postcss.config.js
import postcssImport from 'postcss-import';
import postcssPresetEnv from 'postcss-preset-env';
import cssnano from 'cssnano';
 
export default {
  plugins: [postcssImport(), postcssPresetEnv(), cssnano()],
};

Что он делает

Возьмём стили карточки поста с типичными для ручного кода излишествами:

/* styles/main.css */
/* Карточка поста */
.post-card {
  margin: 0px 0px 16px 0px;
  padding: 16px;
  color: #ffffff;
  background-color: #2563eb;
  font-weight: normal;
}
 
.post-card {
  border-radius: 8px;
}
 
.post-title {
  font-weight: bold;
  transition: color 0.30s ease;
}

Чтобы увидеть работу только cssnano, временно оставьте в plugins его одного и выполните npx postcss styles/main.css -o css/main.css:

.post-card{margin:0 0 16px;padding:16px;color:#fff;background-color:#2563eb;font-weight:400;border-radius:8px}.post-title{font-weight:700;transition:color .3s}

Весь CSS уместился в одну строку, и файл стал примерно в полтора раза меньше. Изменения по порядку:

Было	Стало	Почему
Комментарий и пробелы	—	Браузеру не нужны
`0px 0px 16px 0px`	`0 0 16px`	Ноль без единицы, повтор сторон убран
`#ffffff`	`#fff`	Короткая запись цвета
`normal`, `bold`	`400`, `700`	Числа короче слов
`0.30s ease`	`.3s`	`ease` — значение по умолчанию
Два правила `.post-card`	Одно	Объявления объединены

Комментарии, которые нужно сохранить

Комментарий, начинающийся с /*!, cssnano оставляет — так обычно сохраняют лицензию:

/* styles/main.css */
/*! Blog styles v1.0 */
.post-tag {
  color: red;
}

/*! Blog styles v1.0 */.post-tag{color:red}

Когда сжимать

Сжатый CSS неудобно читать в инструментах разработчика, поэтому cssnano включают только для сборки на сервер, а во время работы оставляют обычный вывод. Как переключать это одной командой, показано в уроке о продакшен-сборке. В проекте на Vite cssnano не нужен: при npm run build Vite сжимает CSS сам.

Частая ошибка

Поставить cssnano не последним. Плагины после него получат сжатый CSS, а то, что они добавят — префиксы, развёрнутую вложенность, — останется несжатым. Держите cssnano в конце массива plugins.

Спасибо, что читаете!