Tworzenie pakietów i minimalizowanie zasobów statycznych w usłudze ASP.NET Core

Autor: Scott Addie i David Pine

W tym artykule wyjaśniono zalety stosowania tworzenia pakietów i minimalizowania, w tym sposobu używania tych funkcji z aplikacjami internetowymi platformy ASP.NET Core.

Co to jest łączenie i minification

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

Tworzenie pakietów i minimumfikacja poprawia przede wszystkim czas ładowania żądania pierwszej strony. Po zażądaniu strony internetowej przeglądarka buforuje statyczne zasoby (JavaScript, CSS i obrazy). Dlatego tworzenie pakietów i minimalizowanie nie poprawia wydajności podczas żądania tej samej strony lub stron w tej samej witrynie żądającej tych samych zasobów. Jeśli nagłówek wygasa nie jest poprawnie ustawiony w zasobach, a jeśli nie są używane pakiety i minification, heurystyka świeżości przeglądarki oznacza nieaktualne zasoby po kilku dniach. Ponadto przeglądarka wymaga żądania weryfikacji dla każdego zasobu. W takim przypadku tworzenie pakietów i minimalizowanie zapewnia poprawę wydajności nawet po żądaniu pierwszej 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ę pojedynczych pakietów specjalnie dla arkuszy CSS, JavaScript itp. Mniejsza liczba plików oznacza mniej żądań HTTP z przeglądarki do serwera lub z usługi dostarczającej aplikację. 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ących elementów:

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 minimalizowania

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 w tym przykładzie uruchomiono lokalnie. Większe wzrosty wydajności są realizowane w przypadku korzystania z tworzenia pakietów i minimalizowania zasobów przesyłanych za pośrednictwem sieci.

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

Wybieranie strategii łączenia i minimalizowania

ASP.NET Core nie zapewnia natywnego rozwiązania do łączenia i minimalizowania. Narzędzia innych firm, takie jak Gulp i Webpack, zapewniają automatyzację przepływu pracy na potrzeby tworzenia pakietów i minification, a także linting i optymalizacji obrazów. Tworzenie pakietów i minimalizowanie 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 minimalizowanie oparte na środowisku

Najlepszym rozwiązaniem jest użycie plików dołączonych i minyfikowanych 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 środowiska w widokach. Pomocnik tagu ś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 environment tag renderuje powiązane 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>

Dodatkowe zasoby

• Używanie wielu środowisk
• Pomocnicy tagów