Сжатие и комбинирование CSS / минификация js - лучше сделать во время выполнения или во время сборки?

Question

Мне нужно придумать решение для сжатия, версии (для целей кэширования) и потенциального объединения наших файлов JS и CSS, и я видел два доминирующих подхода:

1) Во время сборки: как задача MSBuild или аналогичная. 2) Динамически во время выполнения: как пользовательский HTTPHandler (мы, кстати, ASP.NET) для файлов .js и .css, что-то вроде этого заканчивается на ваших страницах:

<link rel="stylesheet" type="text/css" href="~/StyleSheetHandler.ashx?stylesheets=~stylesheets/master.css" /> 

Может ли кто-нибудь предоставить информацию о за и против каждого? Лично я не вижу смысла делать это динамически и тратить впустую циклы ЦП во время каждого запроса (я думаю, что вы будете делать только с работой в первый раз, а затем кешировать, но все же), но я чувствую, что мог что-то упустил?

Спасибо! Марк.

Answer 1

Я думаю, что хороший подход - это использовать разные стратегии для разных сред:

• нет сжатие для разработка (для разработки и отладки)
• время выполнения сжатие для тестовая среда (гибкая, не критичная для производительности)
• время сборки сжатие для подготовка и производство (проверено, критично к производительности)

У меня есть некоторый опыт использования YUI-компрессора для Javascript и CSS, и я понял (трудный путь), что тестирование минимизированных JS и CSS действительно очень важно.

Создание статичных минимизированных файлов JS и CSS как части вашей сборки для производства имеет следующие преимущества:

• они проверены
• статические файлы, могут обслуживаться без дополнительных затрат ASP.NET
• может быть закэшировано в браузере
• должен быть gzipped-вебсервер

Answer 2

Лучший способ - вообще не делать , поскольку все современные браузеры и серверы обрабатывают кодировку Gzip. Посмотрите на цифры:

• cfform.js - 21k
• cfform-minified.js - 12k
• cfform.js.gz - 4,2 К
• cfform-minified.js.gz - 2.2k

Это довольно большой файл JS с большим количеством ненужных пробелов, но в конечном уравнении вы сохранили колоссальные 2k! Не только это, но и благодаря кешированию это сохранение для каждого посетителя, а не для каждой страницы. Уууууу, теперь это стоило всех проблем, не так ли?

Вы бы сэкономили в 10 раз больше, обрезав ширину пикселя в верхней части своего баннера, и с 99% пользователей, пользующихся широкополосным доступом, вы сэкономили им около 1 миллисекунды времени загрузки. Разбей растяжки и шампанское!

Сжатие JS еще хуже, поскольку вы просто поразили своих клиентов бременем распаковки при загрузке КАЖДОЙ СТРАНИЦЫ. И сбережения после gzip столь же несчастны.

Серьезно. Дополнительная сложность и отладка не стоят того, если вы не нацелены на рынок мобильной связи (и даже если предполагается, что пользователи все еще используют CDMA, а не 3G) или не имеют миллиардов посещений в день. В противном случае просто не беспокойтесь.

Answer 3

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

Josh

Answer 4

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

На риск саморекламы вы можете прочитать Supercharging Javascript в PHP и Supercharging CSS в PHP , в котором изложены проблемы, подходы и лучшие практики. Примеры приведены на PHP, но сам код тривиален. Проблемы и принципы применимы к любой веб-платформе.

Answer 5

Я думаю, что вы должны сделать это во время выполнения, за исключением случаев, когда ваши файлы CSS и JS действительно огромны (более 1 МБ). Кэш браузера может быть принудительно настроен путем установки нескольких http заголовков , и когда вы хотите, чтобы ваше приложение принудительно перезагрузило компьютер на стороне клиента, просто измените параметр HTTP:

<link rel="stylesheet" type="text/css" href="~/StyleSheetHandler.ashx?stylesheets=~stylesheets/master.css&token=1" />

Вы можете изменить токен для принудительной перезагрузки CSS на стороне клиента.