ASP.NET MVC Bundle İşlemleri

  • 04.02.2016 17:55
  • ASP.Net
  • 3586

Bundle tekniğini MVC projelerimizde sayfalarımızın yüklenme sürelerini daha iyi sürelere çekmek için kullanabiliriz. MVC Bundle, projemizdeki birden fazla CSS dosyasını tek bir dosya haline getirerek request sayısınız azaltmaktadır. Böylece hem sayfa yüklenme hızımız azalacak, hem de sitemiz seo konusunda da iyi bir yol katetmiş olacaktır. Sitemiz ne kadar az istekte bulunursa o sayfa yüklenme süremiz o kadar iyi bir hale gelecektir.

Bundle işlemleri projemizin App_Start klasörü içerisinde bulunan BundleConfig.cs dosyasında gerçekleşmektedir. Bundle işlemi için BundleConfig dosyasındaki RegisterBundle metodunda bundles.Add metodunu kullanırız.

using System.Web;
using System.Web.Optimization;

namespace Blog {
    public class BundleConfig {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles) {

        

            bundles.Add(new StyleBundle("~/Content/css/style").Include(
                                        "~/Content/css/font-awesome.min.css",
                                        "~/Content/css/bootstrap.min.css",
                                        "~/Content/css/owl.carousel.css",
                                        "~/ckeditor/plugins/codesnippet/lib/highlight/styles/default.css",
                                        "~/Content/css/main.css"));
            
        }
    }
}

Yukarıdaki kodda ilk önce "/Content/css/style" adında bir fake sanal dosya oluşturuyorum. Ve daha sonra bu dosya içerisine, sitemde kullanmak istediğim css dosyalarımı projemdeki sırasıyla include ediyorum. Dosya ekleme işlemi bu kadar. Son olarak aşağıdaki kod ile oluşturmuş olduğum sanal dosyayı nerede kullanacaksam (genelde _Layout.cshtml dosyası) o dosyada render ediyorum. Aşağıdaki kod satırı benim Layout dosyamda bulunmaktadır.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-control" content="public">
    <title>@ViewBag.Title</title>
    <meta name="description" content="@ViewBag.Description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    @Styles.Render("~/Content/css/style")
</head>
<body>
    @Html.Partial("/Views/Shared/Header.cshtml")
    @RenderBody()
    @Html.Partial("/Views/Shared/Footer.cshtml")
</body>
</html>

Yukarıdaki kodda görmüş olduğunuz @Styles.Render satırı ile oluşturmuş sanal dosya yolunu sayfamıza eklemiş oluyoruz.

Siz de düşüncelerinizi yazabilirsiniz:

;