JavaScript combining с помощью ScriptManager контрола

Почти любое современное web-приложение использует различные javascript-библиотеки для манипулирования данными на клиентской стороне. Будь то пользовательский файл, призванный помочь в управлении DOM-моделью на клиенте, будь то сторонняя библиотека (jQuery, Dojo, PrototypeJS и др.), будь то встроенные механизмы VisualStudio при генерации исходного html кода. Каждая библиотека – это отдельный файл на сервере, для загрузки которого браузер использует отдельный запрос. Если же на Вашей странице есть ссылки на несколько .js файлов, то загрузка по отдельности каждого файла крайне неэффективно скажется в целом на производительности web-приложения, особенно если построение DOM-модели вынуждено прервано до момента окончательной подгрузки файлов. Для пользователя данная страница будет выглядеть как частично загруженная и в подвисшем состоянии. Уж совсем некрасиво.

Допустим в нашем ASP.NET приложении мы имеем 3 различных javascript файла: jscript1.js, jscript2.js, jscript3.js, в которых нам необходимы 3 функции:

function Execute1() {
    alert("Execute 1");
}

function Execute2() {
    alert("Execute 2");
}

function Execute3() {
    alert("Execute 3");
}

В ASP.NET для загрузки сторонних скриптов можно использовать привычный нам ScriptManager контрол.

<asp:ScriptManager runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Scripts/JScript1.js" />
        <asp:ScriptReference Path="~/Scripts/JScript2.js" />
        <asp:ScriptReference Path="~/Scripts/JScript3.js" />
    </Scripts>
</asp:ScriptManager>

Хорошо. Загрузим данную страницу и проанализируем ответ сервера на запрос к нашей странице с помощью Developer Tools в IE.

Как видно, при запросе к серверу для получения практически ничего не делающей .aspx страницы в ответ мы получаем 7! файлов: сама .aspx страница (отмечена зеленым), 3 сгенерированные студией при компиляции проекта библиотеки и 3 пользовательских .js файла.

Если же проверить степень оптимизации нашей страницы для поисковиков с помощью утилиты YSlow (разширение для FireFox), то увидим что даже пустая страница  без контента не на 100% оптимизирована. Основная проблема – много HTTP-запросов для построения контента.

Мощность ScriptManager контрола в том, что множество сложных задач он позволяет делать в несколько строчек кода. Если раньше для объединения множества .js файлов необходимо было писать свои custom решения либо использовать сторонние библиотеки, такие как MbCompression, использовать сторонние модули, такие как ScriptCompressionModule и т.д., то сейчас достаточно внести необходимые для combine-инга скрипты в блок <CompositeScript> контрола:

<asp:ScriptManager runat="server">
    <CompositeScript>
        <Scripts>
            <asp:ScriptReference Path="~/Scripts/JScript1.js" />
            <asp:ScriptReference Path="~/Scripts/JScript2.js" />
            <asp:ScriptReference Path="~/Scripts/JScript3.js" />
        </Scripts>
    </CompositeScript>
</asp:ScriptManager>

Проверим ответы сервера и качество оптимизации

Как видно количество закачанных файлов уменьшилось до 5 (3 файла были объеденены в один) и общая оценка оптимизации сменилась с B на A. А общий коэфициент оптимизации вырос с 91 до 95. Тем самым, с помощью буквально нескольких строчек мы решили довольно сложную задачу, возникающую уже в стадии SEO-оптимизации проекта – объединение множества скриптов в один.