Минимизиране и групиране в 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.

Уеб 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 > Създаване на 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 > Създаване на пакетно изображение от контекстното меню. Например:

    Добавяне на повече страници към вашия бележник.
  3. Изберете местоположение за записване на пакетния файл. .sprite файлът е XML файл, който описва настройките и файлове в пакета. Следващите фигури показват пример за пакетен PNG файл и съответния му .sprite XML файл.

    Няколко образеца за слайд

    Екранна снимка на XML файл със поредицата от изображения

Разширете уменията си
Преглед на обучението
Получавайте първи новите функции
Присъединете се към участниците в Office Insider

Беше ли полезна тази информация?

Благодарим ви за обратната връзка!

Благодарим ви за вашата обратна връзка. Изглежда, че ще бъде полезно да ви свържем с един от нашите агенти по поддръжката на Office.

×