Minification and bundling in SharePoint Online

W tym artykule opisano sposób używania technik minimalizowania i łączenia z usługą Web Essentials w celu zmniejszenia liczby żądań HTTP i skrócenia czasu ładowania stron w usłudze SharePoint Online.

Po dostosowaniu witryny internetowej można dodać do serwera dużą liczbę dodatkowych plików w celu obsługi dostosowywania. Dodanie dodatkowych skryptów JavaScript, CSS i obrazów zwiększa liczbę żądań HTTP do serwera, co z kolei zwiększa czas potrzebny na wyświetlenie strony internetowej. Jeśli masz wiele plików tego samego typu, możesz spakować te pliki, aby przyspieszyć pobieranie tych plików.

W przypadku plików JavaScript i CSS można również użyć podejścia o nazwie minification, w którym można zmniejszyć całkowity rozmiar plików przez usunięcie białych znaków i innych znaków, które nie są konieczne.

Minification and bundling JavaScript and CSS files with Web Essentials

Do tworzenia pakietów plików CSS i JavaScript można używać oprogramowania innych firm, takiego jak Web Essentials.

Ważne

Web Essentials to projekt oparty na społeczności innej firmy, typu open source. Oprogramowanie jest rozszerzeniem programu Visual Studio 2012 i Visual Studio 2013 i nie jest obsługiwane przez firmę Microsoft. Aby pobrać program Web Essentials, odwiedź witrynę internetową web essentials 2012.

Usługa Web Essentials oferuje dwie formy tworzenia pakietów:

  • .bundle: dla plików CSS i JavaScript
  • .sprite: dla obrazów (dostępne tylko w Visual Studio 2013)

Usługi Web Essentials można użyć, jeśli masz istniejącą funkcję z niektórymi elementami znakowania, do których odwołuje się strona wzorca niestandardowego, na przykład:

Zrzut ekranu przedstawiający element marki na niestandardowej stronie wzorcowej.

Aby utworzyć pakiet TE000127218 i CSS w usłudze Web Essentials

  1. W programie Visual Studio w Eksplorator rozwiązań wybierz pliki, które chcesz uwzględnić w pakiecie.

  2. Kliknij prawym przyciskiem myszy wybrane pliki, a następnie wybierz pozycję Web Essentials > Utwórz plik pakietu JavaScript z menu kontekstowego. Przykład:

    Zrzut ekranu przedstawiający opcje menu Web Essentials.

Wyświetlanie wyników tworzenia pakietów plików JavaScript i CSS

Podczas tworzenia pakietu JavaScript i CSS usługa Web Essentials tworzy plik XML o nazwie plik przepisu, który identyfikuje pliki JavaScript i CSS, a także inne informacje o konfiguracji:

Zrzut ekranu przedstawiający plik przepisów języka JavaScript i CSS.

Ponadto jeśli flaga minify jest ustawiona na wartość true w przepisie pakietowym, pliki zostaną zmniejszone i połączone ze sobą. Oznacza to, że utworzono nowe, zmifikowane wersje plików JavaScript, do których można odwoływać się na stronie wzorcowej.

Zrzut ekranu przedstawiający flagę minify ustawioną na true.

Po załadowaniu strony z witryny internetowej możesz użyć narzędzi deweloperskich z przeglądarki internetowej, takich jak Internet Explorer 11, aby wyświetlić liczbę żądań wysłanych do serwera i czas ładowania każdego pliku.

Poniższa ilustracja jest wynikiem ładowania plików JavaScript i CSS przed minyfikacją.

Zrzut ekranu przedstawiający 80 pobranych elementów.

Po połączeniu plików CSS i JavaScript liczba żądań spadła do 74, a każdy plik trwał tylko nieco dłużej niż oryginalne pliki do pobrania indywidualnie:

Zrzut ekranu przedstawiający pobrane 74 elementy.

Po utworzeniu pakietu plik pakietu JavaScript został znacznie zmniejszony z 815 KB do 365 KB:

Zrzut ekranu przedstawiający zmniejszony rozmiar pobierania.

Łączenie obrazów przez utworzenie sprite obrazu

Podobnie jak w przypadku pakietów plików JavaScript i CSS, możesz połączyć wiele małych ikon i innych typowych obrazów w większy arkusz sprite, a następnie użyć css do ujawnienia poszczególnych obrazów. Zamiast pobierać poszczególne obrazy, przeglądarka internetowa użytkownika pobiera arkusz sprite raz, a następnie buforuje go na komputerze lokalnym. Zwiększa to wydajność ładowania stron przez zmniejszenie liczby pobrań i rund na serwer internetowy.

Aby utworzyć sprite obrazu w składniku Web Essentials**

  1. W programie Visual Studio w Eksplorator rozwiązań wybierz pliki, które chcesz uwzględnić w pakiecie.

  2. Kliknij prawym przyciskiem myszy wybrane pliki, a następnie wybierz pozycję Web Essentials > Utwórz sprite obrazu z menu kontekstowego. Przykład:

    Zrzut ekranu przedstawiający sposób tworzenia sprite obrazu.

  3. Wybierz lokalizację, aby zapisać plik sprite. Plik sprite to plik XML opisujący ustawienia i pliki w sprite. Poniższe dane przedstawiają przykład pliku PNG sprite i odpowiadającego mu pliku XML sprite.

    Zrzut ekranu przedstawiający plik sprite.

    Zrzut ekranu przedstawiający plik XML sprite.