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

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

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

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

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

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

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

Для проведения бандлинга и минификации в веб-разработке могут применяться самые различные утилиты и инструменты. Однако если мы работаем в Visual Studio, то нам доступен такой инструмент как Bundler & Minifier, который представляет расширение для Visual Studio.

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

Либо можно в Visual Studio через пункт меню Extensions -> Manage Extensions и затем в окне управления расширениями найти нужное расширение и установить

Для установки расширения необходимо перезапустить Visual Studio.

Конфигурация 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. Для работы с BundlerMinifier определим в проекте папку wwwroot и затем добавим в нее ряд стилей и скриптов:

Допустим, в папке 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
    }
  }
]

После сохранения этого файла Visual Studio автоматически создаст четыре новых файла: в папке с js-скриптами появятся полная и минимизированная версия файла bundle.js, который объединяет все скрипты, а в папке со стилями css будет создан файл bundle.css, а также его минимизированная версия - bundle.min.css

И при каждом изменении и повторном сохранении файла Visual Studio также будет генерировать общую и минимизированную версию файлов.

Настройка и запуск бандлинга и миницикации

Мы можем не полагаться на Visual Studio и непосредственно запланировать создание бандлов и их минимизированных версий. Для этого нажмем правой кнопкой мыши на файл bundleconfig.json и в контекстном меню выберем пункт Task Runner Explorer

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

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

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

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

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

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

В любой момент мы можем отменить подобную привязку.

Настройка каталога

Стоит отметить, что скрипты и стили не обязательно должны располагаться в каталоге 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
    }
  }
]

Автоматический бандлинг и минификация

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

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