www.dntips.ir
مطالب ۳۶۹۴
نویسندگان ۲۷۶
گروه‌های مطالب ۱۰۲۴
نقشه‌های راه ۱۱۹
دوره‌ها ۱۴
اشتراک‌ها ۱۷۹۱۴
عنوان:

‫تغییرات بوجود آمده در Bundling and Minification -MVC4


نویسنده: شهروز جعفری
تاریخ: ۱۳۹۱/۰۴/۰۶ ۰:۲
آدرس: www.dntips.ir
همانطور که در پست قبلی اشاره کردم نسخه جدید MVC با تغییرات جهت بهبود کاربری همراه بوده است.
در این پست قصد دارم شما رو با ویژگی جدید  Bundling and Minification بر روی فایلهای  Css و JavaScript آشنا کنم.اگر یک پروژه جدید به وسیله MVC 4 ابجاد کنید شاهد تغییراتی بر روی فایلهای _Layout.cshtml and Global.asax.cs خواهید بود.این تغییر شامل اضافه شدن System.Web.Optimization and BundleTable.Bundles به  Layout.cshtml است.
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")"rel="stylesheet" type="text/css" />

<link href="@System.Web.Optimization.BundleTable. Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />

<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script> 
که این Reference ها به عنوان Html Helper ساده هستند.
اگر به کدهای HTML  مرورگر خود نگاه کنید شاهد کدهای زیر خواهید بود.
 <link href="/Content/css?v=ji3nO1pdg6VLv3CVUWntxgZNf1z" rel="stylesheet" type="text/css" />
<link href="/Content/themes/base/css?v=UM624qf1uFt8dYti" rel="stylesheet" type="text/css" />
<script src="/Scripts/js?v=4h5lPNUsLiFoa0vqrItjS2Jp"></script>
که این به معنی فشرده شدن و همچنین باعث میشود اطلاعات ارسالی از IIS Web Server کمتر باشد.
برای استفاده از این ویژگی می‌بایست در Global.asax.cs  در قسمت  Application Startup متد زیر را اضافه کنیم.
BundleTable.Bundles.RegisterTemplateBundles();
برای ساختن Bundle سفارشی به صورت extension method  به صورت زیر عمل میکنیم.
public static void EnableBootstrapBundle(this BundleCollection bundles) {
      var bootstrapCss = new Bundle("~/bootstrap/css", new CssMinify());
      bootstrapCss.AddFile("~/css/bootstrap.css");
      bootstrapCss.AddFile("~/css/bootstrap-responsive.css");
      bootstrapCss.AddFile("~/css/application.css");
      bootstrapCss.AddFile("~/css/prettify.css");

      bundles.Add(bootstrapCss);

      var bootstrapJs = new Bundle("~/bootstrap/js", new JsMinify());
      bootstrapJs.AddFile("~/js/jquery-1.7.1.js");
      bootstrapJs.AddFile("~/js/bootstrap.js");
      bootstrapJs.AddFile("~/js/prettify.js");

      bundles.Add(bootstrapJs);
}
 در مثال بالا CssMinify وJsMinify برای مشخص شدن نوع فشرده سازی ما استفاده شده است.
برای استفاده از این ویژگی می‌بایست در Global.asax.cs  در قسمت  Application Startup متد زیر را اضافه کنیم.
BundleTable.Bundles.EnableBootstrapBundle();
و در فایل Layout.cshtm همانند مثال قبلی کد زیر را اضافه میکنیم.
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bootstrap/css")" rel="stylesheet">
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bootstrap/js")"></script>
و اگر دوباره به کد تولیدی در مرورگر نگاهی بیاندازیم:
<link href="/bootstrap/css?v=uBlJsuIAGAF93nUTTez8" rel="stylesheet">
<script src="/bootstrap/js?v=O6HaHC8QqtB"></script>
.میتونه تنها ایرادش باشه   CDN عدم پشتیبانی از 
.البت شاید من نتونستم راهی براش پیدا کنم
کار اضافه ای قرار نیست انجام دهیم همه اینها به صورت توکار اعمال میشوند. 
 به طور خلاصه میشه گفت ویژگی بالا به بهبود عملکرد برنامه شما کمک زیادی میکنه.
مطالب مشابه

نظرات

  • مهمان در ۱۳۹۱/۰۴/۰۶ ۸:۱۲

    سلام دوست عزیز

    به نظر من یکی از ایرادهای این فشرده سازی عدم استفاده expiretion و عدم اغمال تنظیمات http response header هست که به دلیل تغییر نام این فایلها ،آنها روی کامپیوتر کاربر کش نمیشن. به نظرم بهتر بود عمل فشرده سازی که انجام میشد فایلی با همان نام و تنظیمات سمت کاربر فرستاده میشد. این کار در سایتهایی با تعداد درخواست بالا میتونه بار سنگینی به سرور تحمیل کنه

    موفق باشید

    • وحید نصیری در ۱۳۹۱/۰۴/۰۶ ۸:۲۲
      اینطور نیست. مطابق مستندات رسمی آن ، HTTP Expires Header به مدت یکسال بر روی منابع تولیدی تنظیم می‌شود (و مرورگر مرتبا درخواست دریافت این منابع را نمی‌دهد). اینجا است که نیاز به غیرمعتبر کردن کش نیز وجود خواهد داشت. بنابراین در انتهای لینک تولیدی اگر دقت کرده باشید css?v=something وجود دارد. این v به معنای نگارش است. اگر این نگارش که به صورت خودکار بر اساس هش فایل‌ها تولید می‌شود تغییر کند، مرورگر کش خود را به روز خواهد کرد.
      ضمن اینکه در اینجا قرار نیست فایلی یا فایل‌هایی با همان نام‌های اصلی ارسال شوند. به این دلیل که هدف اصلی این کار bundling، کم کردن تعداد درخواست‌ها به سرور نیز هست. برای مثال اگر سایت شما از 8 فایل اسکریپت استفاده می‌کند، در اینجا تبدیل به یک فایل خواهد شد که سبب کم شدن تعداد درخواست‌ها و سریع‌تر شدن نمایش صفحات می‌شود.
      • مهمان در ۱۳۹۱/۰۴/۰۶ ۸:۵۷

        ممنونم آقای نصیری. امکان استفاده از این قابلیت در asp.net web form  هست؟برای اینکه این هش عوض بشه ما باید اسم فایل رو تغییر بدیم و ورژن بزنیم؟ یا اینکه با توجه به محتوا این اتفاق میفته؟

        با تشکر

        • وحید نصیری در ۱۳۹۱/۰۴/۰۶ ۹:۳
          - با توجه به محتوای فایل هست و این محاسبات فقط بر اساس درخواست مرورگر انجام می‌شود. یعنی هربار به ازای نمایش صفحات این کارها و محاسبات صورت نمی‌گیرد و اگر کش شده باشد (که شده برای یکسال)، اصلا فشاری به سرور وارد نمی‌شود چون مرورگر برای موارد کش شده درخواست جدیدی را به سرور ارسال نمی‌کند.
          - نگارش تولیدی بر اساس هش محتوای فایل محاسبه می‌شود به صورت خودکار.
          - در وب فرم‌ها هم این قابلیت مدتی هست که وجود دارد: (^)
  • بهروز راد در ۱۳۹۱/۰۴/۰۶ ۹:۱۸
    این مقاله مربوط به ASP.NET MVC 4 نسخه‌ی Beta هست. در نسخه‌ی RC، تغییراتی در نحوه‌ی استفاده از Bundles و Minification صورت گرفته. مثلاً متد ذیل منسوخ شده.

    BundleTable.Bundles.RegisterTemplateBundles();
    و متد ذیل به جای اون قرار گرفته:
    BundleConfig.RegisterBundles(BundleTable.Bundles);

    یا به جای دستور System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl، از Styles.Render و Scripts.Render استفاده میشه.
  • شهروز جعفری در ۱۳۹۱/۰۴/۰۶ ۱۰:۵۴
    حق با آقای راد هستش برای اضافه کردن اسکریپت میشه به شکل زیر عمل کرد:
     public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-1.*"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
          "~/Content/themes/base/jquery.ui.core.css",
          "~/Content/themes/base/jquery.ui.resizable.css",
          "~/Content/themes/base/jquery.ui.selectable.css",
          "~/Content/themes/base/jquery.ui.accordion.css",
          "~/Content/themes/base/jquery.ui.autocomplete.css",
          "~/Content/themes/base/jquery.ui.button.css",
          "~/Content/themes/base/jquery.ui.dialog.css",
          "~/Content/themes/base/jquery.ui.slider.css",
          "~/Content/themes/base/jquery.ui.tabs.css",
          "~/Content/themes/base/jquery.ui.datepicker.css",
          "~/Content/themes/base/jquery.ui.progressbar.css",
          "~/Content/themes/base/jquery.ui.theme.css"));
}
    که در نسخه 4 3 تا ویژگی داره:
    1. اگر فایل   FileX.min.js  و همچنینن فایل  FileX.js موجود باشد  .min را انتخاب می‌کند
    2. برای دیباگ کردن فایل اصلی را انتخاب میکند.( FileX.js )
    3. از فایلهای  -vsdoc صرف نظر میکند.چون فقط جهت استفاده از  IntelliSense هستند.
    به صورت زیر نیز میتوان عمل کرد.
        @Styles.Render("~/Content/themes/base/css", "~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    فقط باید توجه داشت که زمانی که به عنوان مثال به روش زیر اضافه می‌کنیم
    Include("~/Scripts/Common/*.js")
    چون از طریق حروف الفبا برای ما فایلها را لود میکند( ترتیب مهم است نه حروف الفبا)ممکن است به مشکل بر بخوریم.
    • امیرحسین جلوداری در ۱۳۹۱/۰۴/۰۶ ۲۰:۳۳
      اگه اینایی که فرمودینو ،  تو مقاله‌ی اصلیم اعمال کنین به نظرم خیلی بهتره ! 
      با تشکر ...
  • مهمان در ۱۳۹۱/۱۲/۱۱ ۳:۳۵
    با سلام 
    من برای استفاده از فایل‌های CSS از Styles.Render  استفاده میکنم . وقتی توی VS برنامه را اجرا میکنم کاملا درست جواب میدهد اما وقتی publish میکنم روی IIS  هیچکدام از فایل‌ها load نمیشود (توسط browser بارگذاری نمیشود) اما وقتی فایل‌ها را به صورت    <link href="~/Content/themes/blue/Site.css" rel="stylesheet" type="text/css" />
    استفاده میکنم ، بعد از publish  درست عمل می‌کند ! مشکل چیست ؟
    ممنون میشوم اگر راهنمایی بفرمائید
    • وحید نصیری در ۱۳۹۱/۱۲/۱۱ ۹:۴۱
      من برای کارهای خودم از روش مطرح شده در مطلب ارتقاء به MVC4 استفاده می‌کنم.
  • صابر فتح الهی در ۱۳۹۲/۱۱/۲۶ ۱۸:۲۴
    سلام
    یکی از ایراداتی که از آنالیز محتویات سایت گرفته می‌شود وجود کوئیری استرینگ در آدرس‌های موجود در صفحه است (از نظر سئو)، زمانی که از تکنیک باندلینگ استفاده می‌شود چگونه می‌توان از اضافه شدن این کوئیری استرینگ جلوگیری کرد (از فلسفه وجودی این کوئیری استرینگ در سیستم بندلینگ اطلاع دارم)
    • وحید نصیری در ۱۳۹۲/۱۱/۲۶ ۱۹:۱

      گوگل محتوای فایل‌های جاوا اسکریپت لینک شده به صفحه را نمی‌خواند. اینجا آزمایش شده 

      • صابر فتح الهی در ۱۳۹۲/۱۱/۲۷ ۰:۲۸
        بله حق با شماست محتویات نمی‌خونه اما این لینک‌های و آدرس‌ها تاثیر منفی میذاره مثلا خروجی زیر از این سایت گرفته شده است.


        • وحید نصیری در ۱۳۹۲/۱۱/۲۷ ۰:۳۴
          در مورد سرعت صفحه عنوان کرده و گفته ممکن است URLهای دارای کوئری استرینگ در بعضی از کش سرورها، کش نشوند. این مورد قابل اندازه گیری و بررسی است. یعنی مطلب فوق صرفا یک حدس و گمان است که ممکن است درست باشد یا خیر.