Клиентская разработка

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core 7

При работе со скриптами и стилями в проектах веб-приложений в самых различных технологиях нередко используются различные средства автоматизации задач. Например, одной из распространенных задач, где применяются эти средства, являются бандлинг и минификация, которые позволяют минимизировать все используемые скрипты и стили, что позволит оптимизировать работу веб-приложения. В ASP.NET Core подобные задачи выполняются во время разработки.

Бандлинг и минификация

У нас в проекте может быть множество файлов скриптов, стилей. Однако чем больше разных скриптов и стилей подключено на веб-странице, тем больше запросов надо совершить браузеру, а серверу обработать. Что увеличивает нагрузку на сервер.

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

Для решения этих проблем применяются два механизма: бандлинг и минификация.

Бандлинг представляет соединение скриптов или стилей в один общий файл или бандл.

Минификация представляет сокращение содержимого скриптов или стилей.

Для проведения бандлинга и минификации в веб-разработке могут применяться самые различные утилиты, инструменты, например, Grunt, Gulp. Но рекомендуемым способом именно по отношению к ASP.NET Core является использование расширения Visual Studio - BundlerMinifier.

Для работы с BundlerMinifier нам надо загрузить и установить данное расширение по ссылке.

Конфигурация BundlerMinifier

Конфигурация BundlerMinifier задается с помощью файла bundleconfig.json. Он определяется в в следующем формате:

[
  {
	 // настройки 1-го бандла
  },
  {
    // настройки 2-го бандла
  },
  {
    // настройки n-го бандла
  }
]

Фактически файл определяет массив бандлов. Для настройки каждого отдельного бандла применяется ряд опций:

{
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
}

Параметр outputFileName задает путь выходного файла, который будет формироваться в результате объединения файлов.

Параметр inputFiles определяет через запятую набор файлов, которые будут объединяться. То есть в данном случае из файла "wwwroot/js/site.js" будет формироваться файл "wwwroot/js/site.min.js"

Дополнительный параметр minify указывает, будут ли минифицироваться включаемые в бандл файлы. Значение enabled: true включает минификацию. А значение "renameLocals": true позволяет сократить имена локальных переменных.

Последний параметр sourceMap указывает, надо ли генерировать файл-карту сопоставления исходного и выходного файлов.

Применение BundlerMinifier

Создадим новый проект ASP.NET Core по типу ASP.NET Core Web App (Model-View-Controller). Для работы с BundlerMinifier добавим в проект ряд дополнительных стилей и скриптов:

Допустим, в папке wwwroot/css будут два файла стилей: site.css и style2.css. А в папке wwwroot/js - site.js, site2.js, site3.js.

Также добавим в проект файл bundleconfig.json (если он отсутствует в проекте). Затем изменим его следующим образом:

[
  {
    "outputFileName": "wwwroot/css/bundle.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/site2.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.js",
    "inputFiles": [
      "wwwroot/js/site.js",
      "wwwroot/js/site2.js",
      "wwwroot/js/site3.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]

Также надо отметить, что нам необязательно исправлять файл вручную. Мы можем также выделить все нужные элементы, нажать на выделенный элемент правой кнопкой мыши и в контекстном меню выбрать пункт Bundler & Minifier -> Bundle and Minify Files:

После выбора этой опции в диалоговом окне надо будет ввести расположение для выходного файла, в который будет собираться бандл. По умолчанию дается имя bundle.js, как указано в файле bundleconfig.json, но его можно изменить.

После этого в папке с js-скриптами появятся новые файлы - полная и минимизированная версия файла bundle.js, который объединяется все скрипты.

Теперь перейдем в меню View -> Other Windows -> Task Runner Explorer. После этого внизу Visual Studio откроется окно Task Runner Explorer. В этом окне нажмем правой кнопкой мыши на пункт Update all files:

При открытии контекстого меню нам надо установить привязку с помощью пункта Binding. Здесь имеются четыре типа привязки:

• Before Build: бандлы будут собираться перед построением проекта

• After Build: бандлы будут собираться после построения проекта

• Clean: бандлы будут собираться при очистке проекта

• Project Open: бандлы будут собираться при открытии проекта

К примеру выберем опцию Before Build. И далее мы сможем использовать бандлы, подключив стандартным образом:

<link rel="stylesheet" href="~/css/bundle.min.css" />
<script src="~/js/bundle.min.js"></script>

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

Стоит отметить, что скрипты и стили не обязательно должны располагаться в каталоге wwwroot. Например, мы можем дополнительно определить в проекте специальную папку, например, назовем ее static, и расположить их в этой папке. А бандлы формировать и подключать из wwwroot:

В этом случае мы могли бы настроить файл bundleconfig.json следующим образом:

[
  {
    "outputFileName": "wwwroot/css/bundle.css",
    "inputFiles": [
      "static/css/*.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.js",
    "inputFiles": [
      "static/js/*.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    }
  }
]