در کد نویسی تمیز توصیه می شود که هر فایل حداکثر یک کلاس را داشته باشد و در هر فایل تنها یک کار را انجام دهیم و بهتر است که برنامه ای داشته باشیم با تعداد فایل بیشتری اما هر فایل تعداد خیلی کمی کد در آن نوشته شده باشد وهرچه جداسازی فایل ها بیشتر باشد توسعه و نگهداری آن هم راحت تر است. اگر سری به سایت های خرید و فروش قالب بزنید و چند نمونه را دانلود کنید متوجه می شوید که هر قالب ده ها فایل 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 رو انتخاب کنید، سپس پنجره ذخیره فایل برای شما باز میشود که مسیر و نام فایل بسته بندی شده را از شما می گیرد و سپس فایل ایجاد می شود.
همزمان با این کار یک فایل با نام bundleconfig.json در ریشه پروژه ایجاد می شود که در ادامه این فایل را بیشتر توضیح می دهیم.
2- فشرده سازی فایل ها
برای فشرده سازی فایل ها بر روی فایل در Solution Explorer کلیک راست کنید و گزینه ی Bundle & Minifier و سپس گزینه ی Minify File را بزنید.
بعد از انجام این کار یک فایل فشرده شده در زیر مجموعه همان فایل اصلی ایجاد می شود. برای مثال پس از فشرده سازی فایل MyCss.cssفایل جدیدی با نام MyCss.min.css در زیر مجموعه این فایل ایجاد می شود که می توانید از آن استفاده کنید.
3- بسته بندی خودکار پس از هر build
فایل های اصلی ما همیشه در حال تغییر و به ازای هر تغییر فشرده سازی این فایل ها کار خسته کننده ای است و حتی ممکن است فراموش کنیم این کار را انجام بدهیم. برای حل این مشکل راه حلی ارائه شده است که با فعالسازی گزینه بسته بندی خودکار پس از هر build از پروژه تمامی فایل های انتخاب شده در فایل bundleconfig.json بسته بندی و فشرده سازی می شوند. برای فعال کردن این کار باید در solution Explorer بر روی فایل bunfleconfig.json کلیک راست کنیم و پس از انتخاب گزینه bundle & minify گزینه Enable bundle on build را فعال کنیم.
پس از انتخاب این گزینه پنجره زیر برای ما نمایش داده میشود که به ما می گویدبرای فعالسازی این گزینه باید کتابخانه BuildBundlerMinifier را از nuget دریافت و بر روی پروژه نصب نمایید.
پس از نصب این کتابخانه فایل هایی که قبلا bundle کرده اید با هر بار buildکردن پروژه این فایل ها نیز دوباره bundleیا بسته بندی میشوند.
4- دسترسی سریع به بروزرسانی فایل های بسته بندی شده
در منوی Build گزینه جدیدی به نام Update All Bundle اضافه شده است که با انتخاب این گزینه کار بروزرسانی فایل های bundle شده انجام می شود.
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 ثانیه سرعت بارگذاری طول بکشد کاربر تصمیم به ترک سایت گرفته و ممکن است به صفحه جستجوی گوگل بازگردد و سایت های رقیب را برای دریافت خدمات انتخاب کند. اکثر کاربران هم به ندرت مجددا برای دریافت خدمات از سایتی که به کندی بارگذاری می شود باز می گردنند.
برای الگوریتم های گوگل سرعت بارگذاری سایت اهمیت دارد و یکی از فاکتورهای گوگل برای امتیاز دهی به سایت ها سرعت بارگذاری صفحات است و اگر سایت شما به کندی بارگذاری شود شما از نتایج گوگل حذف می شوید.
برای افزودن دیدگاه خود، نیاز است ابتدا وارد حساب کاربری‌تان شوید