ASP.NET Core (dwanaście) front-end JS, bundling CSS i kompresja

Mały śmiecie · Opublikowano 2022-3-28 20:55:50

Wymagania: W poprzednich projektach .NET Framework MVC JS, CSS można łączyć i kompresować za pomocą biblioteki Microsoft Microsoft.AspNet.Web.Optimization. Po użyciu ASP.NET Core, jak połączyć i skompresować istniejące pliki JS i CSS?

Projekt .NET Framework odnosi się do następujących elementów:

Logowanie jest widoczne.

Przykładowy kod:

Logowanie jest widoczne.

wiążący

Łączenie łączy wiele plików w jeden plik. Łączenie zmniejsza liczbę żądań serwera potrzebnych do renderowania zasobu webowego, takiego jak strona internetowa. Możesz tworzyć dowolną liczbę indywidualnych pakietów specjalnie dla CSS, JavaScript i innych. Mniej plików oznacza przejście z przeglądarki na serwer lub z usługi dostarczającej aplikacjęMniej żądań HTTP。 Poprawia to wydajność ładowania strony głównej.

kompresować

Minimalizuj usuwanie zbędnych znaków z kodu bez zmiany funkcjonalności. Efektem byłRozmiar żądanych zasobów, takich jak CSS, obrazy i pliki JavaScript, jest znacznie zmniejszony。 Typowe skutki uboczne miniaturyzacji to skracanie nazw zmiennych do jednego znaku oraz usuwanie komentarzy i niepotrzebnych spacji. Jednocześnie możeZmyl kod, co nie sprzyja innym konkurentom czytania naszego kodu źródłowego.

Zyski wydajnościowe dzięki pakowaniu i kompresji

Poniższa tabela przedstawia różnice między ładowaniem zasobów indywidualnie a używaniem łączenia i minimalizacji:

Oszczędza to ruch i poprawia szybkość ładowania w zakresie transportu sieciowego, jednocześnie zmniejszając liczbę żądań HTTP i poprawiając szybkość ładowania.

W przypadku nagłówków żądań HTTP przeglądarka jest bardzo szczegółowa. Po łączeniu metryka łącznie przesyłanych bajtów jest znacznie zmniejszona. Czasy ładowania wykazują znaczącą poprawę, ale ten przykład działa lokalnie. Łączenie i minimalizacja mogą być łączone z aktywami transportowanymi przez sieć, aby osiągnąć wyższe wzrosty wydajności.

ASP.NET Core nie posiada własnego zintegrowanego i skompresowanego rozwiązania i musi korzystać z rozwiązania dostarczonego przez stronę trzecią, ten artykuł używa "LigerShark.WebOptimizer.Core(W końcu zadzwoniła biblioteka.)NUglifyImplementuj obsługę JS i CSS), adres GitHub:Logowanie do linku jest widoczne.

Najpierw stwórz nowy projekt ASP.NET Core 6 i wykonaj następujące polecenie, aby się odwołać:

Logowanie jest widoczne.

Utwórz nowy statyczny folder w projekcie wwwroot, aby przechować testowe pliki CSS i JS. Stwórz nowy plik CSS i JS, jak pokazano poniżej:

Zmodyfikuj plik Program.cs i dodaj usługę WebOptimizer oraz oprogramowanie pośredniczące, główny kod wygląda następująco:

Logowanie jest widoczne.

Gdy próbujemy rozpocząć projekt, okazuje się, że komentarze zarówno kodu CSS, jak i JS zostały usunięte, pliki skompresowane, a niektóre zmienne w JS zostały zredukowane do jednej litery, jak pokazano na poniższym rysunku:

Następnie utwórz nowy plik js z folderu statycznego, aby przetestować funkcję bundlingu.Zgrupuj test.js i test2.js w jeden plik common.js(i nie generuje common.js pliku fizycznego), kod konfiguracyjny wygląda następująco:

Logowanie jest widoczne.

Przedstawienia przedstawiają się następująco:

Odniesienie:

Logowanie do linku jest widoczne.
Logowanie do linku jest widoczne.

Mały śmiecie · Opublikowano 2022-3-28 20:56:47

Recenzja:

ASP.NET Core (XI) trasa końcowa dodaje oprogramowanie pośrednicze do wyświetlania wszystkich usług DI
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Szczegółowe wyjaśnienie priorytetów konfiguracji w Core(10).
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Szczegółowe wyjaśnienie middleware Middleware w Core (9).
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET Szczegółowe wyjaśnienie Core Middleware
https://www.itsvse.com/thread-8126-1-1.html

ASP.NET domyślnych parametrów interfejsu Swagger w Core(8).
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET Rdzeń (7) Dogłębna analiza kodu źródłowego frameworka
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DI ręcznie uzyskuje metodę wstrzykiwania obiektów
https://www.itsvse.com/thread-9595-1-1.html

ASP.NET Core (pięć) opiera się na rozproszonych transakcjach CAP
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Filtr Core(4) zunifikowany walidacja modelu modelu ModelState
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET Rdzeń (iii) Dynamicznie twórz instancje za pomocą ActivatorUtilities
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET Rdzeń (2) Restart aplikacji za pomocą kodu
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core (1) korzysta z buforowania Redis
https://www.itsvse.com/thread-9393-1-1.html

Ryba Latająca · Opublikowano 2022-3-29 00:38:21

Ucz się uczyć się.

Johnyoung · Opublikowano 2022-4-6 o 12:02:33

Ligershark.WebOptimizer.Core i WebMarkupMin.AspNetCore6 próbowały

Mały śmiecie · Opublikowano 2022-4-6 o 13:45:12

johnyoung Opublikowano 2022-4-6 12:02
Ligershark.WebOptimizer.Core i WebMarkupMin.AspNetCore6 próbowały

Który jest lepszy

Johnyoung · Opublikowano 2022-4-6 o 14:53:12

Ten post został ostatnio edytowany przez johnyounga 6 kwietnia 2022 o godzinie 14:56

(Nie wiem, jak usunąć duplikaty komentarzy, proszę usunąć ten post, gdy webmaster go zobaczy)

Johnyoung · Opublikowano 2022-4-6 o 14:54:11

Mała szmatka Opublikowano 2022-4-6 13:45
Który jest lepszy

Mam wstępne pojęcie: pierwszy to łączenie i kompresja plików js i css, drugi to kompresja HTML i kodu CSS strony oraz kompresja http na stronie itd., a nie jest jasne, czy drugi potrafi łączyć i kompresować pliki js i css. Właśnie próbowałem i nie używałem tego dogłębnie. Nie mogę się doczekać, aż będziecie to zgłębić i opublikować kolejny artykuł.

Mały śmiecie · Opublikowano 2024-4-24 15:35:15

Konfiguruj środowisko programistyczne bez kompresji CSS i JS, kod:

Logowanie jest widoczne.

Mały śmiecie · Opublikowano 2024-10-10 11:28:22

Front-end wykorzystuje Minify do kompresji i łączenia wielu plików CSS
https://www.itsvse.com/thread-10845-1-1.html

[Źródło] ASP.NET Core (dwanaście) front-end JS, bundling CSS i kompresja

Powiązane wpisy

Oglądane sekcje