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

Bundling and Minifying Inline Css and Js


نویسنده: م کریمی
تاریخ: ۱۳۹۲/۰۳/۲۳ ۱۷:۵
آدرس: www.dntips.ir
افزایش Performance یک سایت از موارد بسیار مهمی است که هر برنامه نویسی باید به آن توجه ویژه‌ای داشته باشد و در این زمینه لینک Best Practices می‌تواند بسیار کاربردی باشد. 
حال در این پست قصد داریم Style‌ها و Js‌های نوشته شده در سطح هر View را با Bundling and Minifying در Asp.Net MVC 4 بهینه نماییم .
در ابتدا با استفاده از  Nuget پکیج BundleMinifyInlineJsCss  را به پروژه MVC خود مطابق شکل زیر اضافه می‌نماییم .  

در مرحله بعدی کلاسی را با نام BundleMinifyingInlineCssJSAttribute ایجاد کرده و با ارث بردن از کلاس ActionFilterAttribute متد OnActionExecuting را override می‌نماییم . اکنون کلاس ما به شکل زیر است :
using System.Web;
using System.Web.Mvc;
using BundlingAndMinifyingInlineCssJs.ResponseFilters;
namespace UILayer.Filters
{
    public class BundleMinifyingInlineCssJSAttribute : ActionFilterAttribute
    {
        public override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            filterContext.HttpContext.Response.Filter = new BundleAndMinifyResponseFilter(filterContext.HttpContext.Response.Filter);
        }
    }
}
و برای استفاده می‌توانیم بالای کنترلر خود کد زیر را اضافه نماییم .
[BundleMinifyingInlineCssJS]
    public partial class HomeController : Controller
    {
}
در ادامه پروژه را اجرا می‌کنیم. Style‌ها و Js‌های نوشته شده در سطح هر View به صورت زیر در می‌آیند.

مطالب مشابه

نظرات

  • محسن خان در ۱۳۹۲/۰۳/۲۴ ۱۱:۲۶

    با تشکر از این نکته جدید.

    به نظر من اگر فشرده سازی Response فعال باشه اصلا نیازی به حذف فواصل خالی در HTML نهایی نیست. چون حداقل کاری رو که الگوریتم‌های فشرده سازی خوب انجام می‌دن، مدیریت فضاهای خالی است.

    شاید بد نباشه به صورت یک کار تحقیقی بررسی بشه که اگر فشرده سازی رو فعال کردیم چند درصد روی حجم دریافتی تاثیر داره. اگر روش حذف فضاهای خالی رو بدون فشرده سازی اعمال کردیم، چند درصد فرقش هست.

    • م کریمی در ۱۳۹۲/۰۳/۲۵ ۷:۵۹
      با سلام 
      دقیقا این همین کاریه که دارم آزمایش می‌کنم بعد از جمع آوری داده‌ها به اشتراک می‌زارم 
    • ایلیا اکبری فرد در ۱۳۹۲/۰۴/۲۷ ۱۷:۳۲
      با سلام. نحوه فشرده سازی response به چه صورت است؟ با تشکر.
      • وحید نصیری در ۱۳۹۲/۰۴/۲۷ ۱۸:۲
        یک نمونه در اینجا ارسال شده
  • مهمان در ۱۳۹۲/۰۴/۲۸ ۱۲:۵۷
    سلام ، مرسی از مطالب خوبتون
    بحث Optimization در لینک زیر کاملتر بررسی شده، البته مطلب شما برایم تازگی داشت.
    http://go.microsoft.com/fwlink/?LinkId=254725

    نکاتی که میشه گفت
    در وب فرم هم قابل استفاده است
    برای single download کردن فایل‌های css و js دو روش وجود دارد:
    1. تنظیم debug=false در بخش compilation در فایل Web.config
    2. نوشتن کد زیر در کلاسی که باندل‌های خود را در bundleTable درج می‌کنید.
    BundleTable.EnableOptimizations = true
    برای نصب آن با NuGet Package، در کنسول عبارت زیر را وارد کنید
     install-package Microsoft.AspNet.Web.Optimization
    که با نصب آن، 4 کتابخانه به reference‌های پروژه اضافه می‌شود.
    تفاوتی که در script‌ها ایجاد می‌کند می‌توان به حذف کردن description ها، تغییر در variable‌ها ، و min کردن js‌های شما اشاره کرد.
    موفق باشید.