Много раз в SitePoint я упоминал о том, что достижение высокой производительности является главной задачей сегодня и как вам следует стремиться к быстрым веб-страницам. В некоторых моих статьях о API-интерфейсах JavaScript, таких как Введение в API синхронизации ресурсов и Обнаружение API синхронизации пользователей , я дал вам все, что вам нужно, чтобы знать, что замедляет ваш проект. Ранее в этом году Крейг Баклер также освещал эту тему в своей статье «Полное руководство по снижению веса страницы» .
Если вы не застряли в прошлом, скорее всего, вы используете такой бегунок задач, как Grunt или Gulp, чтобы улучшить рабочий процесс за счет автоматизации многих операций, которые мы выполняли вручную. В этой статье я опишу пять задач Grunt, которые помогут нам повысить производительность наших веб-страниц.
Грунт-вно-imagemin
Первая задача, которую я хочу упомянуть, это grunt-contrib-imagemin . Причина, по которой я хочу обсудить это в первую очередь, заключается в том, что изображения убивают сеть. Шутки в сторону!
Если вы посмотрите на статистику HTTParchive.org, то увидите, что изображения составляют более 63% от общего размера страницы. Причиной такого раздувания является то, что часто изображения не сжимаются, чтобы иметь как можно меньший вес. grunt-contrib-imagemin — это одна из задач, которую вы можете использовать для решения этой проблемы.
Эта задача поставляется со следующими оптимизаторами для сжатия большинства форматов изображений, используемых в Интернете:
- Gifsicle для сжатия изображений GIF
- jpegtran для сжатия изображений JPEG
- optipng для сжатия изображений PNG
- svgo для сжатия изображений SVG
Пример конфигурации для этой задачи показан ниже:
imagemin: { dist: { options: { optimizationLevel: 5 }, files: [{ expand: true, cwd: 'src/images', src: ['**/*.{png,jpg,gif}'], dest: 'dist/' }] } } Эта конфигурация обеспечивает высокий уровень оптимизации с помощью опции optimLevel. Это значение варьируется от 0 до 7, с 3 по умолчанию. В этом случае оптимизируются изображения с расширением png, jpg или gif, расположенные в папке «src / images» и во всех ее подпапках. Результат оптимизации будет сохранен в папке «dist».
Грунт-вно-уродовать
Задача grunt-contrib-uglify используется для минимизации файлов JavaScript. Эта задача удаляет все ненужные пробелы, которые есть в вашем исходном коде, и последовательно переименовывает переменные и функции, чтобы использовать как можно более короткое имя.
Некоторые опции, которые вы часто будете использовать для этой задачи, это sourceMap и banner . Первый создает исходный файл карты в том же каталоге, что и целевой файл. Чтобы включить эту опцию, вы должны установить для нее значение true (по умолчанию установлено значение false ). banner — это строка для добавления к минимизированному выводу, в которой вы обычно пишете имя файла / библиотеки / фреймворка, его версию, ваше имя как автора и лицензию. Значением по умолчанию является пустая строка.
Чтобы дать вам представление о том, как выглядит минимизированный источник, предположим, что у вас есть следующий код JavaScript:
var MyApplication = function() { var data = 'hello'; this.sum = function(first, second) { return first + second; } this.showData = function() { return data; } };
Процесс минимизации преобразует его в следующий код:
var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};
Пример конфигурации этого инструмента показан ниже:
uglify: { dist: { options: { sourceMap: true, banner: }, files: { 'dest/output.min.js': ['src/input.js'], } } }
Грунт-вно-cssmin
Как следует из названия, grunt-contrib-cssmin сжимает файлы CSS. Как и в случае задачи grunt-contrib-uglify , в этой задаче есть banner .
Простая конфигурация для этой задачи:
cssmin: { dist: { options: { banner: }, files: { 'dist/css/style.min.css': ['src/css/**/*.css'] } } }
В этом примере минимизируются все CSS-файлы, хранящиеся в «src / css» и его подпапках, и сохраняется результат в одной таблице стилей под названием «style.min.css», которая помещается в папку «dist / css». Кроме того, конфигурация добавляет баннер в верхней части уменьшенного файла.
Грунт-uncss
Другая задача, связанная с CSS, — это grunt-uncss . Эта задача удаляет неиспользуемый CSS из проекта, поэтому уменьшает размер конечного файла CSS и, таким образом, сокращает время загрузки. Это особенно хорошо подходит, если вы разрабатываете с использованием фреймворка, такого как Boostrap или Foundation. Эта задача имеет ряд важных ограничений, которые вы можете прочитать в официальной документации .
Некоторые хорошие опции, о которых стоит упомянуть, ignore , что позволяет нам указать список селекторов, которые не должны быть удалены, и ignoreSheets , которые позволяют нам определять таблицы стилей, которые следует игнорировать.
Пример использования этой задачи показан ниже:
uncss: { dist: { options: { ignore: [/js-.+/, '.special-class'], ignoreSheets: [/fonts.googleapis/], }, files: { 'dist/css/unused-removed.css': ['src/index.html', 'src/contact.html', 'src/service.html'] } } }
Грунт-вно-htmlmin
Последняя задача Grunt, которую я хочу обсудить в этой статье, — это grunt-contrib-htmlmin , задача минимизации HTML-кода. Он не сильно ускоряет ваш сайт, потому что он часто экономит всего несколько килобайт, а если вы используете контент с использованием сжатия gzip, выигрыш еще ниже. Поэтому, если вы хотите минимизировать свой HTML, ну … комплименты; это означает, что ваш сайт уже был оптимизирован.
Тем не менее, философия, которой следует придерживаться при работе с сетью, заключается в том, что каждый килобайт имеет значение. Итак, давайте посмотрим на простую конфигурацию, которая интегрирует эту задачу в наш рабочий процесс:
htmlmin: { dist: { options: { removeComments: true, collapseWhitespace: true }, files: [{ expand: true, cwd: 'src', src: '**/*.html', dest: 'dist/' }] } }
Приведенный выше код обрабатывает все страницы, помещенные в каталог «src» и его подпапки. Для каждой из этих страниц задача удаляет все комментарии и сворачивает найденные пробелы, сохраняя результаты в каталоге «dist».
Вывод
В этой статье я познакомил вас с пятью задачами Grunt, чтобы легко повысить производительность вашего сайта. Они настолько просты, что у вас действительно нет никаких оправданий, чтобы избегать их использования и предложить своим пользователям лучший опыт благодаря более быстрому обслуживанию. Надеюсь, вам понравилась эта статья, и вы скоро будете выполнять эти задачи.
Вы когда-нибудь использовали их? Насколько они улучшили ваш сайт? Есть ли какие-то задачи, которые вы любите и хотите поделиться с нами?