Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров6K

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

Давно думал написать пост на эту тему, но решился только после этого топика про объединение 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
Теги:
Хабы:
Всего голосов 41: ↑36 и ↓5+31
Комментарии30

Публикации

Истории

Работа

.NET разработчик
63 вакансии

Ближайшие события

2 – 18 декабря
Yandex DataLens Festival 2024
МоскваОнлайн
11 – 13 декабря
Международная конференция по AI/ML «AI Journey»
МоскваОнлайн
25 – 26 апреля
IT-конференция Merge Tatarstan 2025
Казань