Как минимизировать JS или CSS на лету

Как минимизировать JS и CSS на лету/время выполнения, так что я могу сохранить исходную структуру кода на своих серверах, если ее минимизировать во время выполнения/fly.

Ответ 1

После большого поиска и оптимизации сайтов я действительно рекомендую использовать этот script для файлов CSS:

<style>
<?php
     $cssFiles = array(
      "style.css",
      "style2.css"
    );

    $buffer = "";
    foreach ($cssFiles as $cssFile) {
      $buffer .= file_get_contents($cssFile);
    }
    $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
    $buffer = str_replace(': ', ':', $buffer);
    $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
    echo($buffer);
?>
</style>

Он сжимает все файлы css в один и проходит через html, уменьшая количество дополнительных запросов до нуля. Вы также можете создать свой собственный файл compress.css, если вы предпочитаете это, а не вставляете стили в html.

Ответ 2

Я думаю, что ваш вопрос должен быть на самом деле: как я могу надежно и постоянно обновлять свои серверы? Вам нужно автоматическое развертывание script. Лично Я предпочитаю Fabric, но есть и другие инструменты.

Автоматическое развертывание script позволит вам запустить единую команду, которая перейдет на живые серверы и обновит исходный код, запустит все шаги развертывания (например, уменьшит javascript) и перезапустит веб-сервер.

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

Существует ряд программ, которые выполняют минимизацию, еще не упомянутый JSMin.

Ответ 3

Если ваша цель - сделать ваш JavaScript немного менее удобочитаемым и сделать это во время выполнения, вы можете сохранить его очень, очень, просто. Имея всего три строки кода, вы можете пройти долгий путь к полной минимизации за несколько миллисекунд.

// make it into one long line
$code = str_replace(array("\n","\r"),'',$code);
// replace all multiple spaces by one space
$code = preg_replace('!\s+!',' ',$code);
// replace some unneeded spaces, modify as needed
$code = str_replace(array(' {',' }','{ ','; '),array('{','}','{',';'),$code);

Это не делает никакой проверки синтаксиса вообще. После этого код может стать недействительным. Проверьте конец строк в JS, это ';' где-то отсутствует?

Ответ 4

HTML5 Boilerplate поставляется с удобной конструкцией script, которая сжимает JS, CSS, изображения и многое другое. Проверьте это!

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

Ответ 5

Если я могу говорить так свободно,

Для минимизации JS/CSS файла в качестве цели будет выполняться более быстрое анализирование (а также использование меньшего дискового пространства). Минимизируя его во время выполнения, это преимущество будет полностью потеряно.

Возможно, я ошибаюсь в вашей конечной цели, но сначала это приходит мне на ум.

Изменить: post by @ Ant уточнил это для меня.

Ответ 6

Assetic - это хороший проект, который помогает в организации ресурсов, таких как CSS и Javascript, включая минификацию. См. здесь для введения.

В целом минимизация времени выполнения всегда должна сочетаться с надежным кэшированием на стороне сервера и использованием кэшей клиента и прокси в пути к браузеру.

Ответ 7

Вам нужно system(); this

$java -jar yuicompressor-x.y.z.jar

http://developer.yahoo.com/yui/compressor/

Ответ 8

Если у вас есть полный контроль над вашей конфигурацией Apache/Ngnix, отличным вариантом (в общем случае) будет включение PageSpeed, в вашем случае с

js-minify filter https://developers.google.com/speed/pagespeed/module/filter-js-minify
css-rewrite filter https://developers.google.com/speed/pagespeed/module/filter-css-rewrite

Ответ 9

Это именно то, что делает WebUtilities (для J2EE). Вот ссылка.

http://code.google.com/p/webutilities/

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

Подавать несколько файлов JS или CSS по одному запросу
Добавить заголовок Expires для файлов JS, CSS и изображений, которые будут кэшироваться браузером
Минимизировать JS, файлы CSS на лету
Свернуть блоки Inline CSS и JS
Добавить кодировку символов в ваш ответ
Содержимое сжатого сервера (gzip/compress/deflate)
Кэш-ответы для ускорения загрузки, избегая повторной обработки.

Пожалуйста, посмотрите, если вы считаете это интересным.

Ответ 10

Я сомневаюсь, что это увлечение миниатюрами действительно делает большую разницу, если JS отправляется с сжатием zlib.

Во-первых, простое пространство сжимается очень хорошо, поэтому уменьшенный размер файла, который является результатом минимизации, вероятно, является лишь серьезной проблемой для больших библиотек, таких как jQuery (которые, вероятно, должны быть отправлены из CDN, если вам не нужна взломанная версия).

Seconfly, JS обычно кэшируется клиентом, поэтому, если вы не используете много разных сценариев на разных страницах, большинство загрузок страниц не будут иметь никакого значения.

Проблемы с минимизацией и почему я этого не делаю (кроме таких вещей, как jQuery): A) Он удаляет комментарии, поэтому, если вы не добавите их повторно, такие вещи, как уведомления об авторских правах, будут потеряны. Это может привести к нарушению лицензии, поскольку даже многие лицензии OSS требуют сохранения авторских прав.

B) Когда есть проблема, приятно видеть фактический код, на котором работает сервер, на случай, если он отличается от вашей рабочей копии. Минимизированный код в этом отношении не подходит.

Мое личное мнение - злиб сжимать на лету, да. minify - только для действительно больших файлов.

Анализ производительности JS в интерпретаторе - возможно, если браузер работает на Apple Performa с 32 МБ ОЗУ. Я не покупаю, что это отличает реальный мир от большинства сценариев. Страницы медленные, как правило, медленные из-за слишком большого неэффективного кода, выполняемого в одно и то же время, или слишком много запросов на перегруженные серверы. (IE действительно ли вам нужно проверить доступность имени пользователя при вводе каждой буквы? Не можете ли вы проверить, когда я перехожу в другое поле или когда я нажимаю submit???;)