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

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

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

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

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

Публикации

Истории

Работа

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

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

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн