برای شروع پس از ایجاد پروژه با نام دلخواه دو فایل 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 را جستجو کنید. سپس با توجه به شکل زیر بر روی گزینه دانلود کلیک نمایید.
![bundler & minifier](http://www.fekre-bekr.ir/uploads/images/NewsContent/bundler01.png)
ممکن است پس از دانلود از شما خواسته شود برنامه را یکبار ببندید و بر اساس برنامه زمانبندی شده شروع به نصب برنامه نماید . سپس برنامه خود را مجددا باز نمایید.
در این مرحله جهت ترکیب و متراکم سازی فایلهای css فوق ابتدا آنها را با توجه به شکل زیر انتخاب نمایید و با کلیک راست بر روی آنها گزینه Bundler & Minifire را انتخاب کنید., و در پایان با نام bundle.css ذخیره نمایید.
![bundler & minifier](http://www.fekre-bekr.ir/uploads/images/NewsContent/bundler02.png)
پس از انجام مراحل فوق فایل ترکیب شده از دو فایل 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"
]
}
]