Удаляем из css неиспользуемые классы
Простой способ оптимизировать размер css-файла проекта (а мы же знаем, что в production он должен быть один), кроме минификации и сжатия - это удаление неиспользуемых классов. Для этого используем Gulp и плагин gulp-purifycss, который изучает html-файлы проекта и удаляет из исходного css-файла те самые неиспользуемые классы. Я использую именно этот плагин, потому что он работает не только с html-файлами, но и с twig-файлами.
Установим плагин:
pnpm install --save-dev gulp-purifycss
И подключим его, создав отдельный таск:
const purify = require('gulp-purifycss');
gulp.task('purify', function() {
return gulp.src('./styles.css')
.pipe(purify(['./templates/**/*.html.twig']))
.pipe(gulp.dest('./dist/'));
});
"Скормим" плагину наш css-файл styles.css, укажем место расположения наших html-файлов и определим папку, в которую нужно будет сохранить "оптимизированный" файл.
Запустим задачу gulp purify и увидим, что размер нового css-файла оказался значительно меньше исходного. Тот же Bootstrap может уменьшиться до 2 и более раз в зависимости от сложности проекта.
