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

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

После большого поиска и оптимизации сайтов я действительно рекомендую использовать этот скрипт для файлов 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.

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

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

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

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

Если ваша цель – сделать ваш 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, это ';' где-то отсутствует?

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

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

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

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

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

Редактировать : post by @Ant прояснил это для меня.

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

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

Вам нужно system(); это

$ java -jar yuicompressor-xyzjar

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

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

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

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

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

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

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

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

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

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

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

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

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

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