Как сделать min файл

Обновлено: 06.07.2024

На эту тему написано уже десятки статей, но тема продолжается обсуждаться, а в чатах и на форумах люди снова и снова задают вопросы и сталкиваются с проблемами. Давайте вместе попробуем на примерах разобраться как же правильно подключать стили и скрипты в WordPress.

Начнем по порядку. Есть хук wp_enqueue_scripts , который срабатывает в момент подключения в очередь на вывод файлов стилей и скриптов. Это событие срабатывает в момент хука wp_head с приоритетом 1. Учтите, что для его работы в файле header.php необходима функция wp_head() .

На этот хук wp_enqueue_scripts принято вешать функции, которые подключают стили и скрипты темы с помощью функций wp_enqueue_style() и wp_enqueue_script() соответственно.

Простой способ подключения может выглядеть следующим образом:

Заметьте, что если в функции присутствует префикс get_template_ , то будет подключен файл из родительской темы, если же префикс get_stylesheet_ , то файл будет подключен из дочерней темы только в том случае, если дочерняя тема активирована (если не активирована, файл подключается из родительской).

Как сделать подключение скриптов по условию

При подключении скриптов и стилей на хуке wp_enqueue_scripts глобальные переменные уже определены, поэтому все условные теги вида is_home() , is_front_page() , is_archive() , is_page() и подобные будут работать. В примере ниже мы подключаем на главную одну таблицу стилей, а на страницу категорий другую. Общий файл стилей будет подключен на все страницы сайта.

Как сделать обновление скриптов в кеше браузера

Ответ на него достаточно простой: при первом посещении сайта браузер скачивает файлы стилей, скриптов, изображения и т.д. себе в кеш. При каждом последующем посещении браузер уже не будет скачивать их заново, а возьмет из своего локального хранилища (кеша). Это работает в целях оптимизации посещения интернет-ресурсов.

Теперь браузер будет проверять, изменилась ли версия (время последнего изменения) файла и только в случае положительного ответа скачивать файл заново.

К тому же, в одной из последних версий добавили функцию get_theme_file_uri() , которая проверяет наличие файла в дочерней теме перед подключением, это довольно удобно.

Если мы применим эти советы, то получим примерно следующее:

Популярный генератор тем underscores в качестве версии скриптов указывает некую магическую константу _S_VERSION , предварительно определив ее define( '_S_VERSION', '1.0.0' ) . Как вы понимаете, версия не будет меняться динамически при таком подходе и ее указание довольно бессмысленно.

Как добавить один скрипт после другого

Еще, при работе со скриптами полезно знать, что в третьем параметре функции wp_enqueue_script() можно указать зависимость этого скрипта от других. Например, если вы укажите array('jquery') , то скрипт example.min.js будет подключен после скрипта jquery.min.js.

Кроме того, существует полезная функция wp_add_inline_script() , которая позволит вам добавить скрипт прямо в html документ, после указанного. Аналогично для стилей будет работать функция wp_add_inline_style() . Рассмотрим пример подключения slick-слайдера:

Как видите, сначала нужные файлы подключаются с помощью функций wp_enqueue_style() и wp_enqueue_script() , после чего скрипт инициализации слайдера вставляется с помощью wp_add_inline_script() после основного slick.min.js.

Как сделать предварительную регистрацию скриптов

Еще одной важной особенностью работы со скриптами является то, что скрипт можно только зарегистрировать c помощью функции wp_register_script() , а выполнять подключение уже в любом другом месте проекта по необходимым условиям. Рассмотрим на примере:

Сначала мы регистрируем скрипты библиотеки masonry для того, чтобы сделать красивые фото-галереи у нас на сайте. Эти скрипты не будут подключены в html-документ до тех пор, пока вы не используете функцию wp_enqueue_style() или wp_enqueue_script() .

Сами фото-галереи выводятся с помощью шорткодов и мы можем прямо здесь выполнить их подключение. Таким образом эти скрипты будут подключены в html-документе только в том случае, если на странице будет использован этот шорткод.

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Перед выкладыванием JavaScript на «боевую» машину – пропускаем его через минификатор (также говорят «сжиматель»), который удаляет пробелы и по-всякому оптимизирует код, уменьшая его размер.

В этой статье мы посмотрим, как работают современные минификаторы, за счёт чего они укорачивают код и какие с ними возможны проблемы.

Современные сжиматели

Рассматриваемые в этой статье алгоритмы и подходы относятся к минификаторам последнего поколения.

Самые широко используемые – первые два, поэтому будем рассматривать в первую очередь их.

Наша цель – понять, как они работают, и что интересного с их помощью можно сотворить.

С чего начать?

Обратите внимание на флаг --charset для GCC. Без него русские буквы будут закодированы во что-то типа \u1234 .

Google Closure Compiler также содержит песочницу для тестирования сжатия и веб-сервис, на который код можно отправлять для сжатия. Но скачать файл обычно гораздо проще, поэтому его редко где используют.

Убедиться, что стоит Node.js
Поставить npm install -g uglify-js .
Сжать файл my.js : uglifyjs my.js -o my.min.js

Что делает минификатор?

Все современные минификаторы работают следующим образом:

Разбирают JavaScript-код в синтаксическое дерево.

Также поступает любой интерпретатор JavaScript перед тем, как его выполнять. Но затем, вместо исполнения кода…

Бегают по этому дереву, анализируют и оптимизируют его.

Записывают из синтаксического дерева получившийся код.

Как выглядит дерево?

Посмотреть синтаксическое дерево можно, запустив компилятор со специальным флагом.

Для GCC есть даже способ вывести его:

Сначала сгенерируем дерево в формате DOT:

Здесь флаг --print_tree выводит дерево, а --use_only_custom_externs убирает лишнюю служебную информацию.

Файл в этом формате используется в различных программах для графопостроения.

Чтобы превратить его в обычную картинку, подойдёт утилита dot из пакета Graphviz:

Пример кода my.js :

Результат, получившееся из my.js дерево:

В узлах-эллипсах на иллюстрации выше стоит тип, например FUNCTION (функция) или NAME (имя переменной). Комментарии к ним на русском языке добавлены мной вручную.

Кроме него к каждому узлу привязаны конкретные данные. Сжиматель умеет ходить по этому дереву и менять его, как пожелает.

Обычно когда код превращается в дерево – из него естественным образом исчезают комментарии и пробелы. Они не имеют значения при выполнении, поэтому игнорируются.

Но Google Closure Compiler добавляет в дерево информацию из комментариев JSDoc, т.е. комментариев вида /** . */ , например:

Такие комментарии не создают новых узлов дерева, а добавляются в качестве информации к существующем. В данном случае – к переменной minIEVersion .

В них может содержаться информация о типе переменной ( number ) и другая, которая поможет сжимателю лучше оптимизировать код ( const – константа).

Оптимизации

Сжиматель бегает по дереву, ищет «паттерны» – известные ему структуры, которые он знает, как оптимизировать, и обновляет дерево.

В разных минификаторах реализован разный набор оптимизаций, сами оптимизации применяются в разном порядке, поэтому результаты работы могут отличаться. В примерах ниже даётся результат работы GCC.

Объединение и сжатие констант

'my' + 'string' → "mystring" .
600 * 600 * 5 → 18E5 (научная форма числа, для краткости).
1 && 0 → 0 .
b && 0 → без изменений, т.к. результат зависит от b .

Локальная переменная заведомо доступна только внутри функции, поэтому обычно её переименование безопасно (необычные случаи рассмотрим далее).
Также переименовываются локальные функции.
Вложенные функции обрабатываются корректно.

После оптимизации GCC:

Локальные переменные были переименованы.
Лишние переменные убраны. Для этого сжиматель создаёт вспомогательную внутреннюю структуру данных, в которой хранятся сведения о «пути использования» каждой переменной. Если одна переменная заканчивает свой путь и начинает другая, то вполне можно дать им одно имя.
Кроме того, операции elem = getElementsById и elem.parentNode объединены, но это уже другая оптимизация.

Если переменная присваивается, но не используется, она может быть удалена. В примере выше эта оптимизация была применена к переменной parent , а затем и к параметру node .

Заведомо ложная ветка if(0) < .. >убрана, заведомо истинная – оставлена.

То же самое будет с условиями в других конструкциях, например a = true ? c : d превратится в a = c .

Код после return удалён как недостижимый.

Конструкция while переписана в for .
Конструкция if (i) . переписана в i&&. .
Конструкция if (cond) . else . была переписана в cond ? . : . .

Инлайнинг функции – приём оптимизации, при котором функция заменяется на своё тело.

После оптимизации (переводы строк также будут убраны):

Вызовы функций createMessage и showElement заменены на тело функций. В данном случае это возможно, так как функции используются всего по разу.
Эта оптимизация применяется не всегда. Если бы каждая функция использовалась много раз, то с точки зрения размера выгоднее оставить их «как есть».

Переменные заменяются на значение, если оно заведомо известно.

Переменная isVisible заменена на true , после чего if стало возможным убрать.

Переменная hi заменена на строку.

Казалось бы – зачем менять hi на строку? Ведь код стал ощутимо длиннее!

…Но всё дело в том, что минификатор знает, что дальше код будет сжиматься при помощи gzip. Во всяком случае, все правильно настроенные сервера так делают.

Алгоритм работы gzip заключается в том, что он ищет повторы в данных и выносит их в специальный «словарь», заменяя на более короткий идентификатор. Архив как раз и состоит из словаря и данных, в которых дубликаты заменены на идентификаторы.

Если вынести строку обратно в переменную, то получится как раз частный случай такого сжатия – взяли "Привет вам из JavaScript" и заменили на идентификатор hi . Но gzip справляется с этим лучше, поэтому эффективнее будет оставить именно строку. Gzip сам найдёт дубликаты и сожмёт их.

Плюс такого подхода станет очевиден, если сжать gzip оба кода – до и после минификации. Минифицированный gzip-сжатый код в итоге даст меньший размер.

…И ещё некоторые другие мелкие изменения кода…

Подводные камни

Описанные оптимизации, в целом, безопасны, но есть ряд подводных камней.

Конструкция with

Куда будет присвоено значение position = 'absolute' ?

Это неизвестно до момента выполнения: если свойство position есть в style – то туда, а если нет – то в локальную переменную.

Можно ли в такой ситуации заменить локальную переменную на более короткую? Очевидно, нет:

Такая же опасность для сжатия кроется в использованном eval . Ведь eval может обращаться к локальным переменным:

Получается, что при наличии eval мы не имеем права переименовывать локальные переменные. Причём (!), если функция является вложенной, то и во внешних функциях тоже.

А ведь сжатие переменных – очень важная оптимизация. Как правило, она уменьшает размер сильнее всего.

Что делать? Разные минификаторы поступают по-разному.

UglifyJS – не будет переименовывать переменные. Так что наличие with/eval сильно повлияет на степень сжатие кода.
GCC – всё равно сожмёт локальные переменные. Это, конечно же, может привести к ошибкам, причём в сжатом коде, отлаживать который не очень-то удобно. Поэтому он выдаст предупреждение о наличии опасной конструкции.

Ни тот ни другой вариант нас, по большому счёту, не устраивают.

Для того, чтобы код сжимался хорошо и работал правильно, не используем with и eval .

Либо, если уж очень надо использовать – делаем это с оглядкой на поведение минификатора, чтобы не было проблем.

Я подробно рассмотрел на примере популярных CMS, как выполнить минификацию (сжатие) исходного кода сайта. Для кого-то это может показаться совсем не нужным дополнением, но я рекомендую уделить этому особое внимание.

Для чего вообще делается сжатие файлов? Для того, чтобы уменьшить их вес, тем самым ускорить работу вашего сайта.

Приведу простой пример. У вас есть не сжатая библиотека jQuery, которая весит 120 килобайт. А в сжатом виде эта же библиотека будет весить 60 килобайт. Получаем экономию в 60 КБ, что вполне неплохо. А если таких файлов 15-20?

Вообще сжатие файлов можно производить и вручную через какой-нибудь онлайн-сервис, а можно поступить куда умнее и воспользоваться готовым PHP-скриптом, с помощью которого легко можно решить поставленные задачи.

Минификация (сжатие) CSS-файлов на PHP

Основная идея минификации стилей будет заключаться в следующем: мы объединяем все файлы в один и удаляем в нем все переводы строк, символы табуляции, двойные пробелы и комментарии.

PHP-скрипт будет выглядеть следующим образом:

В нем вы прописываете адреса до всех ваших файлов стилей и отправляете итоговый файл на сайт по FTP или другим удобным для вас способом.

После чего на сайте вы удаляете указанные в скрипте стили и подключаете новый стиль по такому принципу:

Где «/style.php» – это ссылка до ранее созданного PHP-файла.

Сохраняете все изменения и смотрите, не поехал ли дизайн на вашем сайте, если поехал – то проверьте, корректные ли адреса вы прописали в скрипте.

Теперь, если вы обратитесь к вашему скрипту через браузер, то увидите, что ваши стили максимально оптимизированы.

Минификация (сжатие) JS-файлов на PHP

Оптимизация скриптов выполняется примерно по тому же принципу: объединяем все файлы в один и удаляем в нем переводы строк, двойной пробел и знак табуляции, а также комментарии кода.

Итоговый скрипт будет выглядеть следующим образом:

Не забывайте в нем прописать ссылки до ваших скриптов.

И по аналогии с CSS-файлами – подключение следующее:

Где «/script.php» – ссылка до ранее созданного PHP-скрипта.

На что здесь стоит обратить внимание?

Проставляйте корректные ссылки до ваших файлов.
На вашем хостинге должна быть поддержка PHP.

В остальном вроде проблем быть не должно, но если все-таки они появились – пишите об этом в комментариях, постараюсь вам помочь.

Здравствуйте, друзья!

В этой статье я хочу рассказать о том, что такое минификация HTML- и CSS-кода, для чего она нужна, и как ее выполнить.

Сначала разберемся с HTML-кодом.

Что такое минифицированный код

Лучше всего это понять, рассмотрев примеры. Для этого попробуйте посмотреть коды страниц различных сайтов. Чтобы их увидеть, нужно сделать следующее:

Откройте любую страницу, и в любом месте щелкните ПКМ.
Откроется контекстное меню, в нем выбираем пункт Просмотр кода страницы (в разных браузерах может быть немного другой текст, но смысл тот же). Можно воспользоваться комбинацией клавиш Ctrl+U.
В новой вкладке или окне откроется HTML-код данной страницы.

Попробуйте сделать это несколько раз с разными сайтами. Код будет внешне выглядеть или как на первом скриншоте, или как на втором.

В первом случае код разбит на пронумерованные строки, он имеет определенную структуру, каждый элемент страницы расположен на отдельной строчке, тэги имеют отступы и т. д.

Во втором случае код расположен очень компактно, нет никаких отступов, пробелов. Обратите внимание, на скриншоте не видна нумерация строк. Просто каждая строка содержит большой кусок кода, который в окне браузера визуально занимает несколько строк.

В первом случае мы имеем HTML-код в обычном виде, в котором его принято записывать при разработке сайта.

Во втором случае – компактный минифицированный код.

Структурирование кода на блоки, строки и т. п. необходимо для удобства чтения человеком. Мы воспринимаем такие блоки целиком, мы видим, где тэг открывается, где закрывается.

Для браузеров это не нужно, они считывают код последовательно, и лишние переводы строк, пробелы, комментарии в тексте только затрудняют его чтение и увеличивают время загрузки страницы.

Таким образом, можно выделить две главные причины необходимости минификации кода:

Уменьшение размера (веса) страницы и, как следствие, увеличение скорости ее загрузки.
Вторая причина вытекает из первой. Это улучшение поведенческих факторов. Если сайт загружается быстрее, то меньше показатель отказов, рост посещаемости, повышение в поисковой выдаче и т. д.

Как минифицировать код

Для того, чтобы выполнить эту операцию на своем блоге есть несколько способов.

Оптимизация на стадии разработки

Этот способ можно рекомендовать в том случае, если заказывается уникальный шаблон у профессионального разработчика и, важный момент, в дальнейшем не подразумевается внесение в него каких-либо изменений. Дело в том, что код такого шаблона практически не читаем, и редактировать его весьма сложно.

Чаще всего новички используют для создания своего сайта готовые темы, платные или бесплатные. Все они имеют код в обычном, удобном для чтения человеком виде. Такие шаблоны следует минифицировать.

Использование плагинов

Да, конечно, для этих целей разработаны специальные плагины. Вот некоторые из них:

На самом деле, плагин предназначен для кэширования страниц сайта, но одна из его функций – сжатие HTML-файлов. Сразу отмечу, что этот плагин платный, самая популярная версия стоит 39 $, но, по отзывам, он работает очень хорошо, заметно уменьшает время загрузки страниц и очень прост в настройке.

Если цена этого плагина вас не устраивает, можно воспользоваться другим решением. Скрипт Dynamic Website Compressor стоит около 9$, его можно приобрести по ссылке.

Это не обычный плагин, устанавливаемый через панель управления WordPress, а скрипт, который нужно закачать в корневую директорию сайта и подключить, вставив специальный код в файл index.php.

Сам скрипт находится в файле compressor.php, поэтому в индексный файл вставляется строчка

После этого скрипт начинает работать.

Оптимизация CSS

Если анализировать скорость загрузки сайта с помощью сервиса PageSpeed Insights, то он выдает рекомендации по ее увеличению. Одна из таких рекомендаций может быть – Сократите CSS.

Кстати, сам сервис предлагает выполнить эту работу, но я могу предложить другой ресурс, который, по многим отзывам, сокращает CSS-код гораздо лучше. Вот ссылка на него.

С помощью сервиса CSS Resizer можно выполнить минификацию css-файла или по указанию его url-адреса непосредственно на сервере, а можно закачав этот файл на сервис, а потом получив сжатый. Я обычно пользуюсь вторым вариантом для того, чтобы несжатые файлы стилей хранить на компьютере в отдельной папке для возможного дальнейшего редактирования. Как я уже отмечал, обработанные таким образом файлы редактировать очень сложно.

Пример использования сервиса CSS Resizer.

Скриншот части файла стилей style.css до обработки

А это – после сжатия

И размеры этого файла, соответственно, до

И после

Как видите, размер файла уменьшился более, чем в полтора раза. Кстати, css-файлов в шаблоне темы может быть несколько, и каждый из них можно таким образом минифицировать.

Читайте также: