Объединение и сжатие CSS и JS файлов в ASP.NET веб-приложений

09.11.2011 17:05

Давно думал написать пост на эту тему, но решился только после этого топика про объединение JavaScript файлов.
Для ASP.NET сайтов существует отличная библиотека SquishIt - она позволяет объединять как css файлы в один, так и JavaScript файлы. Я не буду детально расписывать преимущества объединения так как о них было уже сказано в статье выше и других, основное это уменьшение количество запросов к серверу.

Эта библиотека доступна в качестве пакета Nuget.
Вам доступно 2 варианта:
WebForms
MVC

Если вы будете использовать ASP.NET MVC необходимо внести изменения в файл "Views/Web.config",
В разделе "system.web.webPages.razor", изменить "pageBaseType" атрибут в секции "pages" на "SquishIt.Contrib.Mvc.SquishItBasePage".

<system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="SquishIt.Contrib.Mvc.SquishItBasePage">
      <namespaces>
<add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Routing" />
      </namespaces>
    </pages>
</system.web.webPages.razor>

А теперь можно собственно и объединить слонов с мухами css и js файлы.

@{
    SquishIt.Css.Add("~/Content/Site.css");
    SquishIt.Css.Add("~/Content/themes/base/jquery-ui.css");
    SquishIt.Css.Add("~/Content/reset.css");

    SquishIt.JavaScript.Add("~/Scripts/jquery-1.4.4.js");
    SquishIt.JavaScript.Add("~/Scripts/MicrosoftAjax.debug.js");

}
<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>

      @SquishIt.Css.Render("~/Content/combined_#.css")
      @SquishIt.JavaScript.Render("~/Scripts/combined_#.js")
</head>

И также изменить debug на false в "Web.config"

Готово. В результате мы получим следующее:

<head>

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

Если вы будете использовать WebForms to код будет следующий:
<%@ Import Namespace="SquishIt.Framework" %>

<%= Bundle.JavaScript()
        .Add("~/Scripts/jquery-1.4.2.js")
        .Add("~/Scripts/jquery-ui-1.8.1.js")
        .Render("~/Scripts/combined_#.js")
%>

В результате мы в течении 10 минут можем значительно ускорить загрузку web сайта с помощью библиотеки SquishIt.

Объединение и сжатие CSS и JS файлов в ASP.NET веб-приложений

Ссылки по теме

О нас

Помощь

Способы оплаты

Проекты Interface Ltd.