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