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

Question

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

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

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

Answer 1

Согласно JavaScript Compression Rater , наиболее эффективным инструментом является YUI Compressor или JSMin .

Answer 2

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

Answer 3

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

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

Answer 4

Я написал свой собственный менеджер для этого. Он использует закрывающий компилятор Google и сжимает файлы только при необходимости в режиме выпуска. Проверьте это:

http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx

Спасибо

Гвидо Тапиа

Answer 5

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

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

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

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

Пара регулярных выражений, и я быстро получаю «производственную» версию с минимизированными файлами.

Answer 6

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

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

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

Answer 7

Или вы можете просто настроить свой HTTP-сервер на сжатие GZIP всех текстовых документов.

Answer 8

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

Некоторые заметки о YUI Compressor

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

Answer 9

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

http://www.w3compiler.com/

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

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

Answer 10

Следуя ссылке yahoo blog , я нашел одно реальное решение - " Сделайте ваши страницы быстрее, загружая, комбинируя и сжимая файлы javascript и css " Нильса Линхира.