Bundle وMinify  فایل های css و js در Asp.Net Core
Bundle وMinify فایل های css و js در Asp.Net Core

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

اما وقتی نوبت به بهینه سازی سایت و سئو می رسد تازه متوجه می شویم که هرچه تعداد فایل ها کمتر باشد سایت ما از نظر سرعت بارگذاری بهینه تر می شود. فرض کنید سایت شما 10 فایل css و 15 فایل js را داشته باشد برای بارگذاری سایت در مرورگر کلاینت فقط 25 درخواست برای دانلود این فایل ها به سرور ارسال می شود وهمین باعث می شود که زمان بارگذاری سایت به شدت بالا برود و ممکن است کاربر قبل از اینکه سایت کامل بارگذاری شود منصرف شود و از خارج شود. تعداد درخواست های و زمان بارگذازی بالا بر روی سئو نیز تاثیر منفی می گذارد و ممکن است شما را از نتایج گوگل حذف نماید.

برای ارتقا سطح دانش خود می توانید آموزش asp.net core را به صورت رایگان از باگتو دانلودکنید

منظور از bundle چیست؟

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

منظور از Minify چیست؟

Minify به معنی فشرده سازی است. در فایل های css و javascript فشرده سازی با حذف کاراکترهای غیر ضروری مانند فاصله ی بین کدها و یا کامنت ها و کوتاه کردن نام متغیرها انجام می شود. دقت کنید که فشرده سازی فایل ها نباید باعث شود عمکرد اصلی  تغییر یابد.

 

Bundle In Asp.net MVC

اگر از برنامه نویسان قدیمی Asp.Net باشید حتما به یاد دارید که در ورژن های قبل از Dot Net Core برای Bundling یک فایل به نام BundlConfig.cs وجود داشت که تمامی تنظیمات مربوط به Bundling درهمین فایل انجام می شد

 

public static void RegisterBundles(BundleCollection bundles)   

    { 

         // Bundling jQuery  

         bundles.Add(new ScriptBundle("~/bundles/jquery") 

                .Include("~/Scripts/jquery-{version}.js")); 

         bundles.Add(new ScriptBundle("~/bundles/jqueryval") 

                .Include("~/Scripts/jquery.validate*"));  

         // Bundling CSS files 

         bundles.Add(new StyleBundle("~/Content/css") 

                .Include("~/Content/site.css")); 

    }  

 

 این تنظیمات باعث می شد تمامی فایل های ما به یک فایل تبدیل شوند وکلاینت فقط یک در خواست  http برای دانلود فایل ارسال می کرد در نتیجه زمان قابل توجهی برای کاربران صرفه جویی می شد.

اما با ارائه نسخه Asp.Net Core فایل BundlConfig.cs نیز حذف شد و ما باید راه حل دیگری برای بسته بندی و فشرده سازی فایل های css  و js پیدا می کردیم.

 

استفاده از Gulp و Grunt برای بسته بندی و فشرده سازی

Asp.Net Core به صورت ماژولار ارائه شد و برای سبکتر شدن این نسخه بسیاری از ویژگی های آن از جملهBundling که در خود Asp به صورت توکار وجود داشت حذف شد و به ابزارهایی مانند Gulp و Grunt واگذار شدند.

Gulp و Grunt  ابزارهایی مبتنی بر جاوا اسکریپت هستند این ابزارها به راحتی با Asp.Net Core ادغام می شوند و برای انجام کارهایی مانند بسته بندی و فشرده سازی فایل ها می توانیم از آنها استفاده کنیم.

این  ابزارها  کار bundle وMinify را به خوبی انجام می دهند، اما این کتابخانه ها مبتنی بر جاوا اسکریپت هستند و کار کردن با این ابزارها برای کسانی که تسلط کافی به جاوا اسکریپت ندارند آسان نیست. و ما باید دنبال یک راه حل ساده تری باشیم.

 

استفاده از ابزار Bundler & Minifier برای بسته بندی و فشرده سازی

این ابزاربر روی ویژوال استادیو نصب می شود و بدون حتی نوشتن یک خط  کد می توانید بسته بندی و فشرده سازی فایل های خود را انجام دهید. این ابزاررا می توانید ازسایت marketplace.visualstudio.comدانلود کنید.

ویژگی هایی که این ابزار ارائه میدهد:

  • بسته بندی فایل های  CSS, JavaScript, HTML در یک فایل.

  • پشتیبانی از الگوهای Globbing

  • پشتیبانی از MS Build برای سناریوهای Continuous Integration

  • فشرده سازی فایل های JavaScript, CSS, HTML را به صورت جداگانه .

  • شخصی سازی تنظیمات فشرده سازی برای هر زبان قابل انجام است.

  • نمایش watermark در فایل های ایجاد شده پس از باز کردن هر فایل.

  • پشتیبانی از خط فرمان

  • میانبری برای بروزرسانی همه  Bundleها در  Solution

  • تبدیل به Gulp

      در ادامه هر کدام از این موارد و نحوه کار آنها به صورت کامل توضیح میدهم.

1- بسته بندی فایل ها

درSolution Explorer بر روی دو یا چندین فایل Css و یا JS کلیک راست کنید. بر روی گزینه ی Bundler & Minifier کلیک کنید و سپس گزینه Bundle And Minify File رو انتخاب کنید، سپس پنجره ذخیره فایل برای شما باز میشود که مسیر و نام فایل بسته بندی شده را از شما می گیرد و سپس فایل ایجاد می شود.

 bundle کردن فایل های css and js در asp.net core 3

 

همزمان با این کار یک فایل با نام  bundleconfig.json در ریشه پروژه ایجاد می شود که در ادامه این فایل را بیشتر توضیح می دهیم.

2- فشرده سازی فایل ها

برای فشرده سازی فایل ها بر روی فایل در Solution Explorer کلیک راست کنید و گزینه ی Bundle & Minifier و سپس گزینه ی Minify File را بزنید.

 فشرده سازی minify فایل های css یا js در asp.net core 3

بعد از انجام این کار یک فایل فشرده شده در زیر مجموعه همان فایل اصلی ایجاد می شود. برای مثال پس از فشرده سازی فایل  MyCss.cssفایل جدیدی با نام MyCss.min.css در زیر مجموعه این فایل ایجاد می شود که می توانید از آن استفاده کنید.

3- بسته بندی خودکار پس از هر build

فایل­ های اصلی ما همیشه در حال تغییر و به ازای هر تغییر فشرده­ سازی این فایل­ ها کار خسته کننده ای است و حتی ممکن است فراموش کنیم این کار را انجام بدهیم. برای حل این مشکل راه حلی ارائه شده است که با فعال­سازی گزینه بسته بندی خودکار پس از هر build از پروژه تمامی فایل­ های انتخاب شده در فایل bundleconfig.json بسته بندی و فشرده سازی می شوند. برای فعال کردن این کار باید در solution Explorer بر روی فایل bunfleconfig.json کلیک راست کنیم و پس از انتخاب گزینه bundle & minify گزینه  Enable bundle on build را فعال کنیم.

 

 bundle خودکار بعد از build در asp.net core 3

 

پس از انتخاب این گزینه پنجره زیر برای ما نمایش داده می­شود که به ما می گویدبرای فعال­سازی این گزینه باید کتابخانه BuildBundlerMinifier را از nuget دریافت و بر روی پروژه نصب نمایید.

 

  نصب کتابخانه BuildBundllerMinifier در asp.net core 3

 

پس از نصب این کتابخانه  فایل هایی که قبلا bundle کرده­ اید با هر بار buildکردن پروژه این فایل­ ها نیز دوباره bundleیا بسته­ بندی می­شوند.

4- دسترسی سریع به بروزرسانی فایل های بسته بندی شده

در منوی Build گزینه جدیدی به نام Update All Bundle اضافه شده است که با انتخاب این گزینه کار بروزرسانی فایل های bundle شده انجام می شود.

 

 update all bundles in asp.net core 3

 

5- فایل bundleconfig.json

همانطور که ملاحظه کردید پس از نصب و استفاده از ابزار Bundler & Minifier یک فایل با نام bunleconfig.json به ریشه پروژه اضافه شد که برای پیکربندی کلیه bundle ها از آن استفاده می شود.

در زیر یک مثال از این فایل را  می­زنیم :

 

[

  {

    "outputFileName": "wwwroot/css/bugeto.min.css",

    "inputFiles": [

      "wwwroot/Themplate/assets/vendor/perfect-scrollbar.css",

      "wwwroot/Themplate/assets/vendor/fix-footer.css",

      "wwwroot/Themplate/assets/css/material-icons.css",

      "wwwroot/Themplate/assets/css/fontawesome.css",

      "wwwroot/Themplate/assets/css/preloader.css"

    ]

  },

  {

    "outputFileName": "wwwroot/js/bugeto.min.js",

    "inputFiles": [

      "wwwroot/js/site.js",

      "wwwroot/Themplate/assets/vendor/jquery.min.js",

      "wwwroot/Themplate/assets/vendor/popper.min.js",

      "wwwroot/Themplate/assets/vendor/bootstrap.min.js",

    ],

    "minify": {

      "enabled": true

    },

    "sourceMap": false

  }

]

 

بررسی گزینه های bundleconfig.json 

  • outputFileName: نام و مسیر فایل پس از بسته بندی است، در واقع تمامی فایل ها پس از ادغام در این فایل به صورت یکجا ذخیره می شوند. این گزینه اجباری است و حتما باید مشخص شود.

  • inputFiles: دراین قسمت یک آرایه از فایل ها را می نویسیم و تمام این فایل ها تبدیل به یک فایل که در outputFileName مشخص شده است ذخیره می شوند. در این قسمت از الگوی های globbing نیز می توانیم استفاده کنیم.

  • Minfy: در اینجا مشخص می­ کنیم که به همراه بسته بندی فایل ها فشرده ­سازی هم انجام شود. اگر این گزینه را مشخص نکنیم به صورت پیش فرض فعال است و فشرده سازی انجام می شود.

 

اگر خودتان به صورت دستی فایل bundleconfig.json را ایجاد کنید و پیکربندی های لازمه را انجام دهید و کتابخانه BiuldBundeMinifier را هم از nugget نصب کنید عملیات بسته بندی و فشرده سازی هم پس از هر build انجام می شود.

 

اهمیت سرعت بارگذاری سایت

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

برای الگوریتم های گوگل سرعت بارگذاری سایت اهمیت دارد و یکی از فاکتورهای گوگل برای امتیاز دهی به سایت ها سرعت بارگذاری صفحات است و اگر سایت شما به کندی بارگذاری شود شما از نتایج گوگل حذف می شوید.

تگ‌ها
اشتراک
4 نظرات
  • عکس پروفایل Alireza در سایت باگتو
  • |
  • ارسال شده توسط : Alireza
  • |
  • زمان : 1399/10/24

سلام 

با تشکر از مطلب خوبی ک گذاشتید.

توی Layout باید output file رو استفاده کنیم؟چون توی mvc اسم bundle  رو میذاشتیم.

 

سلام

بله


  • عکس پروفایل Alireza در سایت باگتو
  • |
  • ارسال شده توسط : Alireza
  • |
  • زمان : 1399/10/23

سلام 

با تشکر از مطلب خوبی ک گذاشتید.

توی Layout باید output file رو استفاده کنیم؟چون توی mvc اسم bundle  رو میذاشتیم.

 


  • عکس پروفایل رضا در سایت باگتو
  • |
  • ارسال شده توسط : رضا
  • |
  • زمان : 1399/03/01

سلام

عالی بود این مقاله

بعد از چند روز درگیری با کمک این مقاله تونستم مشکلم رو رفع کنم


  • عکس پروفایل فاطمه در سایت باگتو
  • |
  • ارسال شده توسط : فاطمه
  • |
  • زمان : 1399/02/19

باسلام و ممنون از شما ، خیلی خوب بود



برای ارسال نظر باید وارد حساب کاربری خود شوید
ورود به حساب کاربری ثبت نام