Удаление неиспользуемого CSS с помощью UnCSS
Ускорение загрузки сайта обычно включает в себя уменьшение времени ответа сервера, сжатие CSS, HTML, Javascript файлов и оптимизацию изображений. Кроме этого мы можем минимизировать задержку загрузки стилей удалив неиспользуемый CSS.
Неиспользуемый CSS является проблемой при использовании фреймворков таких как Twitter Bootstrap или Zurb Foundation. В большинстве случаев 90% стилей не используется в проекте. Перед тем как показывать страницу, браузер должен загрузить все стили CSS, даже неиспользуемые на данной странице.
UnCSS
Существует отличный плагин UnCSS для удаления неиспользуемых стилей. Он работает следующим образом:
- HTML файлы загружаются с помощью PhantomJS и выполняется javascript
- Используемые стили выгружаются из полученного html
- Стили конкатенируются и парсятся с помощью css-parse
- document.querySelector отфильтровывает селекторы, которые не встречаются в HTML файле
- Оставшиеся селекторы преобразуются обратно в CSS
Использование grunt-uncss
Плагин grunt-uncss — это надстройка над UnCSS и позволяет удалить неиспользуемый CSS в течении нескольких минут.
Для установки плагина в ваш проект введите команду:
1 | npm install grunt-uncss --save-dev |
Настроим конфигурацию плагина в файле Gruntfile.js:
1 2 3 4 5 6 7 8 9 | uncss: { dist: { src: ['app/about.html', 'app/index.html'], dest: 'dist/css/tidy.css' options: { report: 'min' } } } |
В конфигурации задачи мы указали, какие html файлы использовать для сканирования и куда сохранить файл css.