ASP.NET Core (dvylika) priekinės dalies JS, CSS susiejimas ir glaudinimas

Mažai purvo · Paskelbta 2022-3-28 20:55:50

Reikalavimai: Ankstesniuose .NET Framework MVC projektuose JS, CSS galima susieti ir suspausti naudojant "Microsoft" Microsoft.AspNet.Web.Optimization biblioteką. Kaip panaudojus "ASP.NET Core" sujungti ir suspausti esamus JS ir CSS failus?

.NET Framework projektas nurodo šiuos dalykus:

Prisijungimas matomas.

Pavyzdžio kodas:

Prisijungimas matomas.

Privalomas

Susiejimas sujungia kelis failus į vieną failą. Susiejimas sumažina serverio užklausų, reikalingų žiniatinklio ištekliui, pvz., tinklalapiui, generuoti, skaičių. Galite sukurti tiek atskirų paketų, kiek norite, specialiai CSS, JavaScript ir kt. Mažiau failų reiškia iš naršyklės į serverį arba iš paslaugą, kuri teikia programąMažiau HTTP užklausų。 Tai pagerina pagrindinio puslapio įkėlimo našumą.

suspausti

Sumažinkite nereikalingų simbolių pašalinimą iš kodo nekeisdami funkcijų. Rezultatas buvoŽymiai sumažėja prašomų išteklių, tokių kaip CSS, vaizdai ir JavaScript failai, dydis。 Dažnas šalutinis sumažinimo poveikis yra kintamųjų pavadinimų sutrumpinimas iki vieno simbolio ir komentarų bei nereikalingų tarpų pašalinimas. Tuo pačiu metu ji galiSupainiokite kodą, o tai nėra palanku kitiems konkurentams skaityti mūsų šaltinio kodą.

Našumo padidėjimas dėl susiejimo ir glaudinimo

Toliau pateiktoje lentelėje apibūdinami skirtumai tarp atskiro turto pakrovimo ir susiejimo bei mažinimo:

Tai taupo srautą ir pagerina įkėlimo greitį tinklo transportavimo požiūriu, taip pat sumažina HTTP užklausas ir pagerina įkėlimo greitį.

HTTP užklausų antraštėms naršyklė yra labai išsami. Sujungus bendrą siunčiamų baitų metriką žymiai sumažėja. Įkėlimo laikas rodo reikšmingus patobulinimus, tačiau šis pavyzdys vykdomas vietoje. Susiejimas ir mažinimas gali būti derinami su tinklu perduodamu turtu, kad būtų pasiektas didesnis našumas.

ASP.NET "Core" neturi savo susieto ir suspausto sprendimo ir turi naudoti trečiosios šalies pateiktą sprendimą, šiame straipsnyje naudojamas "LigerShark.WebOptimizer.Core(Galiausiai biblioteka paskambino.)NUglifyĮdiegti JS ir CSS tvarkymą), GitHub adresas:Hipersaito prisijungimas matomas.

Pirmiausia sukurkite naują projektą ASP.NET "Core 6" ir paleiskite šią komandą:

Prisijungimas matomas.

Sukurkite naują statinį aplanką projekte wwwroot saugoti bandymo css ir js failus. Sukurkite naują CSS ir JS failą, kaip parodyta toliau:

Pakeiskite Program.cs failą ir pridėkite "WebOptimizer" paslaugą bei tarpinę programinę įrangą, pagrindinis kodas yra toks:

Prisijungimas matomas.

Kai bandome pradėti projektą, pastebime, kad tiek CSS, tiek JS kodo komentarai buvo ištrinti, failai buvo suspausti, o kai kurie JS kintamieji buvo sumažinti iki vienos raidės, kaip parodyta paveikslėlyje žemiau:

Tada sukurkite naują js failą iš statinio aplanko, kad išbandytumėte susiejimo funkciją.Sujunkite test.js ir test2.js į vieną common.js failą(ir negeneruoja common.js fizinio failo), konfigūracijos kodas yra toks:

Prisijungimas matomas.

Atvaizdai yra tokie:

Nuoroda:

Hipersaito prisijungimas matomas.
Hipersaito prisijungimas matomas.

Mažai purvo · Publikuota: 2022-3-28 20:56:47

Peržiūra:

ASP.NET Core (XI) galinio taško maršrutas prideda tarpinę programinę įrangą, kad būtų rodomos visos DI paslaugos
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Išsamus konfigūracijos prioritetų paaiškinimas branduolyje [10].
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Išsamus "Core" tarpinės programinės įrangos paaiškinimas (9).
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET Išsamus "Core Middleware" paaiškinimas
https://www.itsvse.com/thread-8126-1-1.html

ASP.NET Swagger vartotojo sąsajos numatytųjų parametrų duobę Core(8).
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET Core (7) Išsami sistemos šaltinio kodo analizė
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DI rankiniu būdu gauna objektų įpurškimo būdą
https://www.itsvse.com/thread-9595-1-1.html

"ASP.NET Core" (penki) yra pagrįstas BŽŪP paskirstytais sandoriais
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Core(4) filtro vieningas ModelState modelio tikrinimas
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET Core (iii) Dinamiškai kurkite egzempliorius naudodami "ActivatorUtilities"
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET Core (2) Iš naujo paleiskite programą pagal kodą
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core (1) naudoja Redis talpyklą
https://www.itsvse.com/thread-9393-1-1.html

Skraidančios žuvys · Publikuota: 2022-3-29 00:38:21

Išmokite mokytis.

Johnyoungas · Paskelbta 2022-4-6 12:02:33

Ligershark.WebOptimizer.Core ir WebMarkupMin.AspNetCore6 bandė

Mažai purvo · Paskelbta 2022-4-6 13:45:12

johnyoung Publikuota 2022-4-6 12:02
Ligershark.WebOptimizer.Core ir WebMarkupMin.AspNetCore6 bandė

Kuris iš jų yra geresnis

Johnyoungas · Paskelbta 2022-4-6 14:53:12

Šį įrašą paskutinį kartą redagavo johnyoung 2022-4-6 14:56

(Aš nežinau, kaip ištrinti pasikartojančius komentarus, prašome ištrinti šį pranešimą, kai webmaster mato jį)

Johnyoungas · Paskelbta 2022-4-6 14:54:11

Mažai šlako Publikuota 2022-4-6 13:45
Kuris iš jų yra geresnis

Turiu preliminarų supratimą: pirmasis yra sujungti ir suspausti js ir css failus, antrasis yra suspausti puslapio html ir js ir css kodą ir http suspaudimą puslapyje ir t.t., ir neaišku, ar pastarasis gali sujungti ir suspausti js ir css failus. Aš tiesiog išbandžiau ir nenaudojau nuodugniai. Tikiuosi, kad ištirsite ir paskelbsite kitą straipsnį.

Mažai purvo · Publikuota: 2024-4-24 15:35:15

Sukonfigūruokite kūrimo aplinką nesuspausdami css ir js, kodo:

Prisijungimas matomas.

Mažai purvo · Publikuota: 2024-10-10 11:28:22

Priekinė dalis naudoja "Minify", kad suspaustų ir sujungtų kelis CSS failus
https://www.itsvse.com/thread-10845-1-1.html

[Šaltinis] ASP.NET Core (dvylika) priekinės dalies JS, CSS susiejimas ir glaudinimas

Susijusios žinutės

Peržiūrėtos sekcijos