Статьи

ASP.NET 4.5 Поддержка связывания и минимизации

Март 12, 2019

Если вы серьезно относитесь к веб-разработке, вы стремитесь к быстрому веб-сайту. Ничто не сравнится с ощущением того, чтобы сидеть сложа руки и быстро просматривать отличный веб-сайт. Скорость имеет значение. Ваши клиенты ожидают этого. Если вы так не думаете, вы живете в другом мире, чем мой. В 2011 году в связи с растущей тенденцией потребителей совершать покупки онлайн, разработчикам приходится справляться с дополнительными устройствами, которые клиенты будут использовать для просмотра вашего сайта.

Существует много способов повысить производительность веб-сайта, но наибольшее влияние на данный момент имеет уменьшение количества HTTP-запросов. Каждый раз, когда вы ссылаетесь на изображение, файл CSS, файл JavaScript, видео, аудио или файл флэш-памяти, это добавляет дополнительный HTTP-запрос. Это время, которое можно использовать в другом месте, например, при приеме заказов от клиентов!

Одним из способов уменьшения количества HTTP-запросов является объединение файлов. Если у вас на веб-странице три таблицы стилей, это три отдельных HTTP-запроса. Объединение их в один файл означает, что есть только один HTTP-запрос.

Вы можете сделать еще один шаг вперед и добавить минификацию к этому процессу. Минификация — это процесс удаления всего пробела и комментариев из ваших файлов CSS и JavaScript.

Если вы знакомы с ASP.NET, пакетирование и минимизация всегда были задачей вашего процесса сборки. С появлением Visual Studio 2011 и ASP.NET 4.5 Microsoft добавила пакетирование и минимизацию из коробки, что, по моему мнению, уже давно. Этот процесс происходит во время выполнения и доступен для ASP.NET WinForms, MVC и веб-страниц.

Установка

Перед началом любой разработки вам необходимо установить ASP.NET 4.5. Самый простой способ сделать это через установщик веб-платформы. Все статьи ASP.NET 4.5, которые я создаю, разработаны в Visual Studio 2011 Developer Preview. Ниже приведены ссылки для начала.

Зачем это делать?

Ответ прост; уменьшить количество HTTP-запросов между клиентом и сервером. Результат — более быстрый веб-сайт. По умолчанию при создании нового веб-сайта MVC 4 на страницу загружаются следующие файлы JavaScript. 

  <script type = "text / javascript" src = "../../ Scripts / jquery-1.6.2.min.js"> </ script>
 <script type = "text / javascript" src = "../../ Scripts / jquery-ui-1.8.11.js"> </ script>
 <script type = "text / javascript" src = "../../ Scripts / modernizr-2.0.6-development-only.js"> </ script>
 <script type = "text / javascript" src = "../../ Scripts / AjaxLogin.js"> </ script>

Глядя на это через Chrome, вы можете увидеть 4 отдельных HTTP-запроса.

Мы можем сделать это лучше! После этого вы увидите один запрос.

Где магия?

Волшебство происходит во время выполнения в ASP.NET 4.5. Вместо того, чтобы ссылаться на каждый файл JavaScript по отдельности, вы можете заменить их все на это: 

  <script src = "scripts / js"> </ script>

И вы также можете связывать и минимизировать ваши CSS-файлы, добавив следующую строку кода: 

  <link href = "content / css" rel = "stylesheet" />

Это предполагает, что ваши файлы JavaScript находятся в папке, называемой скриптами , а таблицы стилей находятся в папке, называемой контентом . Конечно, это настраивается — как вы скоро увидите.

Прежде чем это сработает, вам нужно добавить одну строку кода в файл global.asax в событии запуска приложения . 

  Bundle.Bundles.EnableDefaultBundles ();

Потребность в этой строке кода будет удалена, когда выйдет ASP.NET 4.5. Когда веб-сайт работает, если ASP.NET обнаруживает любой из этих тегов, он автоматически объединяет и минимизирует каждый файл в данной папке и отправляет обратно один HTTP-ответ для файла JavaScript и один ответ для CSS. Из коробки вам больше ничего не нужно делать. Это приветствуется.

По умолчанию, когда файлы объединяются в ASP.NET, они располагаются в алфавитном порядке. Если есть известные библиотеки, такие как jQuery, jQuery UI и Dojo, они загружаются первыми. Для файлов CSS они также связаны в алфавитном порядке. Результаты можно увидеть на изображении ниже.

Пользовательские правила

Если стандартные правила связывания не дают вам необходимого контроля, вы всегда можете создать свои собственные правила связывания. Распространенной причиной для этого является группировка общих библиотек. Существует не так много случаев, когда вам нужно объединить все файлы JavaScript или CSS в один файл. Чтобы создать собственное правило, вы создаете новый объект Bundle . Затем вы добавляете файлы по отдельности или весь каталог. 

  var jSBundle = new Bundle ("~ / CustomJs", typeof (JsMinify));
 jSBundle.AddFile ( "~ / Сценарии / CustomFunction.js");
 jSBundle.AddFile ( "~ / Сценарии / JQuery-1.4.1-vsdoc.js");
 jSBundle.AddFile ( "~ / Сценарии / JQuery-1.4.1.js");
 jSBundle.AddFile ( "~ / Сценарии / JSONCreate.js");

Обратите внимание на тип JsMinify выше? Это объект по умолчанию, который связывает и минимизирует файлы JavaScript. Для CSS вы используете CssMinify, как в примере ниже. 

  var cssBundle = new Bundle ("~ / CustomCss", typeof (CssMinify));
 cssBundle.AddFile ( "~ / Содержание / Collection.css");
 cssBundle.AddFile ( "~ / Содержание / GlobalSupport.css");
 cssBundle.AddFile ( "~ / Содержание / MasterStyle.css");
 cssBundle.AddFile ( "~ / Стили / MenuStyle.css");

Чтобы ссылаться на эти пользовательские правила, вы должны указать название каждого пакета в своем HTML. 

  <script src = "CustomJs"> </ script> или <link href = "CustomCss" rel = "stylesheet" />

Пользовательская обработка

Если вам нужен полный контроль, вы можете переопределить стандартную поддержку связывания CSS и JavaScript и заменить ее собственным процессом. Простой способ сделать это — создать класс, который реализует интерфейс IBundleTransform . Следующий пример тривиален, но он демонстрирует, как это сделать. В этом примере авторские права компании вставляются в каждый файл JavaScript и устанавливается кэш файла по умолчанию. 

  открытый класс AddCopyrightToFiles: IBundleTransform
 {
     открытый процесс void (BundleResponse bundle)
     {
         StringBuilder sb = new StringBuilder ();
         sb.AppendLine ("// Авторские права вашей компании");
         sb.AppendLine (bundle.Content);
         bundle.Content = sb.ToString ();
         bundle.Cacheability = HttpCacheability.ServerAndNoCache;
     }
 }

И чтобы использовать этот пользовательский процесс, создайте новый Bundle и создайте ссылку на пользовательский класс. 

  BundleTable.Bundles.EnableDefaultBundles ();
 Bundle customBundle = new Bundle ("~ / CustomBundle", typeof (AddCopyrightToFiles));
 customBundle.AddFile ( "~ / Сценарии / CustomTypes.js");
 BundleTable.Bundles.Add (customBundle);

А в HTML просто укажите пакет по имени. 

  <script src = "CustomBundle"> </ script>

Распакуйте файлы JavaScript

Стоит отметить, что существуют сервисы, которые будут разделять ваши файлы или украшать их. Я люблю использовать jsbeautifier . Это сглаживает файл. Одним из самых больших недостатков связывания и минимизации является удобочитаемость.

31
Share: