Подключаем сжатые min версии css и js с автоматическим слежением и обновлением

Не секрет, что для высоких показателей PageSpeed полезно минифицировать css и js код на сайте. А минифицированный css код вообще желательно выводить сразу в html, чтобы тот при загрузке не блокировал первичный рендеринг страниц.

Однако, недостаток подключения сжатых копий js или css всегда заключался в том, что непосредственно сжатый код править неудобно и непонятно, куда удобней править стандартные файлы. Но тогда, после каждого редактирования своих css или js файлов, после каждой мелкой правки в них, надо было вручную перегонять оригиналы в сжатые min версии, перезаливать их на сайт, следить за актуальностью — соответствием версий сжатых и не сжатых файлов друг другу, путаться потом в этой актуальности… Какой-то геморрой, согласны?

Так было раньше, но после установки php библиотеки https://www.minifier.org/ всё будет иначе.

В шаблоне мы продолжим указывать обычные css, js файлы. Но особым способом. И редактировать тоже будем только обычные файлы, как и всегда это делали. А сжатые min копии больше не наша забота, управлять ими будет только скрипт.

Например:

Или так:

То есть, указываете в шаблоне обычные свои js, css файлы с относительным путем от корня сайта. И правки, когда надо, вносите как обычно в них. А создавать их сжатые версии, следить за соответствием оригиналам и актуальностью, автоматом обновлять эти сжатые копии(если был отредактирован оригинальный файл), будет специальная библиотека ( https://www.minifier.org/ ) и функция minify().

Принцип следующий: например есть файл tpl/css/styles.css , если надо напрямую в html вывести его сжатый css код, то вы просто подключаете в шаблоне его так:

На выходе в браузере получится:

Если же нужно вывести не сжатый css код, а просто подключить на странице сжатый css файл тегом <link rel=»stylesheet» href=»…»>, тогда надо добавить параметр url вот так:

На выходе в браузере получится путь с min копией соответствующего файла:

При этом автоматически будет создан соответствующий файл /tpl/css/styles.min.css и функция сама будет отслеживать его соответствие оригиналу. Если вы внесли правки в оригинал — функция minify() автоматически обновит и соответствующий ему сжатый файл. То есть, создает, обновляет и управляет min версиями только скрипт. Достаточно подключить в шаблоне таким способом обычные файлы js и css, а про их сжатые версии забыть и не париться, будто их нет. Правки вносятся в обычные версии файлов, а скрипт подхватит, создаст и если надо обновит сжатые копии. При изменении файла изменится и timestamp метка, чтобы подхватывалось кешем юзеров.

По умолчанию, без второго параметра, функция minify() для css файлов выводит сразу сжатый css код, а для js файлов выводит путь на сжатую версию js файла.

Но это поведение можно менять, передав второй параметр. Например, если нужен не путь к сжатому файлу, а сжатый js код файла, то:

На выходе будет:

А если из src нужно подключить min js, тогда:

На выходе будет путь с его актуальной min версией:

Внедряется на сайт всё просто:

Да, на папочки с файлами css или js права на запись должны иметься 755 По месту использования включаем такой скрипт:

А если composer не используется, то:

 

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *