Pull to refresh

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

Reading time2 min
Views6K

Доброго времени суток!

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

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

Если вы будете использовать 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.

Ссылка на GitHub
Tags:
Hubs:
Total votes 41: ↑36 and ↓5+31
Comments30

Articles