Krav: I tidligere .NET Framework MVC-prosjekter kan JS og CSS pakkes sammen og komprimeres ved bruk av Microsofts Microsoft.AspNet.Web.Optimization-bibliotek. Etter å ha brukt ASP.NET Core, hvordan pakker og komprimerer jeg eksisterende JS- og CSS-filer?
.NET Framework-prosjektet refererer til følgende:
Eksempelkode:
binding
Bundleling kombinerer flere filer til én enkelt fil. Bunting reduserer antallet serverforespørsler som kreves for å gjengi en webressurs, som en nettside. Du kan lage så mange individuelle pakker du vil, spesielt for CSS, JavaScript og mer. Færre filer betyr fra nettleseren til serveren eller fra tjenesten som leverer applikasjonenFærre HTTP-forespørsler。 Dette forbedrer innlastingsytelsen på hjemmesiden.
komprimere
Minify, fjern unødvendige tegn fra koden din uten å endre funksjonaliteten. Resultatet varStørrelsen på forespurte ressurser, som CSS, bilder og JavaScript-filer, er betydelig redusert。 Vanlige bivirkninger av minifisering inkluderer å forkorte variabelnavn til ett tegn og fjerne kommentarer og unødvendige mellomrom. Samtidig kan detForvirre koden, noe som ikke er gunstig for andre konkurrenter som leser kildekoden vår.
Ytelsesgevinster fra bunting og kompresjon
Tabellen nedenfor viser forskjellene mellom å laste eiendeler individuelt og bruke bunting og minifisering:
Den sparer trafikk og forbedrer lastehastigheten når det gjelder nettverkstransport, samtidig som den reduserer HTTP-forespørsler og forbedrer lastehastigheten.
For HTTP-forespørselsheadere er nettleseren veldig detaljert. Når den pakkes sammen, reduseres den totale byte-metrikken betydelig. Lastetidene viser betydelige forbedringer, men dette eksempelet kjører lokalt. Bunting og minifisering kan kombineres med eiendeler som transporteres over nettverket for å oppnå høyere ytelsesgevinster.
ASP.NET Core ikke har sin egen pakkede og komprimerte løsning, og må bruke en løsning levert av en tredjepart, bruker denne artikkelen "LigerShark.WebOptimizer.Core(Biblioteket ringte til slutt.)NevolverImplementer håndtering av JS og CSS), GitHub-adresse:Innloggingen med hyperkoblingen er synlig.
Først oppretter du et nytt prosjekt ASP.NET Core 6 og kjører følgende kommando for referanse:
Opprett en ny statisk mappe i prosjektet wwwroot for å lagre test-CSS- og JS-filene. Lag en ny CSS- og JS-fil, som vist nedenfor:
Endre Program.cs-filen og legg til WebOptimizer-tjenesten og mellomvaren, hovedkoden er som følger:
Når vi prøver å starte prosjektet, oppdager vi at kommentarene til både CSS- og JS-koden er slettet, filene er komprimert, og noen variabler i JS er redusert til én bokstav, som vist i figuren under:
Deretter oppretter du en ny js-fil fra den statiske mappen for å teste bunting-funksjonen.Samle test.js og test2.js i én enkelt common.js-fil(og genererer ikke en common.js fysisk fil), er konfigurasjonskoden som følger:
Gjengivelsene er som følger:
Referanse:
Innloggingen med hyperkoblingen er synlig.
Innloggingen med hyperkoblingen er synlig.
|
Publisert 28.03.2022 kl. 20:55:50
|
|
|
|
Vert|
Publisert 28.03.2022 kl. 20:56:47
|
Publisert 29.03.2022 00:38:21
|
(Jeg vet ikke hvordan jeg sletter duplikatkommentarer, vennligst slett dette innlegget når webmasteren ser det)