Vaatimukset: Aiemmissa .NET Framework MVC -projekteissa JS ja CSS voidaan niputtaa ja pakata Microsoftin Microsoft.AspNet.Web.Optimization-kirjaston avulla. Kun olen käyttänyt ASP.NET Coren, miten niputan ja pakkaan olemassa olevat JS- ja CSS-tiedostot?
.NET Framework -projekti viittaa seuraaviin:
Esimerkkikoodi:
sitova
Paketointi yhdistää useita tiedostoja yhdeksi tiedostoksi. Niputtaminen vähentää palvelinpyyntöjen määrää, joita tarvitaan web-assetin, kuten verkkosivun, renderöintiin. Voit luoda niin monta yksittäistä pakettia kuin haluat nimenomaan CSS:lle, JavaScriptille ja muulle. Vähemmän tiedostoja tarkoittaa selaimesta palvelimelle tai palvelusta, joka tarjoaa sovelluksenVähemmän HTTP-pyyntöjä。 Tämä parantaa etusivun lataustehoa.
pakata
Minimoi tarpeettomien merkkien poistaminen koodistasi muuttamatta toiminnallisuutta. Tuloksena oliPyydettyjen resurssien, kuten CSS:n, kuvien ja JavaScript-tiedostojen, koko pienenee merkittävästi。 Minifioinnin yleisiä sivuvaikutuksia ovat muuttujien nimien lyhentäminen yhteen merkkiin sekä kommenttien ja tarpeettomien välilyöntien poistaminen. Samaan aikaan se voiSekoita koodi, mikä ei edistä muiden kilpailijoiden lähdekoodimme lukemista.
Suorituskyvyn parannukset niputtamisesta ja puristuksesta
Seuraava taulukko esittelee erot erillisen lastauksen ja niputtamisen sekä minifoinnin välillä:
Se säästää liikennettä ja parantaa latausnopeutta verkon siirrossa, samalla kun se vähentää HTTP-pyyntöjä ja parantaa latausnopeutta.
HTTP-pyyntöotsikoissa selain on hyvin yksityiskohtainen. Kun niputetaan, lähetettyjen tavujen kokonaismäärä vähenee merkittävästi. Latausajat osoittavat merkittäviä parannuksia, mutta tämä esimerkki toimii paikallisesti. Paketointi ja minimointi voidaan yhdistää verkon yli kuljetettuihin omaisuuseriin, jolloin saavutetaan parempia suorituskykyparannuksia.
ASP.NET Corella ei ole omaa paketoitua ja pakattua ratkaisua, ja sen täytyy käyttää kolmannen osapuolen tarjoamaa ratkaisua, tässä artikkelissa käytetään "LigerShark.WebOptimizer.Core(Kirjasto soitti lopulta.)NUglifyToteuta JS- ja CSS-käsittely), GitHub-osoite:Hyperlinkin kirjautuminen on näkyvissä.
Luo ensin uusi projekti Core 6 ASP.NET lle ja suorita seuraava komento, johon viittaat:
Luo uusi staattinen kansio projektiin wwwroot, jotta voit tallentaa testicss- ja js-tiedostot. Luo uusi CSS- ja JS-tiedosto, kuten alla on esitetty:
Muokkaa Program.cs-tiedostoa ja lisää WebOptimizer-palvelu sekä väliohjelmisto, pääkoodi on seuraava:
Kun yritämme aloittaa projektin, huomaamme, että sekä CSS- että JS-koodin kommentit on poistettu, tiedostot on pakattu, ja jotkin JS:n muuttujat on supistettu yhdeksi kirjaimeksi, kuten alla olevassa kuvassa näkyy:
Sitten luo uusi js-tiedosto staattisesta kansiosta testataksesi paketointitoimintoa.Niputa test.js ja test2.js yhdeksi common.js-tiedostoksi(eikä tuota common.js fyysistä tiedostoa), konfiguraatiokoodi on seuraava:
Renderöinnit ovat seuraavat:
Viittaus:
Hyperlinkin kirjautuminen on näkyvissä.
Hyperlinkin kirjautuminen on näkyvissä.
|
Julkaistu 2022-3-28 20:55:50
|
|
|
|
Vuokraisäntä|
Julkaistu 2022-3-28 20:56:47
|
Julkaistu 2022-3-29 00:38:21
|
(En tiedä, miten poistan päällekkäiset kommentit, poista tämä viesti kun webmaster näkee sen)