Minifikacja i tworzenie pakietów w usłudze SharePoint Online

W tym artykule opisano, jak za pomocą technik minifikacji i tworzenia pakietów oraz oprogramowania Web Essentials zmniejszyć liczbę żądań HTTP i skrócić czas ładowania stron w usłudze SharePoint Online.

Dostosowywanie witryny internetowej może zakończyć się dodaniem do serwera dużej liczby dodatkowych plików obsługujących to dostosowanie. Dodanie dodatkowego skryptu JavaScript, arkusza CSS i obrazów zwiększa liczbę żądań HTTP wysyłanych do serwera, co z kolei powoduje wydłużenie czasu potrzebnego do wyświetlenia strony internetowej. Jeśli masz wiele plików tego samego typu, możesz utworzyć z nich pakiet, aby przyspieszyć ich pobieranie.

W przypadku plików JavaScript i CSS możesz również skorzystać z metody nazywanej minifikacją, która polega na zmniejszeniu całkowitego rozmiaru plików przez usunięcie odstępów i innych niepotrzebnych znaków.

Minifikacja i tworzenie pakietu plików JavaScript i CSS za pomocą oprogramowania Web Essentials

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

Ważne : Web Essentials to zewnętrzny projekt społecznościowy typu Open Source. Oprogramowanie jest rozszerzeniem programów Visual Studio 2012 i Visual Studio 2013, które nie jest obsługiwane przez firmę Microsoft. Aby pobrać oprogramowanie Web Essentials, przejdź do witryny internetowej http://vswebessentials.com/download.

Oprogramowanie Web Essentials umożliwia tworzenie pakietów dwoma sposobami:

  • .bundle: dotyczy plików CSS i JavaScript

  • .sprite: dotyczy obrazów (dostępne tylko w programie Visual Studio 2013)

Oprogramowania Web Essentials możesz używać, gdy masz funkcję z pewnymi elementami znakowania, do których istnieją odwołania w obrębie niestandardowej strony wzorcowej, na przykład:

Zrzut ekranu przedstawiający element marki na niestandardowej stronie wzorcowej

Aby utworzyć pakiet TE000127218 i CSS w oprogramowaniu Web Essentials

  1. W programie Visual Studio, w Eksploratorze rozwiązań zaznacz pliki, które mają zostać uwzględnione w pakiecie.

  2. Kliknij prawym przyciskiem myszy zaznaczone pliki, a następnie z menu kontekstowego wybierz pozycję Web Essentials > Create JavaScript bundle file. Na przykład:

    Zrzut ekranu przedstawiający opcje menu oprogramowania Web Essentials

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

Po utworzeniu pakietu JavaScript i CSS oprogramowanie Web Essentials tworzy plik XML nazywany plikiem przepisu, który określa pliki JavaScript i CSS, a także pewne dodatkowe informacje o konfiguracji:

Zrzut ekranu przedstawiający plik przepisu JavaScript i CSS

Ponadto jeśli flaga minifikacji w przepisie tworzenia pakietu ma wartość „true”, pliki są zmniejszane i łączone razem w pakiet. Oznacza to utworzenie nowych, zminifikowanych wersji plików JavaScript, do których można odwoływać się na stronie wzorcowej.

Zrzut ekranu przedstawiający flagę minifikacji z ustawioną wartością „true”

Podczas ładowania strony z witryny internetowej możesz za pomocą narzędzi dla deweloperów z przeglądarki internetowej, takich jak Internet Explorer 11, sprawdzić liczbę żądań wysłanych do serwera oraz czas ładowania każdego pliku.

Poniższa ilustracja przedstawia wynik ładowania plików JavaScript i CSS przed minifikacją.

Zrzut ekranu przedstawiający pobieranie 80 elementów

Po utworzeniu pakietu plików CSS i JavaScript liczba żądań spadła do 74, a czas pobierania poszczególnych plików był tylko nieznacznie dłuższy niż plików oryginalnych:

Zrzut ekranu przedstawiający pobieranie 74 elementów

Po utworzeniu pakietu rozmiar pliku pakietu JavaScript znacznie się zmniejszył (z 815 KB do 365 KB):

Zrzut ekranu przedstawiający zmniejszony rozmiar pobierania

Tworzenie pakietu obrazów za pomocą obiektu obrazu

Podobnie jak w przypadku tworzenia pakietu plików JavaScript i CSS możesz połączyć wiele małych ikon i innych typowych obrazów w większy arkusz obiektów, a następnie za pomocą arkusza CSS wyświetlić poszczególne obrazy. Zamiast pobierania poszczególnych obrazów, przeglądarka internetowa użytkownika jednokrotnie pobiera arkusz obiektów, a następnie buforuje go na komputerze lokalnym. Zwiększa to wydajność ładowania strony przez zmniejszenie liczby pobrań i odwołań do serwera sieci Web.

Aby utworzyć obiekt obrazu w oprogramowaniu Web Essentials

  1. W programie Visual Studio, w Eksploratorze rozwiązań zaznacz pliki, które mają zostać uwzględnione w pakiecie.

  2. Kliknij prawym przyciskiem myszy zaznaczone pliki, a następnie z menu kontekstowego wybierz pozycję Web Essentials > Create image sprite. Na przykład:

    Zrzut ekranu przedstawiający sposób tworzenia obiektu obrazu
  3. Wybierz lokalizację, w której zostanie zapisany plik obiektu. Plik sprite jest plikiem XML, który opisuje ustawienia i pliki w obiekcie. Na poniższych ilustracjach pokazano przykładowy plik PNG obiektu i odpowiadający mu plik XML sprite.

    Zrzut ekranu przedstawiający plik obiektu

    Zrzut ekranu przedstawiający plik XML obiektu

Rozwijaj swoje umiejętności
Poznaj szkolenia
Uzyskuj nowe funkcje w pierwszej kolejności
Dołącz do niejawnych testerów pakietu Office

Czy te informacje były pomocne?

Dziękujemy za opinię!

Dziękujemy za opinię! Wygląda na to, że połączenie Cię z jednym z naszych agentów pomocy technicznej pakietu Office może być pomocne.

×