Минимизация CSS и JavaScript — различия между версиями

Материал из Umicms
Перейти к:навигация, поиск
 
(не показано 6 промежуточных версий 1 участника)
Строка 1: Строка 1:
 
  [[category:Написание кастомных макросов]]
 
  [[category:Написание кастомных макросов]]
 +
[[category:Верстка в XSLT]]
 +
[[category:Верстка в TPL]]
 +
'''Актуально для версии 2.9'''
 +
 
<p>
 
<p>
 
Прежде всего, давайте определимся, зачем нам сжимать CSS и JavaScript код? Сжатие CSS и JavaScript уменьшает время загрузки страницы. Если проект мал, то его применение не целесообразно. Однако, когда Вы работаете над большим проектом, сжатие может здорово уменьшить время загрузки страницы, поскольку удаляются комментарии из кода, код пишется в одну строку - удаляется "белое пространство" (пробелы и переносы строк). Имейте в виду, если вы действительно хотите увеличить производительность веб-сайта, после стадии разработки Вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов.
 
Прежде всего, давайте определимся, зачем нам сжимать CSS и JavaScript код? Сжатие CSS и JavaScript уменьшает время загрузки страницы. Если проект мал, то его применение не целесообразно. Однако, когда Вы работаете над большим проектом, сжатие может здорово уменьшить время загрузки страницы, поскольку удаляются комментарии из кода, код пишется в одну строку - удаляется "белое пространство" (пробелы и переносы строк). Имейте в виду, если вы действительно хотите увеличить производительность веб-сайта, после стадии разработки Вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов.
Строка 14: Строка 18:
 
     $path - директория расположения файлов
 
     $path - директория расположения файлов
 
   @param String
 
   @param String
     $files - список файлов для сжатия (символ "|" - разделитель)
+
     $files - список файлов для сжатия (символ "!" - разделитель)
 
  */
 
  */
 
public function getMinimizedCss($path, $files) {
 
public function getMinimizedCss($path, $files) {
   $files = explode('|', $files);
+
   $files = explode('!', $files);
 
   $content = '';
 
   $content = '';
 
   foreach($files as $file) {
 
   foreach($files as $file) {
Строка 35: Строка 39:
 
     $path - директория расположения файлов
 
     $path - директория расположения файлов
 
   @param String
 
   @param String
     $files - список файлов для сжатия (символ "|" - разделитель)
+
     $files - список файлов для сжатия (символ "!" - разделитель)
 
  */
 
  */
 
public function getMinimizedJs($path, $files) {
 
public function getMinimizedJs($path, $files) {
   $files = explode('|', $files);
+
   $files = explode('!', $files);
 
   $content = '';
 
   $content = '';
 
   foreach($files as $file) {
 
   foreach($files as $file) {
Строка 67: Строка 71:
 
</source>
 
</source>
 
<p>
 
<p>
На входе у макросов два параметра: директория расположения и список файлов. Разделителем в списке служит символ "|". Код из указанных файлов объединяется и затем проходит минимизацию, т.е. на выходе получается текст в одну строку, без символов табуляции, пробелов и комментариев.
+
На входе у макросов два параметра: директория расположения и список файлов. Разделителем в списке служит символ "!". Код из указанных файлов объединяется и затем проходит минимизацию, т.е. на выходе получается текст в одну строку, без символов табуляции, пробелов и комментариев.
 
</p>
 
</p>
 
<p>
 
<p>
Строка 76: Строка 80:
 
</p>
 
</p>
 
<source lang="PHP">
 
<source lang="PHP">
%content getMinimizedCss('css/', 'header|center|footer')%
+
%content getMinimizedCss('css/', 'header!center!footer')%
%content getMinimizedJs('js/', 'hello|world')%
+
%content getMinimizedJs('js/', 'hello!world')%
 
</source>
 
</source>
 
<p style="text-align: right">
 
<p style="text-align: right">
 
'''Листинг 4. Использование макросов в XSLT'''
 
'''Листинг 4. Использование макросов в XSLT'''
 
</p>
 
</p>
<source lang="XML">
+
<source lang="html4strict">
<xsl:value-of select="document(concat('udata://content/getMinimizedCss', 'css/', 'header|center|footer'))"  
+
<xsl:value-of select="document(concat('udata://content/getMinimizedCss/', '(css/site/)/', 'header!center!footer'))/udata"  
 
disable-output-escaping="yes" />
 
disable-output-escaping="yes" />
<xsl:value-of select="document(concat('udata://content/getMinimizedJs', 'js/', 'hello|world'))"  
+
<xsl:value-of select="document(concat('udata://content/getMinimizedJs/', '(js/site/)/', 'hello!world'))/udata"  
 
disable-output-escaping="yes" />
 
disable-output-escaping="yes" />
 
</source>
 
</source>
Строка 95: Строка 99:
 
<p>
 
<p>
 
Обращаем Ваше внимание на то, что имена файлов указываются без расширения. Макросы добавляют его автоматически.
 
Обращаем Ваше внимание на то, что имена файлов указываются без расширения. Макросы добавляют его автоматически.
 +
</p>
 +
<p>
 +
Если Вы используете макросы в XSLT, то при указании папки, где находятся файлы, путь необходимо оборачивать в круглые скобки (как это сделано в примере), иначе шаблонизатор считает, что Вы указываете несколько параметров, а не один, т.к. в XSLT параметры разделяются слешом.
 
</p>
 
</p>
 
</td>
 
</td>
 
</tr>
 
</tr>
 
</table>
 
</table>

Текущая версия на 11:51, 5 июня 2013

Актуально для версии 2.9

Прежде всего, давайте определимся, зачем нам сжимать CSS и JavaScript код? Сжатие CSS и JavaScript уменьшает время загрузки страницы. Если проект мал, то его применение не целесообразно. Однако, когда Вы работаете над большим проектом, сжатие может здорово уменьшить время загрузки страницы, поскольку удаляются комментарии из кода, код пишется в одну строку - удаляется "белое пространство" (пробелы и переносы строк). Имейте в виду, если вы действительно хотите увеличить производительность веб-сайта, после стадии разработки Вы должны пойти еще дальше и использовать GZIP сжатие и кэширование ваших файлов.

Чтобы не использовать сторонние сервисы или не производить сжатие вручную - напишем кастомные макросы, которые будут сжимать CSS и JavaScript код соответственно. Текст макросов разместим в файле "/classes/modules/content/__custom.php", после строки "//TODO: Write here your own macroses".

Листинг 1. Код макросов для сжатия CSS и JavaScript

/*
  @param String
    $path - директория расположения файлов
  @param String
    $files - список файлов для сжатия (символ "!" - разделитель)
 */
public function getMinimizedCss($path, $files) {
  $files = explode('!', $files);
  $content = '';
  foreach($files as $file) {
    $filename = $path.$file.'.css';
    if(file_exists($filename))
      $content .= file_get_contents($filename);
  }
    
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
  $content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);
    
  return '<style>'.$content.'</style>';
}

/*
  @param String
    $path - директория расположения файлов
  @param String
    $files - список файлов для сжатия (символ "!" - разделитель)
 */
public function getMinimizedJs($path, $files) {
  $files = explode('!', $files);
  $content = '';
  foreach($files as $file) {
    $filename = $path.$file.'.js';
    if(file_exists($filename))
      $content .= file_get_contents($filename);
  }
    
  $content = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $content);
  $content = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $content);
    
  return '<script type="text/javascript">'.$content.'</script>';
}

После добавления макросов, нам необходимо добавить разрешения для них. Для этого в той же папке создаётся файл "permissions.custom.php" со следующим содержанием:

Листинг 2. Права для макросов

<?php
  $permissions = Array(
    'content' => 
      Array('getMinimizedCss', 'getMinimizedJs')
  );
?>

На входе у макросов два параметра: директория расположения и список файлов. Разделителем в списке служит символ "!". Код из указанных файлов объединяется и затем проходит минимизацию, т.е. на выходе получается текст в одну строку, без символов табуляции, пробелов и комментариев.

Примеры использования макросов в TPL и XSLT:

Листинг 3. Использование макросов в TPL

%content getMinimizedCss('css/', 'header!center!footer')%
%content getMinimizedJs('js/', 'hello!world')%

Листинг 4. Использование макросов в XSLT

<xsl:value-of select="document(concat('udata://content/getMinimizedCss/', '(css/site/)/', 'header!center!footer'))/udata" 
disable-output-escaping="yes" />
<xsl:value-of select="document(concat('udata://content/getMinimizedJs/', '(js/site/)/', 'hello!world'))/udata" 
disable-output-escaping="yes" />

Важно.

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

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