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

Источник: habrahabr

Давно думал написать пост на эту тему, но решился только после этого топика про объединение 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"

 <compilation debug="false" targetFramework="4.0">

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

<head>

    <title>Home Page</title>
 
      <link rel="stylesheet" type="text/css" href="/Content/combined.css?r=531A7BFA4E917B223909817F07467EDB" />
      <script type="text/javascript" src="/Scripts/combined.js?r=6DB45040EF233910B7E1F986316FF2FE"></script>
</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.


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=27262