Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Architect_Programmer_Code Tarım Ağı»Mimar › Programlama › .Net/C # › ASP.NET Core (on iki) ön uç JS, CSS paketleme ve sıkıştırma ...
Görünüm: 24089|Yanıt: 8

[Kaynak] ASP.NET Core (on iki) ön uç JS, CSS paketleme ve sıkıştırma

[Bağlantıyı kopyala]
2022-3-28 tarihinde 20:55:50 tarihinde yayınlandı | | | |
Gereksinimler: Önceki .NET Framework MVC projelerinde, JS, CSS Microsoft'un Microsoft.AspNet.Web.Optimization kütüphanesi kullanılarak paketlenip sıkıştırılabilir. ASP.NET Core kullandıktan sonra, mevcut JS ve CSS dosyalarını nasıl paketleyip sıkıştırabilirim?

.NET Framework projesi aşağıdaki noktalara atıfta bulunur:

Örnek kod:

bağlama

Paketleme, birden fazla dosyayı tek bir dosyada birleştirir. Paketleme, bir web varlığını render etmek için gereken sunucu isteği sayısını azaltır, örneğin bir web sayfası. CSS, JavaScript ve daha fazlası için istediğiniz kadar bireysel paket oluşturabilirsiniz. Daha az dosya, tarayıcıdan sunucuya veya uygulamayı sağlayan hizmetten geçme anlamına gelirDaha Az HTTP isteği。 Bu, ana sayfa yükleme performansını artırır.

sıkıştırmak

Gereksiz karakterleri kodunuzdan işlevselliği değiştirmeden minimize et. Sonuç şöyleydiCSS, görseller ve JavaScript dosyaları gibi istenen kaynakların boyutu önemli ölçüde azaltılmış。 Minifikasyonun yaygın yan etkileri arasında değişken isimlerinin bir karaktere kısaltılması ve yorumların ile gereksiz boşlukların kaldırılması yer alır. Aynı zamanda,Kodu karıştır, ki bu da diğer rakiplerin kaynak kodumuzu okumasına uygun değildir.

Paketleme ve sıkıştırmadan elde edilen performans artışları

Aşağıdaki tablo, varlıkları bireysel olarak yüklemekle paketleme ve küçültme kullanımı arasındaki farkları özetlemektedir:



Trafik tasarrufu sağlar ve ağ taşıma açısından yükleme hızını artırır, ayrıca HTTP taleplerini azaltır ve yükleme hızını artırır.

HTTP isteği başlıkları için tarayıcı çok detaylı. Paketlendiğinde, gönderilen toplam bayt metriği önemli ölçüde azalır. Yükleme sürelerinde önemli iyileşmeler görülüyor, ancak bu örnek yerel olarak çalışıyor. Paketleme ve küçültme, ağ üzerinden taşınan varlıklarla birleştirilerek daha yüksek performans kazançları elde edilebilir.

ASP.NET Core'un kendi paketlenmiş ve sıkıştırılmış çözümü yok ve üçüncü taraf tarafından sağlanan bir çözüm kullanmak zorunda, bu makale "LigerShark.WebOptimizer.Core(Kütüphane sonunda aradı.)NUglifyJS ve CSS işlemesini uygula), GitHub adresi:Bağlantı girişi görünür.

Öncelikle, Core 6 ASP.NET yeni bir proje oluşturun ve referans almak için aşağıdaki komutu çalıştırın:

Test css ve js dosyalarını depolamak için wwwroot projesinde yeni bir statik klasör oluşturun. Aşağıda gösterildiği gibi yeni bir CSS ve JS dosyası oluşturun:



Program.cs dosyasını değiştirin ve WebOptimizer servisi ile ara yazılımı ekleyin, ana kod aşağıdaki gibidir:

Projeye başlamaya çalıştığımızda, hem CSS hem de JS kodlarının yorumlarının silindiğini, dosyaların sıkıştırıldığını ve JS'deki bazı değişkenlerin tek harfe indirgendiğini görüyoruz; aşağıdaki şekilde gösterilmiştir:



Sonra statik klasörden yeni bir js dosyası oluşturarak paketleme fonksiyonunu test edin.test.js ve test2.js tek bir common.js dosyasına paketleyin(ve common.js fiziksel bir dosya oluşturmaz), yapılandırma kodu şu şekildedir:

Çizimler aşağıdaki gibidir:



Referans:

Bağlantı girişi görünür.
Bağlantı girişi görünür.





Önceki:C# 8.0 null referans tipi olabilir
Önümüzdeki:[Gerçek dövüş]. NET 6 Rastgele bir rastgele sayı testi oluşturur

İlgili Yazılar
 Ev sahibi| 2022-3-28 tarihinde yayınlandı 20:56:47 |
Eleştiri:

ASP.NET Core (XI) uç nokta rotası, tüm DI servislerini görüntülemek için middleware ekler
https://www.itsvse.com/thread-10269-1-1.html

ASP.NET Core(10)'daki Konfigürasyon önceliklerinin ayrıntılı açıklaması.
https://www.itsvse.com/thread-10265-1-1.html

ASP.NET Core'un Middleware ara yazılımının ayrıntılı açıklaması (9).
https://www.itsvse.com/thread-9647-1-1.html

ASP.NET Core Middleware'in ayrıntılı açıklaması
https://www.itsvse.com/thread-8126-1-1.html

ASP.NET Core(8)'deki Swagger arayüzünün varsayılan parametrelerinin bir yuvası.
https://www.itsvse.com/thread-9640-1-1.html

ASP.NET Core (7) Framework kaynak kodunun derinlemesine analizi
https://www.itsvse.com/thread-9601-1-1.html

ASP.NET Core (VI) DI, nesneleri enjekte etme yöntemini manuel olarak elde eder
https://www.itsvse.com/thread-9595-1-1.html

ASP.NET Core (beş) CAP dağıtık işlemlere dayanmaktadır
https://www.itsvse.com/thread-9593-1-1.html

ASP.NET Core(4) filtresi birleşik ModelState model validasyonu
https://www.itsvse.com/thread-9589-1-1.html

ASP.NET Core (iii) ActivatorUtilities kullanarak dinamik örnekler oluşturun
https://www.itsvse.com/thread-9488-1-1.html

ASP.NET Çekirdek (2) Uygulamayı kodla yeniden başlat
https://www.itsvse.com/thread-9480-1-1.html

ASP.NET Core (1) Redis önbellekleme kullanır
https://www.itsvse.com/thread-9393-1-1.html
2022-3-29 00:38:21 tarihinde yayınlandı |
Öğrenmeyi öğrenin.
2022-4-6 tarihinde 12:02:33 tarihinde yayınlandı |
Ligershark.WebOptimizer.Core ve WebMarkupMin.AspNetCore6 ikisi de denedi
 Ev sahibi| 2022-4-6 tarihinde 13:45:12 tarihinde yayınlandı |
johnyoung 2022-4-6 12:02 tarihinde yayınlandı
Ligershark.WebOptimizer.Core ve WebMarkupMin.AspNetCore6 ikisi de denedi

Hangisi daha iyi
2022-4-6 tarihinde 14:53:12 tarihinde yayınlandı |
Bu gönderi en son johnyoung tarafından 2022-4-6 14:56 tarihinde düzenlenmiştir

(Tekrarlanan yorumları nasıl sileceğimi bilmiyorum, lütfen webmaster gördüğünde bu gönderiyi silin)
2022-4-6 tarihinde 14:54:11 tarihinde yayınlandı |
Küçük cüruf 2022-4-6 13:45 tarihinde yayınlandı
Hangisi daha iyi

Ön anlamam var: ilki, js ve css dosyalarını paketlemek ve sıkıştırmak, ikincisi ise sayfa html ve js ile css kodlarını ve http sıkıştırmalarını sayfada sıkıştırmak vb. ve ikincisinin js ve css dosyalarını paketleyip sıkıştıramayacağı net değil. Az önce denedim ama derinlemesine kullanmadım. Bir makale daha keşfedip paylaşmanızı dört gözle bekliyorum.
 Ev sahibi| 2024-4-24 15:35:15 tarihinde yayınlandı |
Geliştirme ortamını css ve js sıkıştırmadan yapılandırmak, kod:




 Ev sahibi| 2024-10-10 tarihinde yayınlandı 11:28:22 |
Ön uç, birden fazla CSS dosyasını sıkıştırmak ve birleştirmek için Minify kullanır
https://www.itsvse.com/thread-10845-1-1.html
Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.
Mail To:help@itsvse.com