Профессиональная поддержка сайтов: разработка, дизайн, тексты, SEO и прочее от 500 Р   •   Реклама
5 247 просм
12 комм
Поделиться:

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

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

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

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

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

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

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

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

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

<?php

	header("Content-type: text/css");
	
	function compress($buffer) {
	
		$buffer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $buffer);
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), "", $buffer);
		
		return $buffer;
		
	}
	
	ob_start("compress");
	
	include("../style/style1.css"); // Ссылка на стиль 1
	include("../style/style2.css"); // Ссылка на стиль 2
	include("../style/style3.css"); // Ссылка на стиль 3
	include("../style/style4.css"); // Ссылка на стиль 4

	ob_end_flush();
	
?>

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

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

<link rel="stylesheet" type="text/css" href="/style.php" />

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

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

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

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

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

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

<?php

	header("Content-type: text/javascript");

	function compress($buffer) {

		$buffer = preg_replace("/(?:(?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:(?<!\:|\\\|\'|\")\/\/.*))/", "", $buffer);
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), "", $buffer);

		return $buffer;

	}
	
	ob_start("compress");

	include("../js/script1.js"); // Ссылка на скрипт 1
	include("../js/script2.js"); // Ссылка на скрипт 2
	include("../js/script3.js"); // Ссылка на скрипт 3
	include("../js/script4.js"); // Ссылка на скрипт 4

	ob_end_flush();
	
?>

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

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

<script type="text/javascript" src="/script.php"></script>

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

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

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

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

12
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Администратор748

Олег Олегов, по кодировке:

header("Content-type: text/css");

замените на:

header("Content-type: text/css; charset=utf-8");

По внешним файлам: нет.

Скачиваете файл к себе на хостинг и потом подключаете локально.

15.11 в 17:32
  • 0
Пользователь3

Артем Мáлков, еще пара вопросов возникло

- слетает кодировка css (какую строку в style.php нужно добавить что бы установить ее принудительно)

- внешние css и js также подключать? например https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js include("..https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"); верно?

- сжатие js у меня не заработало.... почему то

Спасибо

15.11 в 15:18
  • 0
Администратор748

Олег Олегов, подключайте их локально. Из Google шрифты переносятся за несколько минут.

14.11 в 22:01
  • 0
Пользователь3

Спасибо, работает кроме внешних шрифтов... не подключается @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Extra........................

14.11 в 20:23
  • 0
Администратор748

Богдан, в коде была ошибка - исправил. Попробуйте еще раз.

13.11 в 14:55
  • 0
Пользователь1

Артем привет, скажи пожалуйста по какой причине может не работать?

В файле пути указаны верно, открываю style.php просто белая страница, пробовал и на опенсервере, и на хостинге не получается. Хотя когда статья выходила пробовал все работал, щас потребовалось сделать, зашел и так и так, не получается( Помоги пожалуйста.

Может быть архив с примером рабочим загрузить, чтоб было проще. Заранее большое спасибо.

13.11 в 14:03
  • 1
Администратор748

Роман в ближайшее время напишем инструкцию.

30.07 в 17:29
  • 0
Гости679

А есть варианты минификаций для Joomla и ModX ? интересно было бы почитать и протестить у себя.

заранее большое спасибо.

27.07 в 12:52
  • 1
Администратор748

Олег, очень громкие слова smiley

Все работает!

29.05 в 18:43
  • 0
Гости679

Вообще не работает! хрень!

29.05 в 17:51
  • -2
Гости679

Хорошая штука. Артем скажи пожалуйста, можно ли сделать так?

<link rel="stylesheet" type="text/css" href="{css-min}" />

<script src="{js-min}" type="text/javascript"></script>

{css-min} - в настройках скрипта указываем путь, и скрипт создает файл compiled.min.css

Типа $css_min = css/compiled.min.css - создаст такой путь, и будет туда записывать стили

На выходе подставит вот так данные.

<link rel="stylesheet" type="text/css" href="css/compiled.min.css" />

С JS точно так-же, объеденить в один скрипт это все.

24.04 в 11:41
  • 1
Гости679

Не подключаются стили и js.

Пытаюсь разобраться в причине.

Уже прописывал к пути тег {THEME}.

Путь и названия папки и файлов проверил.

Подскажите пожалуйста, в чем ещё могут быть причины?

13.04 в 21:21
  • 0
Гости679

Познавательно. Протестирую на своём сайте. Раньше такое в голову не приходило

7.01 в 05:22
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера