آموزش Bundle و Minify در asp.net core

Bundle و Minify دو تکنیک اساسی در بهینه‌سازی وب‌سایت‌ها و برنامه‌های وب هستند. با کاهش تعداد درخواست‌های HTTP و حجم فایل‌های استاتیک، به بهبود عملکرد، کاهش مصرف پهنای باند، و افزایش رضایت کاربران کمک می‌کنند. این تکنیک‌ها به طور گسترده‌ای در پروژه‌های طراحی سایت استفاده می‌شوند تا سرعت و کارایی صفحات وب را بهبود بخشند.

Bundle چیست؟

Bundle – باندل به فرایند ترکیب چندین فایل از یک نوع (معمولاً CSS یا JavaScript) به یک فایل واحد اشاره دارد. به عنوان مثال، فرض کنید که یک وب‌سایت دارای چندین فایل CSS و JavaScript است. در هنگام بارگذاری صفحه، هر یک از این فایل‌ها نیاز به یک درخواست HTTP جداگانه دارد. این درخواست‌های متعدد می‌توانند زمان بارگذاری صفحه را افزایش دهند.

با استفاده از Bundle، همه فایل‌های CSS یا JavaScript به یک فایل واحد ترکیب می‌شوند. در نتیجه، تعداد درخواست‌های HTTP کاهش می‌یابد، که این موضوع به کاهش زمان بارگذاری صفحه منجر می‌شود.

Minify چیست؟

Minify به فرایند حذف کاراکترهای غیر ضروری از کدهای CSS، JavaScript یا HTML اشاره دارد، بدون اینکه عملکرد آن کدها تغییر کند. این کاراکترهای غیر ضروری شامل فضاهای خالی، کامنت‌ها، و خطوط اضافی هستند.

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

اهمیت Bundle و Minify

هر دو تکنیک Bundle و Minify به بهبود عملکرد وب‌سایت‌ها کمک می‌کنند، اما به روش‌های مختلف:

• بهبود سرعت بارگذاری صفحه: Bundle تعداد درخواست‌های HTTP را کاهش می‌دهد، که منجر به کاهش زمان بارگذاری صفحه می‌شود. Minify اندازه فایل‌ها را کاهش می‌دهد، که باعث می‌شود مرورگر فایل‌ها را سریع‌تر دانلود کند.
• کاهش مصرف پهنای باند: Minify کردن فایل‌ها به کاهش حجم داده‌هایی که مرورگر باید دانلود کند کمک می‌کند. این موضوع به کاهش مصرف پهنای باند کمک می‌کند، که به خصوص برای کاربران با اینترنت کند اهمیت دارد.
• بهبود تجربه کاربری: کاهش زمان بارگذاری صفحه و بهبود عملکرد کلی وب‌سایت، تجربه کاربری را بهبود می‌بخشد. کاربران وب‌سایت‌هایی که سریع‌تر بارگذاری می‌شوند، تمایل بیشتری به ماندن و تعامل با محتوا دارند.
• بهینه‌سازی برای موتورهای جستجو (SEO): موتورهای جستجو، مانند گوگل، سرعت بارگذاری صفحه را به عنوان یکی از عوامل رتبه‌بندی در نظر می‌گیرند. بهینه‌سازی با استفاده از Bundle و Minify می‌تواند به بهبود رتبه‌بندی در نتایج جستجو کمک کند.

نحوه Bundle و Minify کردن در asp.net core

• نصب اکستنشن Bundler & Minifier 2022 : برای نصب این اکستنشن از منوی extensions گزینه Manage extensions را انتخاب کنید. در صفحه جدید در تب Browse نام Bundler & Minifier 2022 را سرچ کنید. و اکستنشن Bundler & Minifier 2022 را نصب کنید. توجه داشته باشید باید نرم افزار VisualStudio را ببندید تا extension نصب شود.

نصب اکستنشن Bundler & Minifier 2022

نصب اکستنشن Bundler & Minifier 2022

• ایجاد فایل bundleconfig.json : بعد از نصب پکیج، شما باید یک فایل به نام bundleconfig.json در ریشه پروژه خود ایجاد کنید. این فایل شامل تنظیمات مربوط به Bundle و Minify است. برای مثال، یک فایل ساده bundleconfig.json می‌تواند به شکل زیر باشد:

[
{
"inputFiles": [
"wwwroot/lib/bootstrap/dist/css/bootstrap.rtl.min.css",
"wwwroot/css/site.css",
"Views/Shared/_Layout.cshtml.css"
],
"outputFileName": "wwwroot/ClientBundel/site.min.css",
"minify": {
"enabled": true,
"adjustRelativePaths": true,
"gzip": true,
"commentMode": "none"
},
"includeInProject": true
},
{
"inputFiles": [
"wwwroot/lib/jquery/dist/jquery.min.js",
"wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.min.js",
"wwwroot/js/site.js"
],
"outputFileName": "wwwroot/ClientBundel/site.min.js",
"minify": {
"enabled": true,
"gzip": true,
"commentMode": "all"
},
"includeInProject": true
}
]

• آبجکت outputFileName : مسیر فایل خروجی Bundle و Minify شده است.
• آبجکت inputFiles : لیستی از فایل‌هایی که باید Bundle شوند.
• آبجکت minify : تنظیمات مربوط به Minify کردن فایل‌ها است.
• پراپرتی adjustRelativePaths : در واقع یکی از تنظیمات مربوط به minify کردن فایل‌های CSS است. اگر فایل‌های CSS شما از مسیرهای نسبی برای ارجاع به منابع استفاده می‌کنند و شما این فایل‌ها را در یک Bundle ترکیب می‌کنید، توصیه می‌شود adjustRelativePaths را روی true تنظیم کنید تا اطمینان حاصل شود که این مسیرها بعد از Bundle شدن نیز به درستی کار می‌کنند.

مثلا اگر مسیرهای نسبی در فایل‌های CSS وجود داشته باشد، مثلاً background-image: url(‘../images/bg.png’)، این مسیرها به طور خودکار تنظیم می‌شوند تا به مکان صحیح در فایل Bundle شده اشاره کنند.

• پراپرتی commentMode : در واقع یکی از تنظیمات مربوط به minify کردن فایل‌ها است. اگر مقدار آن None باشد کلیه کامنت ها را پاک میکند.
• پراپرتی includeInProject : برای تعیین این‌که آیا فایل خروجی (Bundle شده) به‌طور خودکار به پروژه اضافه شود یا نه، استفاده می‌شود. این ویژگی به خصوص زمانی مفید است که می‌خواهید فایل خروجی پس از باندل و مینیفای شدن، به صورت خودکار به پروژه شما در Visual Studio اضافه شود، تا بتوانید به راحتی آن را مدیریت و نسخه‌بندی کنید.

برای فایل CSS (site.min.css): فایل‌های site.css و theme.css باندل و مینیفای می‌شوند و خروجی آنها به فایل site.min.css ذخیره می‌شود. تنظیم includeInProject: true باعث می‌شود که فایل site.min.css به صورت خودکار به پروژه Visual Studio اضافه شود.