Requisiti: Nei precedenti progetti MVC di .NET Framework, JS, CSS può essere aggregato e compresso utilizzando la libreria Microsoft.AspNet.Web.Optimization di Microsoft. Dopo aver usato ASP.NET Core, come posso raggruppare e comprimere file JS e CSS esistenti?
Il progetto .NET Framework fa riferimento ai seguenti aspetti:
Codice di esempio:
rilegatura
L'impacchettatura combina più file in un unico file. Il bundle riduce il numero di richieste server necessarie per renderizzare un asset web, come una pagina web. Puoi creare quanti pacchetti individuali vuoi specificamente per CSS, JavaScript e altro ancora. Meno file si riferiscono dal browser al server o dal servizio che fornisce l'applicazioneMeno richieste HTTP。 Questo migliora le prestazioni di caricamento della homepage.
comprimere
Minifica la rimozione di caratteri inutili dal tuo codice senza cambiare funzionalità. Il risultato fuLa dimensione delle risorse richieste, come CSS, immagini e file JavaScript, è significativamente ridotta。 Gli effetti collaterali comuni della minificazione includono l'accorciamento dei nomi delle variabili a un solo carattere e la rimozione di commenti e spazi inutili. Allo stesso tempo, puòConfondere il codice, il che non favorisce la lettura del nostro codice sorgente da parte di altri concorrenti.
Guadagni di prestazioni derivanti da bundle e compressione
La tabella seguente illustra le differenze tra il caricamento degli asset singolarmente e l'uso del bundle e della minificazione:
Risparmia traffico e migliora la velocità di caricamento in termini di trasporto di rete, riducendo al contempo le richieste HTTP e migliorando la velocità di caricamento.
Per le intestazioni delle richieste HTTP, il browser è molto dettagliato. Quando si raggruppa, il totale di byte inviati viene significativamente ridotto. I tempi di caricamento mostrano miglioramenti significativi, ma questo esempio viene eseguito localmente. Il bundle e la minificazione possono essere combinati con asset trasportati sulla rete per ottenere maggiori guadagni di prestazioni.
ASP.NET Core non ha una propria soluzione compressa e bundled, e deve utilizzare una soluzione fornita da terze parti, questo articolo utilizza "LigerShark.WebOptimizer.Core(La biblioteca alla fine chiamò.)NUgifyImplementa la gestione JS e CSS), indirizzo GitHub:Il login del link ipertestuale è visibile.
Per prima cosa, crea un nuovo progetto ASP.NET Core 6 ed esegui il seguente comando per fare riferimento:
Crea una nuova cartella statica nel progetto wwwroot per memorizzare i file css e js di test. Crea un nuovo file CSS e JS, come mostrato di seguito:
Modifica il file Program.cs e aggiungi il servizio WebOptimizer e il middleware, il codice principale è il seguente:
Quando proviamo a avviare il progetto, scopriamo che i commenti sia del codice CSS che di quello JS sono stati cancellati, i file compressi e alcune variabili in JS sono state ridotte a una sola lettera, come mostrato nella figura sottostante:
Poi crea un nuovo file js dalla cartella statica per testare la funzione di raggruppamento.Raggruppa test.js e test2.js in un unico file common.js(e non genera un file fisico common.js), il codice di configurazione è il seguente:
Le rappresentazioni sono le seguenti:
Riferimento:
Il login del link ipertestuale è visibile.
Il login del link ipertestuale è visibile.
|
Pubblicato il 28-03-2022 alle 20:55:50
|
|
|
|
Padrone di casa|
Pubblicato il 28-03-2022 20:56:47
|
Pubblicato il 29-03-2022 00:38:21
|
(Non so come cancellare i commenti duplicati, per favore cancellate questo post quando il webmaster lo vede)