{"id":15812,"date":"2020-05-12T23:17:20","date_gmt":"2020-05-12T23:17:20","guid":{"rendered":"https:\/\/www.gencayyildiz.com\/blog\/?p=15812"},"modified":"2020-05-12T23:17:20","modified_gmt":"2020-05-12T23:17:20","slug":"asp-net-core-mvc-smidge-kutuphanesiyle-bundle-islemi","status":"publish","type":"post","link":"https:\/\/www.gencayyildiz.com\/blog\/asp-net-core-mvc-smidge-kutuphanesiyle-bundle-islemi\/","title":{"rendered":"Asp.NET Core MVC – Smidge K\u00fct\u00fcphanesiyle Bundle \u0130\u015flemi"},"content":{"rendered":"
<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde Asp.NET Core MVC uygulamalar\u0131nda b\u00fcy\u00fck boyutlu JavaScript ve CSS dosyalar\u0131n\u0131n boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek i\u00e7in sarmak\/kundaklamak manas\u0131na gelen bundle i\u015flemini \u00e7al\u0131\u015fma zaman\u0131nda yapmam\u0131z\u0131 sa\u011flayan Smidge k\u00fct\u00fcphanesi \u00fczerine konu\u015faca\u011f\u0131z.<\/p>\n

\u0130lk olarak Smidge k\u00fct\u00fcphanesinin temel olarak benimsedi\u011fi terimleri anlamland\u0131rarak ba\u015flayal\u0131m.<\/p>\n

Bundling & Minification Ne Demektir?<\/strong>
\nWeb sitelerinde performans ve y\u00fcklenme h\u0131zlar\u0131n\u0131 artt\u0131rmak i\u00e7in yap\u0131lan eylemleri tarif etmek i\u00e7in kullan\u0131lan terimlerdir.<\/p>\n

Bundling<\/em>; anlamsal olarak ‘gruplama’ demektir ve k\u00f6ken olarak(bund) ‘federasyon’ yahut ‘dernek’ k\u00f6keninden gelmektedir. Buradan da anla\u015f\u0131lan birden fazla JavaScript, CSS vs. gibi dosyalar\u0131 tekbir dosyada birle\u015ftirmektir. <\/p>\n

\u00d6rne\u011fin; 3 JS + 2 CSS<\/span> dosyas\u0131n\u0131 bundling ettikten sonra 1 JS + 1 CSS<\/span> dosyas\u0131 olarak \u00e7\u0131kt\u0131 verecektir.<\/p>\n

Minification<\/em>; JS yahut CSS dosyalar\u0131n\u0131n i\u00e7eriklerinde bulunan gereksiz karakterlerin veya yorum sat\u0131rlar\u0131n\u0131n temizlenmesi ve b\u00f6ylece boyutlar\u0131n\u0131n k\u00fc\u00e7\u00fclt\u00fclmesi i\u015flemidir.<\/p>\n

Smidge k\u00fct\u00fcphanesi uygulamadaki JS ve CSS dosyalar\u0131n\u0131 hem bundling hem de minification i\u015flemlerine tabii tutmaktad\u0131r.<\/strong><\/p><\/blockquote>\n

Smidge K\u00fct\u00fcphanesinin Entegrasyonu<\/strong>
\nUygulaman\u0131za Smidge k\u00fct\u00fcphanesini entegre edebilmeniz i\u00e7in nuget<\/a> adresinden ilgili k\u00fct\u00fcphaneyi edinebilirsiniz. Ayr\u0131ca Smidge ile ilgili g\u00fcncel geli\u015fmeleri takip etmek i\u00e7in github<\/a> adresinide takip edebilirsiniz.<\/p>\n

Smidge K\u00fct\u00fcphanesiyle Harici Dosyalar\u0131n(JS, CSS) Boyutlar\u0131n\u0131 K\u00fc\u00e7\u00fcltme<\/strong>
\n\u0130lk olarak Smidge ile ilgili konfig\u00fcrasyonlar\u0131n yap\u0131lmas\u0131 gerekmektedir. Bunun i\u00e7in ‘appsettings.json’ dosyas\u0131 a\u015fa\u011f\u0131daki gibi kullan\u0131lmaktad\u0131r;<\/p>\n

\r\n{\r\n  "smidge": {\r\n    "dataFolder": "App_Data\/Smidge",\r\n    "version": 1\r\n  }\r\n}\r\n<\/pre>\n
Konfig\u00fcrasyona g\u00f6z atarsan\u0131z e\u011fer ‘dataFolder’ ile s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f ve minimize edilmi\u015f dosyalar\u0131n nerede cachelenece\u011fini belirtiyoruz. Ayr\u0131ca ‘version’ ile ilgili s\u0131k\u0131\u015ft\u0131r\u0131lm\u0131\u015f dosyalar\u0131 versiyonluyoruz.<\/p>\n
Ard\u0131ndan uygulamada Smidge’in kullan\u0131labilmesi i\u00e7in ‘Startup.cs’ dosyas\u0131ndaki ‘ConfigureServices’ metodu i\u00e7erisinde ‘AddSmidge’ servisinin \u00e7a\u011fr\u0131lmas\u0131 gerekmektedir.<\/p>\n
\r\n        public void ConfigureServices(IServiceCollection services)\r\n        {\r\n            .\r\n            .\r\n            .\r\n            services.AddSmidge(Configuration.GetSection("smidge"));\r\n            .\r\n            .\r\n            .\r\n        }\r\n<\/pre>\n
Ve hemen ard\u0131ndan ‘Configure’ metodu i\u00e7erisinde ‘UseEndpoints’ \u00fczerinde a\u015fa\u011f\u0131daki middleware’i \u00e7a\u011f\u0131r\u0131n\u0131z.<\/p>\n
\r\n        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)\r\n        {\r\n            .\r\n            .\r\n            .\r\n            app.UseSmidge(bundle =>\r\n            {\r\n                bundle.CreateJs("jsbundle", "~\/js\/islem1.js", "~\/js\/islem2.js");\r\n                bundle.CreateCss("cssbundle", "~\/css\/style1.css", "~\/css\/style2.css");\r\n            });\r\n            app.UseEndpoints(endpoints =>\r\n            {\r\n                endpoints.MapControllerRoute(\r\n                    name: "default",\r\n                    pattern: "{controller=Home}\/{action=Index}\/{id?}");\r\n            });\r\n            .\r\n            .\r\n            .\r\n        }\r\n<\/pre>\n
Bu i\u015flemler neticesinde uygulama aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131nda belirtilen JavaScript ve CSS dosyalar\u0131 bundle edilecektir.<\/p>\n
Bundle Edilmi\u015f Harici Dosyalar\u0131 Kullanma<\/strong>
\n\u0130lk olarak bundle edilmi\u015f dosyalara eri\u015febilmek i\u00e7in Smidge taghelper’\u0131n\u0131n eklenmesi gerekmektedir.<\/p>\n
\r\n@addTagHelper *, Smidge\r\n<\/pre>\n
Ard\u0131ndan harici dosyalar\u0131n bundle edilmi\u015f halleri referans g\u00f6sterilmelidir.<\/p>\n
\r\n    <link rel="stylesheet" href="cssbundle" \/>\r\n<\/pre>\n
\r\n    <script src="jsbundle"><\/script>\r\n<\/pre>\n
Uygulamay\u0131 aya\u011fa kald\u0131rd\u0131\u011f\u0131n\u0131zda a\u015fa\u011f\u0131daki gibi ilgili dosyalar\u0131n bundle edildi\u011fini g\u00f6receksiniz.
\n\"Asp.NET<\/a><\/p>\n
Solution Explorer penceresinede g\u00f6z atarsan\u0131z e\u011fer ‘App_Data’ klas\u00f6r\u00fcn\u00fcn olu\u015fturuldu\u011funu ve i\u00e7erisinde bundle edilmi\u015f dosyalar\u0131n cachelendi\u011fini g\u00f6receksiniz.
\n\"Asp.NET<\/a><\/p>\n
Smidge K\u00fct\u00fcphanesinde Debug Modu<\/strong>
\nBazen geli\u015fim s\u00fcrecinde JavaScript dosyalar\u0131n\u0131 debug edebilmek i\u00e7in bundle i\u015fleminin production ortam\u0131nda ger\u00e7ekle\u015ftirilmesini isteyebiliriz. Bunun i\u00e7in;<\/p>\n
\r\n    <environment names="Development">\r\n        <link rel="stylesheet" href="cssbundle" debug="true" \/>\r\n        <script src="jsbundle" debug="true"><\/script>\r\n    <\/environment>\r\n    <environment names="Production">\r\n        <link rel="stylesheet" href="cssbundle" \/>\r\n        <script src="jsbundle"><\/script>\r\n    <\/environment>\r\n<\/pre>\n
\u015feklinde \u00e7al\u0131\u015f\u0131lmas\u0131 yeterli olacakt\u0131r. Dikkat edilirse e\u011fer ‘Development’ ortam\u0131nda ilgili referanslar ‘debug=”true”‘ attribute’u ile i\u015faretlenmektedir. B\u00f6ylece development ortam\u0131nda debug modda script’i y\u00fckleyecek dolay\u0131s\u0131yla bundle yapmayacakt\u0131r. Lakin ‘Production’ ortam\u0131nda beklenen i\u015flemleri ger\u00e7ekle\u015ftirecek, dosyalar\u0131n boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltecektir.<\/p>\n\n\n\n\n\n
Development<\/th>\nProduction<\/th>\n<\/tr>\n<\/thead>\n
\"Asp.NET<\/a><\/td>\n\"Asp.NET<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
Ortama G\u00f6re Bundle Konfig\u00fcrasyonunun \u00d6zelle\u015ftirilmesi<\/strong>
\nYap\u0131lacak bundle operasyonunu a\u015fa\u011f\u0131daki gibi \u00f6zelle\u015ftirebilirsiniz.<\/p>\n
\r\n                bundle.CreateJs("jsbundle", "~\/js\/islem1.js", "~\/js\/islem2.js")\r\n                .WithEnvironmentOptions(Smidge.Options.BundleEnvironmentOptions.Create()\r\n                .ForDebug(builder => builder\r\n                    .EnableCompositeProcessing()\r\n                    .EnableFileWatcher()\r\n                    .SetCacheBusterType<Smidge.Cache.AppDomainLifetimeCacheBuster>()\r\n                    .CacheControlOptions(enableEtag: false, cacheControlMaxAge: 0))\r\n                    .Build());\r\n<\/pre>\n
Yap\u0131lanmay\u0131 incelersek e\u011fer;<\/p>\n
    \n
  • ForDebug<\/em>;
    \nBelirtilecek ayarlar\u0131n debug mod i\u00e7in ge\u00e7erli olaca\u011f\u0131 bildirilmektedir.\n<\/li>\n
  • EnableCompositeProcessing<\/em>;
    \nHarici dosyalar\u0131n birle\u015ftirilmesi bildirilmektedir.\n<\/li>\n
  • EnableFileWatcher<\/em>;
    \nCache’de ki bundle dosyalar\u0131n\u0131n kaynaklar\u0131n\u0131 takip etmesini ve bir de\u011fi\u015fiklik s\u00f6z konusu oldu\u011fu taktirde tekrar olu\u015fturmas\u0131 gerekti\u011fini bildirmektedir.\n<\/li>\n
  • SetCacheBusterType<\/em>;
    \nCache’in ne zaman olu\u015fturulaca\u011f\u0131n\u0131 bildirir. ‘AppDomainLifetimeCacheBuster’ nesnesi ile uygulaman\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcnde yani her aya\u011fa kald\u0131r\u0131ld\u0131\u011f\u0131nda cache’in tekrar olu\u015fturularak tazelenmesini ifade eder.\n<\/li>\n
  • CacheControlOptions<\/em>;
    \nUygulaman\u0131n cache konfig\u00fcrasyonunu ifade eder.<\/p>\n
      \n
    • enableEtag<\/em>
      \nBrowser server \u00fczerinden herhangi bir dosya \u00e7ekti\u011fi zaman server response i\u00e7erisinde bir Etag g\u00f6nderir. Token vazifesi g\u00f6ren bu Etag de\u011feri ile browser sonraki yapaca\u011f\u0131 isteklerdeki davran\u0131\u015f\u0131n\u0131 belirler. Browser, yap\u0131lan isteklerde gelen Etag de\u011ferine g\u00f6re ilgili dosyan\u0131n de\u011fi\u015fip, de\u011fi\u015fmedi\u011fini anlayacak ve b\u00f6ylece cookie’den okuyup okumayaca\u011f\u0131na karar verecektir. E\u011fer ki istek neticesinde gelen Etag bir \u00f6ncekiyle ayn\u0131 de\u011ferdeyse bu durumda 304 Status Code’u ile beraber body de\u011feri bo\u015f d\u00f6necek, ilgili dosya cache’den okunacakt\u0131r. ‘false’ de\u011feri verildi\u011fi taktirde Etag de\u011ferine bak\u0131lmaks\u0131z\u0131n ilgili dosyan\u0131n direkt olarak sunucudan \u00e7ekilmesi bildirilmi\u015f olacakt\u0131r.\n<\/li>\n
    • cacheControlMaxAge<\/em>
      \n\u0130lgili dosyan\u0131n browser cache’inde ne kadar tutulaca\u011f\u0131 saniye cinsinden bildirilmektedir.\n<\/li>\n<\/ul>\n<\/li>\n
    • Build<\/em>;
      \nBu ayarlarla t\u00fcm yap\u0131lanma in\u015fa edilmektedir.\n<\/li>\n<\/ul>\n
      G\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere Smidge k\u00fct\u00fcphanesinin debug moddaki davran\u0131\u015f\u0131n\u0131 yukar\u0131daki \u00f6zelle\u015ftirmelerle de\u011fi\u015ftirmi\u015f bulunmaktay\u0131z.<\/p>\n
      \u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
      \nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
      \n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
      Merhaba, Bu i\u00e7eri\u011fimizde Asp.NET Core MVC uygulamalar\u0131nda b\u00fcy\u00fck boyutlu JavaScript ve CSS dosyalar\u0131n\u0131n boyutlar\u0131n\u0131 k\u00fc\u00e7\u00fcltmek i\u00e7in sarmak\/kundaklamak manas\u0131na gelen bundle i\u015flemini \u00e7al\u0131\u015fma zaman\u0131nda yapmam\u0131z\u0131 sa\u011flayan Smidge k\u00fct\u00fcphanesi \u00fczerine konu\u015faca\u011f\u0131z. \u0130lk olarak Smidge k\u00fct\u00fcphanesinin temel...<\/p>\n","protected":false},"author":1,"featured_media":3014,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3102,3103],"tags":[2679,3509,3512,3513,3505,3507,3510,3511,3508,3506],"class_list":["post-15812","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-asp-net-core","category-asp-net-core-3-1","tag-asp-net-core","tag-asp-net-core-bundle","tag-asp-net-core-bundling","tag-asp-net-core-minification","tag-asp-net-core-smidge","tag-asp-net-core-smidge-kutuphanesi","tag-bundling","tag-minification","tag-smidge-bundle","tag-smidge-kutuphanesi"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/15812","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=15812"}],"version-history":[{"count":32,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/15812\/revisions"}],"predecessor-version":[{"id":15848,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/15812\/revisions\/15848"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3014"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=15812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=15812"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=15812"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}