Komut Dosyası/Stil Paketlemeyi Etkinleştirme

 

Serene/StartSharp şablonlarında, varsayılan olarak _LayoutHead.cshtml'ye dahil edilen yaklaşık 3 MB'tan fazla .js/.css dosyası vardır.

Yukarıdaki ekran görüntüsünde görüldüğü gibi 3.1 MBağ üzerinden 54 istek üzerinden aktarılmaktadır.

Bu, özellikle Serenity tabanlı bir siteye mobil cihazlardan erişildiğinde bazı sistemlerde bant genişliği ve performans sorunlarına neden olabilir.

Bu sorunları çözmenin, komut dosyası boyutunu azaltmak için küçültme ve gzipleme ve isteklerin sayısını azaltmak için komut dosyalarını daha az dosyaya paketlemek için paketleme gibi çeşitli yolları vardır.

Serenity, global olarak dahil edilen komut dosyaları/stil sayfaları için kutudan çıkan bir komut dosyası paketleme ve küçültme/sıkıştırma sistemi ile birlikte gelir.

Klasör altında sunulan modüler Javascript dosyaları ~/esm/işlenir, örneğin küçültülür ve esbuildkendi başına paketlenir, böylece bu konudaki bilgiler onlar için geçerli değildir.

Dosya appsettings.bundles.json_

appsettings.bundles.jsonProje kökünüzdeki dosya, Javascript/Stil Sayfaları için paketlerin ve bunların içeriklerinin listesini içerir .

{
  "CssBundling": {
    "Bundles": {
      "Base": [
        "~/Serenity.Assets/fonts/poppins/poppins.css",
        "~/Serenity.Assets/fonts/open-sans/open-sans.css"
        //...
      ],
      "Site": [
        "~/Serenity.Assets/Content/jquery.fileupload.css",
        "~/Serenity.Assets/Content/colorbox/jquery.colorbox.css",
        "~/Content/site/site.css"
      ],
      "Pages/Dashboard": [
        "~/Serenity.Pro.Theme/pages/dashboard.css",
        "~/esm/Modules/Common/Dashboard/DashboardPage.css"
      ]
    }
  },
  "ScriptBundling": {
    "Bundles": {
      "Base": [
        "~/Serenity.Assets/nprogress/nprogress.js",
        "~/Serenity.Assets/jquery/jquery.js",
        //...
        "~/Serenity.Scripts/Serenity.CoreLib.js",
        "~/Serenity.Extensions/index.js",
        "~/Serenity.Pro.Extensions/index.js",
        "~/Serenity.Pro.Theme/pro-theme.js"
      ],
      //...
      "Site": [
        "dynamic://ColumnAndFormBundle"
      ]
    }
  }
}

BaseBurada çeşitli Komut Dosyası paketlerini ve bunlara Sitekarşılık gelen dinamik komut dosyası dosyalarını tanımlıyoruz .~/DynJS.axd/Bundle.Base.js~/DynJS.axd/Bundle.Site.js

BaseBenzer şekilde, , dahil olmak üzere tanımlanmış Siteve , ve'ye Pages/Dashboardkarşılık gelen çeşitli Stil paketleri vardır .~/DynJS.axd/BundleCss.Base.css~/DynJS.axd/BundleCss.Site.css~/DynJS.axd/BundleCss.Pages/Dashboard.css

Paket içeriklerinin sırası, tanımlandıkları sıraya göre dahil edildikleri için önemlidir. Paket içeriğini sipariş ederken bağımlılıkları göz önünde bulundurmalısınız. jQueryÖrneğin jQuery eklentisi kendisi eklenmeden önce eklenmemelidir .

Paketleme Devre Dışı Bırakıldığında (Varsayılan)

_LayoutHead.cshtmlBu paketler aşağıdakiler gibi başka yerlerde de kullanılır :

//...
@Html.StyleBundle("Base" + rtl)
@Html.StyleBundle("Site")
@Html.ScriptBundle("Base")
@Html.ScriptBundle("Site")
//...

Paketleme devre dışı bırakıldığında (varsayılan olarak budur) ve bir sayfanın kaynağına baktığınızda şunun gibi bir şey görürsünüz:

<link href="/Serenity.Assets/fonts/poppins/poppins.css?v=2023031912" 
    rel="stylesheet" type="text/css"/>
<link href="/Serenity.Assets/fonts/open-sans/open-sans.css?v=2023031912" 
    rel="stylesheet" type="text/css"/>
//...
<link href="/Serenity.Assets/Content/jquery.fileupload.css?v=2023031912" 
    rel="stylesheet" type="text/css"/>
<link href="/Serenity.Assets/Content/colorbox/jquery.colorbox.css?v=2023031912" 
    rel="stylesheet" type="text/css"/>
<link href="/Content/site/site.css?v=9Ce6PEyK88kLXTLEjUbZfA" 
    rel="stylesheet" type="text/css"/>
//...
<script src="/Serenity.Assets/nprogress/nprogress.js?v=2023031912" 
    type="text/javascript"></script>
<script src="/Serenity.Assets/jquery/jquery.js?v=2023031912" 
    type="text/javascript"></script>
//...
<script src="/Serenity.Pro.Theme/pro-theme.js?v=2023031912"
    type="text/javascript"></script>
<script src="/DynJS.axd/ColumnAndFormBundle.js?v=5W-I1I_Qc3-bxgy5ZY5dNQ" 
    type="text/javascript"></script>

Paket tanımlarında tanımlanan stil dosyaları ve scriptler birbiri ardına dahil edilirken, ?v=2023031912tarayıcı önbelleğini geçersiz kılmak için güncel tarih/saat için özel bir önek eklenir.

Bu durumda paketler yalnızca sayfaya hangi komut dosyalarının dahil edileceğini tanımlamak için kullanılır.

Paketlemeyi Etkinleştirme

Paketlemeyi (özellikle küçültmeyi) yalnızca üretimde etkinleştirmelisiniz. Aksi halde Javascript'te hata ayıklamak çok zor olabilir.

Paketlemeyi etkinleştirmek için dosyadaki ScriptBundling -> Enabledve özelliklerini şu şekilde ayarlamanız yeterlidir :CssBundling -> Enabledappsettings.jsontrue

{
    "CssBundling": {
        "Enabled": true,
        "Minimize": true,
        "UseMinCss": true
    },
    "ScriptBundling": {
        "Enabled": true,
        "Minimize": true,
        "UseMinJs": true
    }
}

Bu Minimizeseçenek, paketlenen komut dosyalarının paketlenmeden önce küçültülmesi gerekip gerekmediğini kontrol eder ve UseMinJSbir dosyanın yanında UseMinCSSbir dosya olup olmadığını , dosyayı bellekte yeniden küçültmek yerine kullanılması gerektiğini kontrol eder.sample.min.jssample.js

Minifikasyon için NUglify kütüphanesi kullanılır. Bu, paketleme/gzipleme işleminden önce uygulanacaktır, böylece paketlerimiz yaklaşık %40 daha küçük olacak, ancak okunması çok daha zor olacaktır, bu nedenle bunu yalnızca üretimde etkinleştirin.

Paketleme etkinleştirildiğinde, tüm bu dosyalar isteğe bağlı olarak küçültülür, bellekteki paket dosyaları halinde birleştirilir, GZip/Brotli sıkıştırılır ve içerik karmaları tarafından önbelleğe alınır. Şimdi sayfa kaynağına bakarsanız şu şekilde değişecektir:

<link href="/DynJS.axd/CssBundle.Base.css?v=kD-QTI_-sOPVn1xsZO8cVQ" 
    rel="stylesheet" type="text/css"/>
<link href="/DynJS.axd/CssBundle.Site.css?v=mHMeisU5pO7Mq7ZQDtAnhA" 
    rel="stylesheet" type="text/css"/>
<script src="/DynJS.axd/Bundle.Base.js?v=-SEDdefry-i_QyrN8U_7ow" 
    type="text/javascript"></script>
<script src="/DynJS.axd/Bundle.Site.js?v=w0am-CzW3EQfbVNaX1WDgg"
    type="text/javascript"></script>

Yani sayfada yalnızca 4 JS/CSS paket dosyası var. Ve bunların URL'si, ?v=kD-QTI_-sOPVn1xsZO8cVQpaketlenmiş dosyaların gerçek karmalarına benzer bir son ek içerir.

Ağ sekmesine tekrar bakarsak, daha önce 3,1 MB yerine yalnızca 422 KB aktarılan 17 isteğin olduğunu göreceğiz. Yüzde 85'lik bir azalma, fena değil...

Komut Dosyası Etiketlerimde v=p53uqJ... Nedir?

Bu bir sürüm numarasıdır; veya betiğinizin HASH'i. Paketleme etkin olsa da olmasa da, uzantıyı kullandığınızda Html.Scriptbu karma, komut dosyanızın içeriğine eklenecektir. Bu karma, tarayıcının komut dosyasını değişene kadar önbelleğe almasına olanak tanır. Bir betiğin içeriği değiştiğinde hash'i de değişir, böylece tarayıcı önbelleğe almaz ve eski bir sürümü kullanmaz.

Serenity uygulamalarında hiçbir zaman komut dosyasını önbelleğe alma sorunları yaşamamanızın nedeni budur.