Мініфікація та об’єднання в SharePoint Online

У цій статті описано, як використовувати методи мініфікації та об’єднання за допомогою Web Essentials, щоб зменшити кількість запитів HTTP та час завантаження сторінок у SharePoint Online.

Налаштовуючи веб-сайт, ви можете додати на сервер велику кількість додаткових файлів для підтримки налаштування. Додаткові файли JavaScript, CSS і зображення збільшують кількість запитів HTTP на сервер, що у свою чергу збільшує час відображення веб-сторінки. Якщо у вас є кілька файлів однакового типу, ви можете об’єднати їх, щоб вони завантажувалися швидше.

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

Мініфікація та об’єднання файлів JavaScript і CSS за допомогою Web Essentials

Ви можете використовувати програмне забезпечення від сторонніх виробників, як-от Web Essentials, щоб об’єднати файли CSS і JavaScript.

Увага! : Web Essentials – це проект сторонніх постачальників, створений спільнотою, з відкритим вихідним кодом. Це програмне забезпечення є розширенням до Visual Studio 2012 і Visual Studio 2013 і не підтримується Microsoft. Щоб завантажити Web Essentials, відвідайте веб-сайт за адресою http://vswebessentials.com/download.

У Web Essentials передбачено дві форми об’єднання:

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

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

Ви можете використовувати Web Essentials за наявності компонента із символами бренду, посилання на які використовуються всередині спеціальної головної сторінки, як-от:

eNom-Настроювання-1-3

Створення набору TE000127218 і CSS у Web Essentials

  1. У Visual Studio в провіднику Solution Explorer виберіть файли, які потрібно додати до набору.

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

    Знімок екрана: параметри меню Web Essentials

Перегляд результатів об’єднання файлів JavaScript і CSS

Коли ви створюєте набір JavaScript і CSS, у Web Essentials створюється файл XML, який називається файлом рецепту, що визначає файли JavaScript і CSS, а також деякі інші відомості про конфігурацію:

Панель швидкого доступу у верхньому лівому куті (розташування за промовчанням)

Крім того, якщо в рецепті об’єднання позначка мініфікації має значення TRUE, файли зменшуються за розміром і об’єднуються. Це означає, що створено нові, зменшені версії файлів JavaScript, на які ви можете посилатися на головній сторінці.

Діалогове вікно "Додавання нового облікового запису", у якому зазначено, що не вдалося настроїти обліковий запис

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

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

Група ''Число'' на вкладці ''Основне''

Після об’єднання файлів CSS і JavaScript, кількість запитів знизилася до 74, а кожен файл завантажувався лише трішки довше, ніж вихідні файли:

Знімок екрана: завантажуються 74 елементи

Після об’єднання файл набору JavaScript суттєво зменшився з 815 КБ до 365 КБ:

Знімок екрана: зменшений розмір файлу завантаження

Об’єднання зображень створенням спрайту зображень

Подібно до того, як ви об’єднували файли JavaScript і CSS, ви також можете поєднати багато дрібних піктограм та інших поширених зображень у великий аркуш спрайту, а потім за допомогою CSS відкривати окремі зображення. Замість того щоб завантажувати кожне окреме зображення, браузер користувача один раз завантажить аркуш спрайту, а потім кешуватиме його на локальному комп’ютері. Унаслідок цього покращиться продуктивність завантаження сторінки, адже зменшиться кількість завантажень і звернень до веб-сервера.

Створення спрайту зображень у Web Essentials

  1. У Visual Studio в провіднику Solution Explorer виберіть файли, які потрібно додати до набору.

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

    Додайте більше сторінок до блокнотів.
  3. Виберіть розташування, у якому слід зберегти файл спрайту. Файл .sprite – це XML-файл, який описує параметри та файли у спрайті. На рисунках нижче показано приклад PNG-файлу спрайту та його відповідний XML-файл .sprite.

    Кілька зразків слайдів

    Знімок екрана: спрайт XML-файлу

Отримуйте нові функції раніше за інших
Приєднайтеся до оцінювачів Office

Ця інформація корисна?

Дякуємо за ваш відгук!

Дякуємо за відгук! Схоже, вам може стати в нагоді допомога одного з наших спеціалістів служби підтримки Office, з яким ми вас можемо з’єднати.

×