Предыдущий ролик Следующий ролик  

Видео урок: Bundling and minification

Основы ASP.NET MVC 5

В этом видео мы рассмотрим некоторые функции, весьма полезные при работе с файлами JavaScript и CSS, которые доступны во всех проектах ASP.NET и которые мы будем применять в своем MVC-приложении. Начнем с открытия файла bootstrap.js из папки Scripts. Bootstrap - это популярный фреймворк, используемый для создания отзывчивых веб-страниц. Его мы будем изучать в следующем видео. Здесь мы видим выражения и функции JavaScript такими, какими их создал некий разработчик.

Прямо под этим файлом расположен файл bootstrap.min.js. Это так называемая "минимизированная" версия файла bootstrap.js. Эти файлы обладают схожей функциональностью за исключением того, что из файла bootstrap.min.js удалены пробелы и разрывы строк, кроме того, имена переменных в нем по возможности сокращаются до одной буквы. Выше в папке Content есть несколько файлов CSS. Если рассмотреть файл bootstrap.css, а затем bootstrap.min.css, то можно увидеть аналогичные изменения.

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

Каждый из них предназначен для отображения тегов link или script, соответствующих набору из одного или более одного файла, так называемой "связке". Параметр path - это виртуальный путь запроса для каждой связки. Эти связки задаются в классе BundleConfig, расположенном в папке App_Start. В этом классе есть метод RegisterBundles. Внутри метода вызывается несколько bundles.add, каждый из которых принимает экземпляр ScriptBundle или StyleBundle, а эти экземпляры в свою очередь инициализируются посредством виртуального пути связки.

Кроме того, для этого параметра используется метод Include, благодаря которому можно добавить несколько файлов JavaScript или CSS. Обратите внимание, что путь для связки jQuery мы задаем с помощью метки-заполнителя version. Это означает, что можно заменить библиотеку JQuery новой версией, при этом она все равно останется частью этой связки, поскольку при объединении файлов с целью связывания метка-заполнитель version выступает в качестве шаблона подстановки. В некоторых других путях содержится символ звездочки. Звездочка - это знак подстановки, который может размещаться в пути в начале или в конце сегмента имени файла.

При запуске приложения в режиме отладки будет создана связка, включающая файлы jquery.validate.js и jquery.validate.unobtrusive.js. Файлы, в названиях которых содержатся фразы "vsdoc" и "IntelliSense", или файлы, имеющие расширение .map, предназначены только для отладки, и веб-страницы в основном к таким файлам не обращаются. Связки мы применяем не только для того, чтобы группировать файлы и использовать знаки подстановки. Они позволяют с легкостью переключаться между полными и минимизированными версиями файлов, опираясь на то, в каком режиме запускается приложение - в режиме отладки или в режиме публикации.

В настоящий момент в секции System.web файла Web.config для атрибута debug элемента compilation задано значение "true". Если отключить этот режим и запустить приложение в режиме публикации, то связки также позволят нам соединить в одном файле несколько файлов, что приведет к сокращению общего количества выполняемых клиентом запросов. Такое поведение тоже можно переопределить в классе BundleConfig, установив значение "true" для BundleTable.EnableOptimizations, которое уже находится в шаблоне нашего проекта.

Давайте установим это свойство равным "false", чтобы отключить минимизацию и объединить файлы. Возьмем два примера из нашего файла макета. Первый пример - связка Styles, которая отображается с помощью виртуального пути content/css. Согласно настройкам нашего BundleConfig эта связка состоит из двух файлов: bootstrap.css и site.css. Если атрибут debug имеет значение "true", а для EnableOptimizations задано значение "false", то предполагается, что мы увидим два элемента link, соответствующих этим двум файлам CSS. И хотя у файла bootstrap.css есть минимизированная версия, мы ее не увидим, пока не установим свойство EnableOptimizations равным "true".

Давайте обратим внимание и на связку JQuery. В ней должен содержаться только один не минимизированный файл, в котором указано, какая версия jQuery содержится в этой папке. Давайте запустим этот сайт по клавише Ctrl+F5 и рассмотрим исходный код главной страницы. В самом низу есть файл jQuery из связки jQuery, а вверху - два элемента link, ссылающиеся на таблицы стилей из связки content/css.

Теперь давайте установим EnableOptimizations равным "true" и построим решение по клавише Ctrl+Shift+F5, или воспользовавшись контекстным меню в Обозревателе решений. После этого обновим страницу в Firefox и снова обратимся к исходному коду страницы. В этот раз мы видим только один элемент link, и если нажать на него, то можно увидеть, что это минимизированная версия. На самом деле поскольку у файла site.css не было минимизированной версии, такая версия все-таки была создана и объединена с минимизированной версией CSS-файла bootstraps.

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

Разработчики, впервые столкнувшиеся с этими инструментами, часто задают вопросы о сетях доставки контента (CDN). Например, если вы хотите получить скрипт jQuery не с локального сервера, а от Google, щелкните на этом параметре объекта ScriptBundle и нажмите Ctrl+Shift+Space, а затем рассмотрите вторую перегрузку, принимающую в качестве параметра путь CDN. Мы можем добавить сюда URL минимизированного скрипта jQuery от Google CDN. Еще нам придется установить для Bundle.UseCdn значение "true".

Если теперь построить решение по клавише Ctrl+Shift+B, обновить страницу и снова открыть ее исходный код, то внизу я должен увидеть Google, что я и вижу. Но эта версия все равно будет использоваться локально при отключенной оптимизации. Это видео познакомило вас с некоторыми весьма полезными инструментами для управления скриптами в файлах CSS. Они позволят вам сэкономить время и повысить производительность своего приложения.