Как минимизировать Javascript и CSS с помощью PHP

Содержание

1 1. Сжатие JavaScript и CSS с помощью Minify
2 2. Сжать Javascript с помощью Squeeze
3 3. Сжатие Javascript с помощью JShrink

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

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

В этой статье вы узнаете, как минимизировать ваш код CSS и JS с 3 различными библиотеками.

1. Сжатие JavaScript и CSS с помощью Minify

Если вы ищете класс, который минимизирует как Javascript, так и CSS, то вы можете использовать пакет Minify написано MatthiasMullie. Пакет Minify может использоваться как с Composer, так и с простыми классами PHP.

Установка с композитором

Добавьте пакет Minify в качестве зависимости к вашему проекту с помощью следующей команды:

composer require matthiasmullie/minify

Или отредактируйте свой composer.json, добавьте следующую строку в ваш запрос и затем выполните composer install:

{
"require": {
"matthiasmullie/minify": "^1.3"
}
}

И тогда вы сможете использовать Minify.

Установка без композитора

Если вы не используете composer, то процесс установки может занять немного больше времени. Сначала загрузите репозиторий в виде файла .zip из репозитория здесь или просто клонируйте его с помощью Git:

git clone https://github.com/matthiasmullie/minify.git

Этот пакет зависит от Конвертер путей, поэтому вам также необходимо клонировать этот репозиторий (или загрузить .zip хранилища):

git clone https://github.com/matthiasmullie/path-converter.git

Заметка

Убедитесь, что вы оставили структуру каталогов нетронутой (файлы в data/js должен оставаться в том же месте относительно src/JS.php) для Minify и Path Converter.

Теперь, если вы не используете composer, то, вероятно, у вас есть папка для сторонних библиотек, внутри этой папки вы будете вставлять (соответственно: minify/src а также path-converter/src) содержание /src папка каждой библиотеки в папке с именем библиотеки.

Наконец, включите необходимые файлы библиотек в код, где вы хотите использовать его, используя require_once:

И вы готовы использовать Minify в своем коде.

Читайте также:  Как определить, установлен ли AdBlock на устройстве ваших посетителей с помощью JavaScript

`использование`

Чтобы узнать, как минимизировать Javascript с помощью этой библиотеки, вы можете воспользоваться следующими примерами:

use MatthiasMullie\Minify;
$sourcePath = '/path/to/source/css/file.js';
$minifier = new Minify\JS($sourcePath);
// we can even add another file, they'll then be
// joined in 1 output file
$sourcePath2 = '/path/to/second/source/css/file.js';
$minifier->add($sourcePath2);
// or we can just add plain js
$js = 'var test = 1';
$minifier->add($js);
// save minified file to disk
$minifiedPath = '/path/to/minified/js/file.js';
$minifier->minify($minifiedPath);
// or just output the content
echo $minifier->minify();

И чтобы минимизировать CSS (он работает так же, как сжатие Javascript, но с классом CSS), используйте следующий код:

use MatthiasMullie\Minify;
$sourcePath = '/path/to/source/css/file.css';
$minifier = new Minify\CSS($sourcePath);
// we can even add another file, they'll then be
// joined in 1 output file
$sourcePath2 = '/path/to/second/source/css/file.css';
$minifier->add($sourcePath2);
// or we can just add plain CSS
$css = 'body { color: #000000; }';
$minifier->add($css);
// save minified file to disk
$minifiedPath = '/path/to/minified/css/file.css';
$minifier->minify($minifiedPath);
// or just output the content
echo $minifier->minify();

Мы рекомендуем вам посетить хранилище, чтобы получить больше информации о методах здесь.

`2. Сжать Javascript с помощью Squeeze`

Для сжатия кода Javascript мы рекомендуем использовать выжимать. Сжатие сжимает, сжимает, минимизирует и искажает код Javascript. Это единственный класс PHP, который был разработан, поддерживается и тщательно тестируется с 2003 года на основных платформах JavaScript (например, jQuery). JSqueeze работает с любым кодом JavaScript без ошибок, даже если точки с запятой отсутствуют. По степени сжатия сравнивается с YUI Compressor и UglifyJS.

Мы рекомендуем Squeeze, потому что это:

Удаляет комментарии и пробелы.
Переименовывает все локальные переменные, как правило, в один символ.
Сохраняйте условные комментарии Microsoft.
Чтобы максимизировать последующее сжатие HTTP (deflate, gzip), новые имена переменных выбираются с учетом замыканий, частоты переменных и частоты символов.
Может переименовывать также глобальные переменные, методы и свойства, но только если они помечены как специальные в соответствии с некоторыми соглашениями об именах. Используйте JSqueeze :: SPECIAL_VAR_PACKER, чтобы переименовать переменные, имя которых начинается с одного или нескольких $ или с одним _,
Переименовывает также локальные / глобальные переменные, найденные в строках, но только если они помечены как специальные.
Если вы используете with/eval тогда будь осторожен.
Заменяет false/true от !1/!0
Заменяет new Array/Object от []/{}#
Последовательные слияния var объявления с запятыми
Объединяет последовательные конкатенированные строки
Может заменить необязательные точки с запятой переводом строки, что облегчает отладку вывода.
Держите важные комментарии отмеченными /*!...
Лечит три точки с запятой ;;; как однострочные комментарии.
Исправлена специальная область видимости в браузерах
Обход ошибок при обработке выражений именованных функций в IE<=8

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

Следуйте установке Squeeze:

`С композитором`

Чтобы установить Squeeze в свой проект, выполните следующую команду:

composer require patchwork/jsqueeze

Или измените composer.json файл, добавьте следующую строку в require и затем выполните composer install:

{
"require": {
"patchwork/jsqueeze": "~2.0"
}
}

После установки вы сможете минимизировать код с помощью Squeeze.

`Без композитора`

Если вы не используете composer, вы можете легко использовать Squeeze, скопировав класс JSQueeze.php и включив его в свой проект, используя require_once:

require_once 'JSqueeze.php';

`использование`

Использование Squeeze довольно просто и может быть достигнуто с помощью только 1 метода. Этот метод сжат:

squeeze(
$fatJs,
true,   // $singleLine
true,   // $keepImportantComments
false   // $specialVarRx
);

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

Второй параметр $singleLine позволяет вам решить, хотите ли вы сохранить разрыв, если точка с запятой найдена. Обычно мы хотим, чтобы это значение всегда было равно true.

Третий параметр $keepImportantComments позволяет решить, хотите ли вы /*! комментарии должны быть удалены.

Четвертый параметр $specialVarRx определяет регулярное выражение имен специальных переменных для глобальных переменных, методов, свойств и в подстановке строк, установите значение false, если вы не хотите ничего.

`3. Сжатие Javascript с помощью JShrink`

JShrink это javascript minifier, написанный на PHP. Он предназначен для работы с большими файлами javascript и удаления лишних битов, что ускоряет загрузку. JShrink имеет некоторые преимущества перед другими библиотеками. Поскольку он был написан на нативном php, а не портирован, он имеет лучшую производительность. Он имеет некоторые дополнительные функции, такие как возможность сохранять данные лицензирования после сокращения другого контента.

`С композитором`

Чтобы использовать JShrink в своем проекте, выполните следующую команду:

composer require tedivm/jshrink

Или отредактируйте свой composer.json файл и добавьте следующую строку require, а затем выполните composer install:

{
"require": {
"tedivm/jshrink": "~1.0"
}
}

`Без композитора`

Если вы хотите использовать JShrink без композитора, просто включить класс Minifier.php библиотеки с помощью require_once:

require_once 'Minifier.php';

`использование`

Использование JShrink довольно просто, класс Minifier предоставляет доступ к статическому методу minify. Этот метод ожидает в качестве первого параметра строку Javascript для минимизации, а в качестве второго параметра - массив с опциями (на самом деле, есть только 1 опция flaggedComments):

 false
));