Оптимизация контента. Сжатие и объединение файлов css и js с помощью библиотеки Combres. Часть II.

Сегодня в продолжение темы про оптимизацию пишу про библиотеку Combres.

Итак, Combres - это библиотека для объединения файлов стилей и скриптов, и сжатия итогового файла.

Подключается эта библиотека через менеджер NuGet:

После добавления библиотеки в файле web.config появятся необходимые ссылки на библиотеку. А в папке  App_Data появится файл combres.xml 


В этом файле и происходят все необходимые настройки. Ниже приведу пример файла:

<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
    <filters>
        <filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
    </filters>
    <resourceSets url="~/combres.axd"
                  defaultDuration="30"
                  defaultVersion="auto"
                  defaultDebugEnabled="false"
                  defaultIgnorePipelineWhenDebug="true"
                  localChangeMonitorInterval="30"
                  remoteChangeMonitorInterval="60"
                >
        <resourceSet name="siteCss" type="css">
            <resource path="~/content/styles/reset.css" />
            <resource path="~/content/styles/main.css" />
            <resource path="~/content/styles/header.css" />
            <resource path="~/content/styles/footer.css" />
        </resourceSet>
        <resourceSet name="siteJs" type="js">
            <resource path="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" mode="dynamic" />
            <resource path="~/content/scripts/scripts.js" />
        </resourceSet>
    </resourceSets>
</combres>

Объединение происходит в блоке <resourceSet/> где построчно перечисляются файлы для объединения. Атрибут name позволяет в дальнейшем обращаться к объединенному файлу на html странице. Объединять можно как статичные файлы на сервере, так и ссылки на библиотеки. Например, библиотеку jquery можно подключить используя Google Ajax API CDN. Для этого в атрибутах нужно указать mode="dynamic".


Остается вопрос как подключать эти блоки на html странице. Очень просто!
Есть несколько вариантов, но мне больше нравится этот(код приведен для MVC проекта с использование разметки Razor):

• Для css файлов: <link href="@Combres.WebExtensions.CombresUrl("siteCss")" rel="stylesheet" type="text/css" />

• Для js файлов: <script src="@Combres.WebExtensions.CombresUrl("siteJs")" type="text/javascript"></script>   

Когда мы откроем страницу в браузере и посмотрим содержимое, то увидим, что ссылка на итоговый файл выглядит следующим образом: yoursite.com/combres.axd/Main_Css/1405185587/(для файла стилей)


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


Недавно впервые столкнулся в CLR процедурами, поэтому следующий пост напишу о том, как создать простую CLR процедуру и добавить ее  на сервер.