Krav: I tidligere .NET Framework MVC-projekter kan JS og CSS pakkes og komprimeres ved hjælp af Microsofts Microsoft.AspNet.Web.Optimization-bibliotek. Efter at have brugt ASP.NET Core, hvordan pakker og komprimerer jeg så eksisterende JS- og CSS-filer?
.NET Framework-projektet refererer til følgende:
Eksempelkode:
Bindende
Bundling kombinerer flere filer til én fil. Bundling reducerer antallet af serverforespørgsler, der kræves for at gengive et webaktiv, såsom en webside. Du kan oprette så mange individuelle bundles, du vil, specifikt til CSS, JavaScript og mere. Færre filer betyder fra browseren til serveren eller fra den service, der leverer applikationenFærre HTTP-forespørgsler。 Dette forbedrer indlæsningsydelsen på hjemmesiden.
komprimere
Minificer, fjern unødvendige tegn fra din kode uden at ændre funktionaliteten. Resultatet varStørrelsen på de anmodede ressourcer, såsom CSS, billeder og JavaScript-filer, er betydeligt reduceret。 Almindelige bivirkninger ved minifikation inkluderer at forkorte variabelnavne til én karakter og fjerne kommentarer og unødvendige mellemrum. Samtidig kan detForvirr koden, hvilket ikke er befordrende for, at andre konkurrenter læser vores kildekode.
Ydelsesgevinster fra bundling og komprimering
Følgende tabel viser forskellene mellem at indlæse aktiver individuelt og bruge bundling og minifikation:
Det sparer trafik og forbedrer indlæsningshastigheden i forhold til netværkstransport, samtidig med at HTTP-forespørgsler reduceres og indlæsningshastigheden forbedres.
For HTTP-anmodningsheaders er browseren meget detaljeret. Når den pakkes sammen, reduceres den samlede byte sendte metrik betydeligt. Indlæsningstider viser betydelige forbedringer, men dette eksempel kører lokalt. Bundling og minificering kan kombineres med aktiver, der transporteres over netværket for at opnå højere ydelsesgevinster.
ASP.NET Core ikke har sin egen pakkede og komprimerede løsning og skal bruge en løsning leveret af en tredjepart, bruger denne artikel "LigerShark.WebOptimizer.Core(Biblioteket ringede til sidst.)NøgglificérImplementer håndtering af JS og CSS), GitHub-adresse:Hyperlink-login er synlig.
Først opretter du et nyt projekt ASP.NET Core 6 og kører følgende kommando til reference:
Opret en ny statisk mappe i projektet wwwroot til at gemme test-css- og js-filerne. Opret en ny CSS- og JS-fil, som vist nedenfor:
Ændr Program.cs-filen og tilføj WebOptimizer-tjenesten og middleware, hovedkoden er som følger:
Når vi prøver at starte projektet, finder vi, at kommentarerne fra både CSS- og JS-koden er blevet slettet, filerne er blevet komprimeret, og nogle variabler i JS er reduceret til ét enkelt bogstav, som vist i figuren nedenfor:
Opret derefter en ny js-fil fra den statiske mappe for at teste bundlingsfunktionen.Samle test.js og test2.js i en enkelt common.js fil(og genererer ikke en common.js fysisk fil), er konfigurationskoden som følger:
Renderingerne er som følger:
Henvisning:
Hyperlink-login er synlig.
Hyperlink-login er synlig.
|
Opslået den 28-3-2022 kl. 20:55:50
|
|
|
|
Udlejer|
Opslået den 28-3-2022 kl. 20:56:47
|
Opslået den 29-3-2022 00:38:21
|
(Jeg ved ikke, hvordan man sletter dubletkommentarer, slet venligst dette opslag, når webmasteren ser det)