Łączenie i minimalizowanie zasobów statycznych w usłudze ASP.NET Core

Autor: Scott Addie i David Pine

W tym artykule wyjaśniono zalety stosowania łączenia i minifikacji, w tym sposobu używania tych funkcji z aplikacjami internetowymi platformy ASP.NET Core.

Co to jest łączenie i minifikacja

Tworzenie pakietów i minification to dwie odrębne optymalizacje wydajności, które można zastosować w aplikacji internetowej. Stosowane razem, tworzenie pakietów i minimalizacja zwiększa wydajność dzięki zmniejszeniu liczby żądań serwera i zmniejszeniu rozmiaru żądanych zasobów statycznych.

Tworzenie pakietów i minifikacja poprawiają przede wszystkim czas ładowania żądania pierwszej strony. Po zażądaniu strony internetowej przeglądarka buforuje statyczne zasoby (JavaScript, CSS i obrazy). Zatem tworzenie pakietów i minifikacja nie poprawiają wydajności podczas żądania tej samej strony lub stron w tej samej witrynie żądającej tych samych zasobów. Jeśli nagłówek Expires nie jest poprawnie ustawiony w zasobach, a jeśli nie są używane łączenie plików i minifikacja, heurystyka świeżości przeglądarki oznacza zasoby jako nieaktualne po kilku dniach. Ponadto przeglądarka wymaga żądania weryfikacji dla każdego zasobu. W takim przypadku tworzenie pakietów i minifikacja zapewniają poprawę wydajności nawet po pierwszym żądaniu strony.

Łączenie

Tworzenie pakietów pozwala łączyć wiele plików w jeden plik. Tworzenie pakietów zmniejsza liczbę żądań serwera niezbędnych do renderowania zasobu internetowego, takiego jak strona internetowa. Można utworzyć dowolną liczbę oddzielnych pakietów specjalnie dla plików CSS, JavaScript itp. Mniejsza liczba plików oznacza mniej żądań HTTP z przeglądarki do serwera lub z usługi dostarczającej aplikację do serwera. Skutkuje to lepszą wydajnością ładowania pierwszej strony.

Minifikacja

Funkcja minyfikacji usuwa niepotrzebne znaki z kodu bez zmieniania funkcjonalności. Wynikiem jest znaczne zmniejszenie rozmiaru żądanych zasobów (takich jak arkusze CSS, obrazy i pliki JavaScript). Typowe skutki minifikacji obejmują skracanie nazw zmiennych do jednego znaku oraz usuwanie komentarzy i niepotrzebnych białych przestrzeni.

Rozważmy następującą funkcję Języka JavaScript:

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

Minifikacja zmniejsza funkcję do następującej postaci:

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

Oprócz usuwania komentarzy i niepotrzebnych białych znaków zmieniono następujące nazwy parametrów i zmiennych w następujący sposób:

Wpływ łączenia i minifikacji

W poniższej tabeli przedstawiono różnice między indywidualnym ładowaniem zasobów a używaniem grupowania i minyfikacji dla typowej aplikacji internetowej.

Czas ładowania poprawił się, ale ten przykład uruchomiono lokalnie. Większe wzrosty wydajności są realizowane w przypadku korzystania z tworzenia pakietów i minifikacji zasobów przesyłanych za pośrednictwem sieci.

Aplikacja testowa użyta do wygenerowania rysunków w poprzedniej tabeli pokazuje typowe ulepszenia, które mogą nie dotyczyć danej aplikacji. Zalecamy przetestowanie aplikacji w celu określenia, czy łączenie i minimalizowanie zapewnia krótszy czas ładowania.

Wybierz strategię łączenia i minifikacji

ASP.NET Core nie zapewnia natywnego rozwiązania do łączenia i minifikacji plików. Narzędzia innych firm, takie jak Gulp i Webpack, zapewniają automatyzację przepływu pracy na potrzeby tworzenia pakietów i minifikacji, a także lintowanie i optymalizację obrazów. Tworzenie pakietów i minifikacja przed wdrożeniem zapewnia korzyść z mniejszego obciążenia serwera. Jednak łączenie i minimalizowanie zwiększa złożoność kompilacji i działa tylko z plikami statycznymi.

Tworzenie pakietów i minifikacja zależne od środowiska

Zgodnie z najlepszymi praktykami należy używać zbundlowanych i zminimalizowanych plików aplikacji w środowisku produkcyjnym. Podczas programowania oryginalne pliki ułatwiają debugowanie aplikacji.

Określ pliki do uwzględnienia na stronach przy użyciu pomocnika tagów Environment w widokach. Tag Helper środowiska renderuje jego zawartość tylko podczas uruchamiania w określonych środowiskach.

Następujący environment tag renderuje nieprzetworzone pliki CSS podczas uruchamiania w Development środowisku:

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Poniższy znacznik environment renderuje połączone i minyfikowane pliki CSS podczas uruchamiania w środowisku innym niż Development. Na przykład uruchamianie w programie Production lub Staging wyzwala renderowanie tych arkuszy stylów:

<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

Treści powiązane

• Użyj wielu środowisk
• Tag Helpers