Генератор favicon   •   Online-инструменты
974 просм
3 комм
Поделиться:

Минификация JS- и CSS-файлов на PHP

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

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

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

Минификация JS- и CSS-файлов на PHP

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

Минификация CSS-файлов на PHP

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

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

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

	ob_start("compress");
	
	function compress($buffer) {
		$buffer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $buffer);
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), "", $buffer);
		return $buffer;
	}

	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");

	ob_start("compress");

	function compress($buffer) {
		$buffer = preg_replace("!/\*[^*]*\*+([^/][^*]*\*+)*/!", "", $buffer);
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", "  ", "    ", "    "), "", $buffer);
		return $buffer;
	}

	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.

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

3
комментария
Artem
7.01 в 05:22
Познавательно. Протестирую на своём сайте. Раньше такое в голову не приходило
  • 0
Валерий
13.04 в 21:21
Не подключаются стили и js.
Пытаюсь разобраться в причине.
Уже прописывал к пути тег {THEME}.
Путь и названия папки и файлов проверил.
Подскажите пожалуйста, в чем ещё могут быть причины?
  • 0
Богдан
24.04 в 11:41
Хорошая штука. Артем скажи пожалуйста, можно ли сделать так?

<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 точно так-же, объеденить в один скрипт это все.
  • 1
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Ваше Имя
Ваш E-mail
Текст комментария