Как организовать мини-сбор и упаковку файлов css и js для ускорения работы сайта?

Я делаю оптимизацию скорости для своего веб-приложения. И я нашел некоторые практики для этого. Например, "Лучшие практики для ускорения вашего веб-сайта" от Yahoo. Среди них:

  • Минимизировать JavaScript и CSS.
  • Свернуть число запросов HTTP, объединив несколько файлов (css, js) в один.

Мой вопрос в том, какую инфраструктуру, инструменты и процесс строительства вы используете или можете рекомендовать для выполнения этого?

Ответы

Ответ 2

Вы можете использовать YUI Compressor.

Он может сжимать JavaScript, а также CSS. Просто запустите его для всех ваших файлов, а затем объедините их в один пакет. Вы можете сделать это вручную, написать Makefile или использовать некоторый script для сжатия "точно в срок" в веб-запросе, хотя вам может понадобиться кэшировать полученный файл.

Ответ 3

Советы Yahoo отличные. Я использую gomez, чтобы проверить результаты усилий по оптимизации. Минирование - хороший шаг. Я обнаружил, что большие удары обычно могут быть достигнуты путем корректировки способа компоновки страниц (в частности, для уменьшения количества изображений, которые вырезали на маленькие кусочки, чтобы уменьшить количество запросов). Во всяком случае, этот yahoo blog дает довольно хорошее изложение инструментов минимизации. Я, как правило, держаться подальше от обфускации, если нет веской причины, выходящей за относительно небольшой удар по производительности. Фактические шаги по установке и использованию инструмента минимизации относительно просты.

Ответ 4

Или вы можете просто настроить HTTP-сервер для GZIP, сжимающего все текстовые документы.

Ответ 5

Я делаю ASP.NET, поэтому я использую CruiseControl.NET с NAnt для моего процесса сборки. Часть этого процесса сборки сжимается с помощью YUICompressor, который по моему опыту является лучшим компрессором там.

Если вы не делаете ASP.NET, все еще остается оригинальный CruiseControl с Ant, который вы можете использовать в той же емкости.

Причина, по которой я нахожу эту улучшенную настройку, состоит в том, что: а) все утомительные вещи автоматизированы и б) если вы тестируете свою собственную машину, вам не нужно отлаживать одну супер длинную строку JS:)

Ответ 6

Я включил минимизацию в процесс развертывания. Я делаю это в perl с пакетами JavaScript:: Minifier и CSS:: Minifier.

Во время моего развития я хочу сохранить расширение script. Я поместил некоторые комментарии в свой HTML, чтобы мой script знал, какие файлы нужно поместить и минимизировать:

<!--- MinifyJS[js/minified-1.js] -->
<script src="..."></script>
<script src="..."></script>
<!-- end[js/minified-1.js] -->

<!--- MinifyCSS[css/minified-1.css] -->
<link ...>

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

Ответ 8

Большой поклонник Dean Edwards /packer/ сам - поставляется в самых разных вариантах.

Ответ 10

Для сжатия всего, прежде чем загружать его в Интернет, эта программа отлично подходит как для CSS/JS/HTML:

http://www.w3compiler.com/

Можно даже выбрать области, которые нельзя сжать, поскольку не все коды MVC в вашей разметке поддерживают сжатие.

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

Ответ 11

Я нашел Minify наиболее полезным для моих проектов PHP. Очень проста в использовании, просто экономит время, настраивая минимизацию, сжатие и кеширование файлов CSS и JS вручную. Также имеет аккуратную группировку.

Некоторые примечания о YUI Compressor

  • Компрессор YUI генерирует без разрывов строк, а Minify имеет некоторые.
  • Будьте осторожны, если у вас есть экранированные строки. Я узнал, что YUI Compressor их отменяет. Итак, строки типа "\" становятся "".