برای شروع پس از ایجاد پروژه با نام دلخواه دو فایل css با نامهای first.css و second.css با محتوای دلخواه ایجاد میکنیم.
first.css
h3 {
font-size: 18pt;
font-family: sans-serif;
}
table, td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
font-family: sans-serif;
}
second.css
p {
font-family: sans-serif;
font-size: 10pt;
color: darkgreen;
background-color: antiquewhite;
border: 1px solid black;
padding: 2px;
}
همانطور که می دانیم در حالت عادی جهت ارجاع فایلهای فوق به ویوی مورد نظر به صورت زیر عمل میکنیم.
<link href="~/Lib/Css/first.css" rel="stylesheet" />
<link href="~/Lib/Css/second.css" rel="stylesheet" />
اما مشکل اینجاست که مرورگر برای دریافت هریک از فایلهای فوق نیازمند به ارائه یک درخواست به سرور می باشد و مشکل دیگر وجود فضاهای خالی و یا متغیرهایی که باعث افزایش حجم فایلهای فوق می شود و ممکن است چندان اهمیتی نداشته باشد.که نیازمند بار ترافیکی بیشتر جهت ارسال به سمت client میشود. لذا برای رفع این مشکل از ترکیب فایلهای فوق به یک فایل و کمتر کردن حجم فایل با استفاده از bundling و minification. خواهیم پرداخت.
برای انجام مراحل فوق ابتدا به نصب Bundler & Minifier با توجه به مراحل زیر خواهیم پرداخت.
منوی Tools ➤ Extensions and Updates را انتخاب نمایید.در پنجره باز شده عبارت bundler را جستجو کنید. سپس با توجه به شکل زیر بر روی گزینه دانلود کلیک نمایید.
ممکن است پس از دانلود از شما خواسته شود برنامه را یکبار ببندید و بر اساس برنامه زمانبندی شده شروع به نصب برنامه نماید . سپس برنامه خود را مجددا باز نمایید.
در این مرحله جهت ترکیب و متراکم سازی فایلهای css فوق ابتدا آنها را با توجه به شکل زیر انتخاب نمایید و با کلیک راست بر روی آنها گزینه Bundler & Minifire را انتخاب کنید., و در پایان با نام bundle.css ذخیره نمایید.
پس از انجام مراحل فوق فایل ترکیب شده از دو فایل css با نامهای first.css و second.css و بصورت فشرده شده در همان مسیر ایجاد میگردد و شما از این فایل جدید میتوانید جهت ارجاع به صفحات خود استفاده نمایید.(بصورت زیر)
<link href="~/Lib/Css/bundle.min.css" rel="stylesheet" />
لازم به تذکر می باشد که تمامی مراحل فوق در فایلی بنام bundleconfig.json ذخیره میگردد و شما میتوانید آنرا مشاهده نمایید.
[
{
"outputFileName": "wwwroot/Lib/Css/bundle.css",
"inputFiles": [
"wwwroot/Lib/Css/first.css",
"wwwroot/Lib/Css/second.css"
]
},
{
"outputFileName": "wwwroot/Lib/js/bundle.js",
"inputFiles": [
"wwwroot/Lib/js/fourth.js",
"wwwroot/Lib/js/third.js"
]
}
]