شهروز جعفری شهروز جعفری
تغییرات بوجود آمده در Bundling and Minification -MVC4
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه
همانطور که در پست قبلی اشاره کردم نسخه جدید 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 عدم پشتیبانی از 
.البت شاید من نتونستم راهی براش پیدا کنم
کار اضافه ای قرار نیست انجام دهیم همه اینها به صورت توکار اعمال میشوند. 
 به طور خلاصه میشه گفت ویژگی بالا به بهبود عملکرد برنامه شما کمک زیادی میکنه.
‫۱۲ سال و ۳ ماه قبل، سه‌شنبه ۶ تیر ۱۳۹۱، ساعت ۰۴:۳۲
۴۵۰۶
۱۳
MVC
مطالب مشابه
  • #
    مهمان مهمان
    ‫۱۲ سال و ۳ ماه قبل، سه‌شنبه ۶ تیر ۱۳۹۱، ساعت ۱۲:۴۲

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

    به نظر من یکی از ایرادهای این فشرده سازی عدم استفاده 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های دارای کوئری استرینگ در بعضی از کش سرورها، کش نشوند. این مورد قابل اندازه گیری و بررسی است. یعنی مطلب فوق صرفا یک حدس و گمان است که ممکن است درست باشد یا خیر.