Минификация и объединение в SharePoint Online

В этой статье объясняется, как использовать методы минификации и объединения в Web Essentials, чтобы сократить количество HTTP-запросов и уменьшить время загрузки страниц SharePoint Online.

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

Для файлов JavaScript и CSS также можно использовать метод минификации, при котором общий размер файлов уменьшается за счет удаления пробелов и других необязательных символов.

Минификация и объединение файлов JavaScript и CSS с помощью Web Essentials

Для объединения файлов CSS и JavaScript можно использовать стороннее программное обеспечение, например Web Essentials.

Важно : Web Essentials — это независимый коллективный проект с открытым исходным кодом. Это расширение Visual Studio 2012 и Visual Studio 2013 не поддерживается корпорацией Майкрософт. Скачать Web Essentials можно на веб-сайте http://vswebessentials.com/download.

В Web Essentials предлагаются два вида объединения:

  • .bundle: для файлов CSS и JavaScript;

  • .sprite: для изображений (доступно только в Visual Studio 2013).

Вы можете использовать Web Essentials, если у вас имеются элементы фирменной символики, ссылки на которые содержит настраиваемая главная страница, например:

Снимок экрана: элемент фирменной символики на настраиваемой главной странице

Объединение файлов TE000127218 и CSS в Web Essentials

  1. В обозревателе решений Visual Studio выделите файлы, которые хотите включить в объединение.

  2. Щелкните правой кнопкой мыши выделенные файлы и в контекстном меню выберите Web Essentials > Create JavaScript bundle file (Создать файл пакета JavaScript). Например:

    Снимок экрана: параметры меню Web Essentials

Просмотр результатов объединения файлов JavaScript и CSS

При объединении JavaScript и CSS в Web Essentials создается XML-файл, или файл инструкций, в котором определяются файлы JavaScript и CSS, а также некоторые сведения о конфигурации.

Снимок экрана: файл рецептов JavaScript и CSS

Кроме того, если в файле инструкций для флага minify установлено значение true, размер файлов при объединении уменьшается. Это значит, что создаются новые, минифицированные версии файлов JavaScript, на которые можно ссылаться на главной странице.

Снимок экрана: для флага minify задано значение true

При загрузке страницы с вашего веб-сайта вы можете с помощью средств разработчика, представленных в веб-браузере (например, в Internet Explorer 11), посмотреть количество отправленных серверу запросов и время загрузки каждого файла.

На приведенном ниже рисунке показан результат загрузки файлов JavaScript и CSS до минификации.

Снимок экрана: загружается 80 элементов

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

Снимок экрана: загружается 74 элемента

После объединения размер пакетного файла JavaScript заметно уменьшается: с 815 до 365 КБ.

Снимок экрана: показан уменьшенный размер для скачивания

Объединение изображений путем создания спрайта

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

Создание спрайта изображений в Web Essentials

  1. В обозревателе решений Visual Studio выделите файлы, которые хотите включить в объединение.

  2. Щелкните правой кнопкой мыши выделенные файлы и в контекстном меню выберите Web Essentials > Create image sprite (Создать спрайт изображений). Например:

    Снимок экрана: создание спрайта изображений
  3. Выберите расположение для сохранения файла спрайта. Файл с расширением .sprite — это XML-файл, в котором описаны настройки и файлы, входящие в спрайт. На приведенном ниже рисунке показан пример PNG-файла спрайта и соответствующего XML-файла в формате .sprite.

    Снимок экрана: файл спрайта

    Снимок экрана: XML-файл спрайта

Совершенствование навыков
Перейти к обучению
Первоочередный доступ к новым возможностям
Присоединиться к программе предварительной оценки Office

Были ли сведения полезными?

Спасибо за ваш отзыв!

Благодарим за отзыв! Возможно, будет полезно связать вас с одним из наших специалистов службы поддержки Office.

×