ASP.Net ر Minification و Bundling : هلاقم ناونع...ASP.Net MVC :ر Minification و Bundling زا ه{افتسا میهاوخMinification و Bundling یسررب و {رک میهاوخ

ASP.Netدر Minificationو Bundlingعنوان مقاله :

وتنظیم کننده : مرجع تخصصی برنامه نویسان تهیه

www.barnamenevisan.org [email protected]

Bundling و Minification دو تکنیکی هستند که در ASP.Net شما میتوانید از آنها برای بهبود زمان بارگذاری

این بهبود زمان را بوسیله ی کاهش تعداد درخواست Minification و Bundling . درخواست صفحه استفاده کنید

، انجام میدهد ( CSS و Javascript)فایل های های ارسالی به سمت سرور و کاهش سایز و اندازه فایل های موجود

. آشنا خواهید شد Minificationو Bundling . در این مقاله ، با مفهوم

تا 6محدود به Hostname را به ازای هر simultaneous connections بیشتر مرورگرهای بزرگ امروزی تعداد

باشند ، اگر درخواست جدیدی بیاید ، ست در حال پردازش میکردند ، این بدان معناست که زمانی که شش درخوا

: باشدمی IE توسط مرورگر درون صف قرار میگیرد . عکس زیر مربوط به مرورگر

https://barnamenevisan.org/Articles/Article5490.html


http://www.barnamenevisan.org/










نوار های طوسی بدان معناست که درخواست توسط مرورگر در صف قرار گرفته است ، نوار زرد نشان دهنده بازه

زمانی که اول بایت از پاسخ ارسال شود . نوار آبی نیز نشان دهنده تا درخواست از بایت یناول دریافت از زمانی است

double-click مدت زمان دریافت پاسخ از سرور است . برای مشاهده جزئیات زمانبندی شما میتوانید روی آنها

. باشدمی /Scripts/MyScripts/JavaScript6.js کنید . برای مثال تصویر زیر نشان دهنده زمان بندی برای فایل

simultaneous است ، که درخواست به دلیل محدودیت تعداد Start تصویر قبلی نشان دهنده رویداد

connections میلی ثانیه ، برای کامل 46مرورگر وارد صف شده است . در این مورد ، این درخواست به مدت

. شدن درخواست های دیگر منتظر مانده است

Bundling :

Bundling ویژگی جدیدی است که با ASP.Net 4.5 آن چندین فایل را به آسانی در قالب یک فایل . ارائه شد

بسازید . JavaScript و CSS های مختلفی برای فایل های bundle ترکیب و دسته بندی میکند . شما میتوانید







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

نشان Minification و Bundling که در مثال قبلی بررسی شد را همراه با About View تصویر زیر زمانبندی

. میدهد

Minification :

Minification کارهای مختلفی را برای بهینه سازی Scriptها و CSS ر پاک کردن فضاهای ها انجام میدهد ، نظی

های بین کدها ، حذف کامنت ها ، کوتاه کردن نام متغیرها و تبدیل آن به نام یک کاراکتری . کد space خالی و

Javascript زیر را در نظر بگیرید :

AddAltToImg = function (imageTagAndImageID, imageContext) {

///<signature>

///<summary> Adds an alt tab to the image

// </summary>

//<param name="imgElement" type="String">The image selector.</param>







//<param name="ContextForImage" type="String">The image context.</param>

///</signature>

var imageElement = $(imageTagAndImageID, imageContext);

imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));

}

: ، کد بصورت زیر خواهد شد minification بعد از

AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", i.attr("id").replace(/ID/, "")) }

: است شده کوتاه و کرده تغییر نیز متغیرها نام ، عالوه بر پاک کردن کامنت ها و فضاهای خالی

imageTagAndImageID --> n

imageContext --> t

imageElement --> i

: Minification و Bundling تاثیر

جدول زیر چندین تفاوت مهم و اساسی بین زمانی که فایلها را بصورت انفرادی ارسال میکردیم و زمانی که

: استفاده میکنیم را نشان میدهد Minification و Bundling از







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

(Scripts\jquery-1.7.1.min.js و Scripts\jquery-ui-1.8.11.min.js)این دلیل که بزرگترین فایل های آن

. شده اند minify در حال حاضر

: Javascript شده minify و bundle اجرای فایل های

شده اند Bubdle ها ، به این دلیل که فایل ها نهDevelopment Environment در JavaScript اجرای فایل های

شده را minify و Bundle کردن یک فایل جاوااسکریپ debug امکان شما. است ای ساده کار ، modify و نه

شما توسط دو عملکرد زیر میتوانید یک فایل ، IE F12 نیز دارید . با استفاده از ابزار توسعه دهندگان در

: شده را اجرا کنید Modify و Bundle جاوااسکریپت

1. Script tab را انتخاب کنید ، سپس دکمه Start debugging را بزنید .

2. Bundle ای را که فایل جاوااسکریپت را شامل میشود را انتخاب کنید .







کنید Format را minified javascript ، فایل های Configuration بوسیله انتخاب دکمه .3

. را انتخاب کنید Format JavaScript سپس

کنید را وارد کنید . همانطور که در تصویر debuge ، نام تابعی را که میخواهید آن را Search Script در .4

: را داریم AddAltToImg مشاهده میکنید ما قصد اجرای

:کلیک کنیداینجا میتوانید F12 Developer Toolsکسب اطالعات بیشتر در مورد برای

: Minification و Bundling کنترل

Bundling و Minification با تنظیم مقدار در صفت debuge همولف از Compilation در web.config میتواند




http://msdn.microsoft.com/en-us/library/ie/gg699336%28v=vs.85%29.aspx

http://msdn.microsoft.com/en-us/library/ie/gg699336%28v=vs.85%29.aspx




و Bundling قرار دادیم ، که این بدین معناست که true را debug زیر ، مقدار XML فعال یا غیر فعال شود . در

Minification غیر فعال خواهد بود .

<system.web>

<compilation debug="true" />



</system.web>

قرار دهید . شما میتوانید با falseرا مساوی با debug ، مقدار Minification و Bundling برای فعال سازی

کنید . تکه override را web.config توانیدمی BundleTableدر کالس EnableOptimizations استفاده از

. میکند override را web.configمیکند و هرگونه تنظیماتی در را فعال Minification و Bundling کد زیر

public static void RegisterBundles(BundleCollection bundles)

{

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

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

// Code removed for clarity.

BundleTable.EnableOptimizations = true;

}

: ASP.Net MVC در Minification و Bundling استفاده از

خواهیم Minificationو Bundling ایجاد خواهیم کرد و بررسی ASP.Net در این قسمت ما یک پروژه

یجاد کنید ، بدون تغییر تنظیمات ، پروژه را ایجاد ا MvcBM با نام ASP.Net MVC پرداخت . ابتدا یک پروژه

. کنید

که برای ایجاد ، ثبت و پیکربندی RegistreBundle را باز کرده و متد App_Start\BundleConfig.cs فایل

bnundle گیرد را بررسی کنید . کد زیر یک قسمت از متدها مورد استفاده قرار می RegistreBundle را نمایش

. دمیده








{

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



}

فولدر در که هایی فایل تمام که ایجاد میکند ، ~/bundles/jquery ید با نامجد Javascript bundleکد باال یک

Script با رشته"Scripts/jquery-{version}.js/"~ برای. شودمی شامل ، را همخوانی دارند ASP.Net

MVC 4 این بدان معناست که فایل ، jquery-1.7.1.js بهbundle . اضافه خواهد شد

. وجود دارند FileX.js و FileX.min.js برای انتشار زمانی که .min انتخاب فایل -

debug برای .min انتخاب نسخه غیر -

مورد استفاده intelliScence که فقط توسط jquery-1.7.1-vsdoc.js همانند -vsdoc نادیده گرفتن فایل -

. قرار میگیرد

{Version برای ایجاد خودکار }jQuery bundle اده از فایل های با استفjavascript مناسب موجود در فایل

Scripts میباشد . در این مثال ، استفاده از اینwild card : مزیت های زیر را به دنبال دارد

. نیست bunle دیگر نیازی به ویرایش کدهای قبلیNuGet با استفاده از Script در زمان بروزرسانی فایل های •

نسخه از آنها انتشار برای و میکند استفاده ها فایل از نسخه کامل debuge پیکربندیبصورت خودکار برای •

min. استفاده خواهد کرد .

: CDN استفاده از

: جابجا میکند CDN jQuery bundle را با local jQuery bundle تکه کد زیر


{

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

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







bundles.UseCdn = true; //enable CDN support

//add link to jquery on the CDN

";1.7.1.min.js-http://ajax.aspnetcdn.com/ajax/jQuery/jqueryjqueryCdnPath = " var

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

jqueryCdnPath).Include(



}

قرار debug استفاده خواهد کرد و زمانی که در حالت CDN در کد باال ،در زمانی که در حالت انتشار قرار دارد از

با CDN استفاده میکنیم ، برای زمانی که CDN از که زمانی ه بصورت محلی واکشی خواهند شد . jQuery دارد

با CDN اید یک مکانیزم برگشتن داشته باشید . تکه کد عالمت دار شده زیر ، برای زمانی است کهخطا مواجه شد ب

. شد fail خطا مواجه و

</footer>

@Scripts.Render("~/bundles/jquery")

<script type="text/javascript">

if (typeof jQuery == 'undefined') {

var e = document.createElement('script');

e.src = '@Url.Content("~/Scripts/jquery-1.7.1.js")';

e.type = 'text/javascript';




http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js




document.getElementsByTagName("head")[0].appendChild(e);

}

</script>

@RenderSection("scripts", required: false)

</body>

</html>

: Bundle ایجاد یک

را دریافت میکند ، که هر رشته یک آدرس مجازی به منبع string یک آرایه از Bundle از کالس Include متد

، چگونگی اضافه شدن چندین App_Start\BundleConfig.csدر فایل RegisterBundles است . کد زیر از متد

. را نمایش میدهد bundle فایل به

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

"~/Content/themes/base/jquery.ui.core.css",

"~/Content/themes/base/jquery.ui.resizable.css",

"~/Content/themes/base/jquery.ui.selectable.css",

"~/Content/themes/base/jquery.ui.accordion.css",

"~/Content/themes/base/jquery.ui.autocomplete.css",

"~/Content/themes/base/jquery.ui.button.css",

"~/Content/themes/base/jquery.ui.dialog.css",

"~/Content/themes/base/jquery.ui.slider.css",

"~/Content/themes/base/jquery.ui.tabs.css",

"~/Content/themes/base/jquery.ui.datepicker.css",

"~/Content/themes/base/jquery.ui.progressbar.css",

"~/Content/themes/base/jquery.ui.theme.css"));







برای اضافه کردن تمام فایل ها به یک دایرکتوری فراهم شده است که با Bundle کالس IncludeDirectory متد

: در زیر نمایش داده شده است Bundle کالس IncludeDirectory API .یک الگوی جستجو همخوانی دارد

public Bundle IncludeDirectory(

string directoryVirtualPath, // The Virtual Path for the directory.

string searchPattern) // The search pattern.

public Bundle IncludeDirectory(

string directoryVirtualPath, // The Virtual Path for the directory.

string searchPattern, // The search pattern.

bool searchSubdirectories) // true to search subdirectories.

Bundel ها با استفاده از متد Render در View ها مورد استفاده قرار میگیرند . Styles.Render برای CSS و

Scripts.Render برای Javascript / قسمت های عالمت گذاری شده در

CSS به ASP.Net Project درس دهی پیش فرضچگونگی آ Views\Shared\_Layout.cshtml فایل

bundle و Javascript bundle ها را نمایش میدهد .

<!DOCTYPE html>

<html lang="en">

<head>

@* Markup removed for clarity.*@

@Styles.Render("~/Content/themes/base/css", "~/Content/css")

@Scripts.Render("~/bundles/modernizr")

</head>

<body>

@* Markup removed for clarity.*@

@Scripts.Render("~/bundles/jquery")







@RenderSection("scripts", required: false)

</body>

</html>

شما این امکان را دارید که ، در پس .یک آرایه ای از رشته ها را دریافت میکند Render توجه داشته باشید که متد

استفاده کنید . فرض بر URL میتوانید از متد URL شما نیز برای تولید . را اضافه کنید Bundle یک خط چندین

را به URL استفاده کنید . تکه کد زیر چگونگی استفاده از متد async این است که شما میخواهید از صفت جدید

: شما نشان میدهد

<head>

@*Markup removed for clarity*@

<meta charset="utf-8" />

<title>@ViewBag.Title - MVC 4 B/M</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta name="viewport" content="width=device-width" />

@Styles.Render("~/Content/css")

@* @Scripts.Render("~/bundles/modernizr")*@

<script src='@Scripts.Url("~/bundles/modernizr")' async> </script>

</head>

: برای انتخاب فایل ها "*"استفاده از

میتواند IncludeDirectoryدر متد search pattern و Include آدرس مجازی مشخص شده در متد

آخرین آدرس دریافت کند . رشته جستجو حساس به بزرگ و کوچک در پیشوند یا پسوند عنوان به را "*" کاراکتر

.دارد subdirectories گزینه ای برای جستجو IncludeDirectory باشد . متدبودن حروف نمی

: زیر در نظر بگیرید javaScript پروژه ای را با فایل های







• Scripts\Common\AddAltToImg.js

• Scripts\Common\ToggleDiv.js

• Scripts\Common\ToggleImg.js

• Scripts\Common\Sub1\ToggleLinks.js

.اضافه شده اند را نمایش میدهند bundle به WildCard جدول زیر فایل هایی که توسط

ها Wildcard بصورت صریح به دالیلی که در زیر ارائه میشود نسبت به بارگذاری bundle دن فایل ها بهاضافه کر







: اولویت داده میشود

بارگذاری را به ترتیب حروف الفبا انجام میدهد ، که آن چیزی نیست که ما wildcard اضافه کردن فایل ها توسط •

برای ما اهمیت دارد و ما نمیخواهیم که آنها بر اساس حروف الفبا CSS , JavaScript خواهیم . ترتیب فایل هایمی

ازی را تعریف کنید ، میتوانید طریقه ی مرتب س IBundleOrderer مرتب سازی شده باشند . شما با پیاده سازی

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

میتواند شامل همه Wildcard یک فایل مشخص به دایرکتوری با استفاده از بارگذاری View اضافه شدن •

view referencing های bundle شده باشد . اگر view یک script ص بهمشخ bundle اضافه شود ، شما در

. دریافت خواهید کرد Javascript ارجاع داده شده اند ، خطای bundle فایل های دیگری که به این

Bundle Caching :

Bundle زمان انقضای HTTP را یک سال پس از زمانی که bundle را آن شما اگر شود ، تنظیم میکند . ایجاد می

وجود ندارد ، بدین صورت که نه Bundel که درخواستی برای آید می بوجود وضعیتی ، کنید یتهدا قبلی صفحه به

از سمت HTTP 304 response وجود دارد ، و نه هیچ bundle برای IE از سمت HTTP GETهیچ درخواست

ارسال bundle ی برایدرخواست F5 سرور . شما میتوانید این شرایط را تغییر دهید ، بدین صورت که با هر بار زدن

. شود

: را نمایش میدهد caching tab تصویر زیر

درخواست

http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5e

uZNzdsa2N1PKvb81 برای"bundle "AllMyScripts میباشد و شامل




http://msdn.microsoft.com/en-us/library/system.web.optimization.ibundleorderer%28VS.110%29.aspx




query string : زیر میباشد

v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81 رشته کوئری .v یک رشته منحصر به

تغییری نکند ، برنامه ، برای bundleمورد استفاده قرار میگیرد . تا زمانی که cachingفرد است که برای

درخواست

"bundle "AllMyScripts از این token استفاده خواهد کرد . اگر هر گونه تغییری درbundle ایجاد شود

ASP.NET optimization framework یکtoken جدید تولید خواهد کرد ، و تضمین خواهد کرد که با

را دریافت خواهد کرد . bundleدرخواست ، مرورگر آخرین نسخه از

LESS, CoffeeScript, SCSS, Sass Bundling :

رای پردازش زبان های میانی نظیریک مکانیزمی را ب Minification و Bundling فریمورک

LESS ,Sass , SCSSیا Coffeescript ، فایل یک کردن اضافه برای ، مثال برای. آورند فراهم میLESS به

: پروژه خود

استفاده خواهیم Content\MyLess خود ایجاد کنید . در این مثال ما از فولدر LESS یک فولدر برای محتوای .1

. کرد

. را به پروژه خود اضافه کنید dotless پکیج Nuget از طریق .2




http://www.dotlesscss.org/

http://sass-lang.com/

http://sass-lang.com/

http://coffeescript.org/




کدهای زیر را به .lessایجاد کنید . برای انتقال IBundleTransform یک کالس برای پیاده سازی اینترفیس .3

. پروژه خود اضافه کنید

using System.Web.Optimization;

public class LessTransform : IBundleTransform

{

public void Process(BundleContext context, BundleResponse response)

{

response.Content = dotless.Core.Less.Parse(response.Content);

response.ContentType = "text/css";

}

}

، ایجاد کنید . کدهای زیر را به متد CssMinify و انتقال LessTransform با bundle of less لیک فای .4

Registerbundle در فایل App_Start\BundleConfig.cs اضافه کنید .

var lessBundle = new Bundle("~/My/Less").IncludeDirectory("~/My", "*.less");

lessBundle.Transforms.Add(new LessTransform());

lessBundle.Transforms.Add(new CssMinify());

bundles.Add(lessBundle);

: ارجاع داده شود اضافه کنید Less ای که باید به فایل view کد زیر را به هر .5

@Styles.Render("~/My/Less");

: Bundle بررسی

bundle" جدید ایجاد میکنید برای نام گذاری آن از Bundle یک که زمانی یک قرار داد خوب برای نام گذاری ،




http://msdn.microsoft.com/en-us/library/system.web.optimization.ibundletransform%28VS.110%29.aspx




. به عنوان پیشوند استفاده کنید ، این کار از تداخل و تصادم اسم ها جلوگیری میکند "

جدید ایجاد میشود و با درخواست بعدی از Token کنید ، یکبروزرسانی می bundle زمانی که یک فایل را در

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

انفرادی قرار میگرفتند ، در زمان ایجاد تغییرات ، فقط فایل هایی که دچار تغییرات شده بودند دوباره دانلود

. میشدند

Bundling و Minification ا بهبود میبخشد . زمانی که یک صفحه درخواست زمان بارگذاری صفحه نخست ر

میکند ، پس زمانی که دوباره cach ها( سایت راimageو JavaScript و CSS) داده میشود ، مرورگر دارایی های

کار خاصی را انجام نمیدهند . اگر شما زمان انقضای Minification و Bundling سایت درخواست داده شود

نیز استفاده نکنید ، مرورگر دارایی Minificationو Bundling خود تنظیم نکنید ، و از header درستی بر روی

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

تغییر CDN زمیتواند با استفاده ا hostname به ازای هر simultaneous connectionsتایی 6محدودیت

CDN سایت شما دارد ، در زمان استفاده از hostname متفاوت با hstname یک CDn به این دلیل که . کند

. تایی اعمال نمیشود 6محدودیت

پیش فرض tempalteها با صفحات مورد نیاز تقسیم بندی شوند . برای مثال ، در bundle بهتر است که

ASP.Net MVC ینترنت ، برای یک برنامه اjQuery Validation Bundle از jQuery جدا است ، و این بدین

های پیش فرض ایجاد شده دارای ورودی نیستند و مقداری را نیز پست نمیکنند،برای همین آنها view دلیل است که

. نمیباشند validation bundleشامل

Documents

ASP.Net ر Minification و Bundling : هلاقم ناونع...ASP.Net MVC :ر Minification و Bundling زا ه{افتسا میهاوخMinification و Bundling یسررب و {رک میهاوخ