Minify کردن JavaScript (آموزش)
همونطور که میدونید فایل های جاوااسکریپت با پسوند .js ذخیره میشن .
شاید فایل های جاوا اسکریپت با پسوند .min.js رو هم دیده باشید.
به عنوان مثال main.min.js خلاصه شده یا minify شده فایل جاوا اسکریپتی به نام main.js هست و کدهایی هم که توش نوشته شده به شکل زیر هست :
function sampleFunction(){alert("a")}function sampleFunction2(){alert("helloWorld!")};
به این نوع فایل ها جاوا اسکریپتی اصطلاحا میگین minify شده .
درواقع minify شدن به عمل حذف فاصله ها ، کامنت ها و تغییر جزیی در کد هست .
با اینکار حجم فایل های جاوا اسکریپت شما بسیار کاهش پیدا میکنه که باعث لود سریعتر وب پیج شما میشه .
به عنوان مثال هم فایل اصلی jquery حجمی در حدود 270kb دارد ولی نسخه minify شده آن در حدود 98kb هست .
حالا در این تاپیک میخوایم آموزش بدیم که چطوری یک فایل جاوااسکریپت رو minify کنیم .
++++پست بعدی++++
راه های زیادی برای minify کردن فایل ها وجود داره مثل استفاده از سرویس های آنلاین ولی ما میخوایم کاری کنیم خود idea برای ما realTime این کار رو انجام بده .
دلیل انجام اینکارم اینکه خیلی سریع تر هست ، سورس دست کسی نمیره و بعدا هم آموزش هایی قرار خواهم داد که با همین روش انجام میشه .
از اونجایی که در آموزش های خانه وب از Injtilij استفاده می کنیم ، روشی رو پیاده میکنیم که به راحتی بشه فایل ها رو minify کرد .
اول از همه فایل نصبی nodejs رو از اینجا بگیرید و بر روی ویندوز نصب کنید .
حالا محیط توسعه رو باز میکنیم .
از منو بالای صفحه idea بر روی File بزنید سپس Settings رو انتخاب کنید .
.
پنجره ای جدید با میشه که در قسمت سمت چپ Plugins رو پیدا کنید و روش کلیک کنید تا قسمت سمت راست صفحه پر بشه .
در سمت راست صفحه افزونه هایی که در حال حاضر بر روی محیط توسعه شما قابل استفاده هست نمایش داده میشه در همین قسمت دکمه ای با عنوان Brows Repositories وجود داره . روی این دکمه کلیک کنید .
.
ما قصد داریم از Repository های موجود افزونه ای رو دریافت کنیم ، وقتی بر روی دکمه کلیک کنید پنجره جدیدی باز میشه که توش لیستی از افزونه ها وجود داره ما به دنبال افزونه های زیر میگردیم :
nodejs
FileWatchers
خب این 2 افزونه رو جستجو و بعد نصبشون کنید.
.
حالا این فایل رو دانلود کنید : لینک و بعد از باز کردنش محتویات داخلش رو در پوشه مربوط به nodejs بر روی ویندوز کپی کنید .
یک بار Idea رو ببندید و دوباره باز کنید .
از منو File و بعد Settings رو انتخاب کنید .
در پنجره باز شده به دنبال File Watchers بگردید و روش کلیک کنید در سمت راست بر روی علامت + بزنید و Closure Compiler رو انتخاب کنید تا پنجره جدید باز بشه .
.
در پنجره جدید در قسمت program فایلی که در بالا دانلود کردید با اسم compiler رو بهش آدرس میدیم و ok میکنیم .
.
حالا که watcher رو اضافی کردیم کار تمومه یه پروژه جدید باز میکنیم و توش یه فایل js میسازیم .
من یک فایل به اسم main ساختم و توش کد های زیر رو نوشتم :
/*
Orginal JavaScript File
Sample
*/
function sampleFunction (){
alert('a');
}
function sampleFunction2 (){
alert('helloWorld!');
}
در عکس زیر میبینید که یک فایل min هم برای main.js ساخته شده و اطلاعات توش هم به این شکل شده :
function sampleFunction(){alert("a")}function sampleFunction2(){alert("helloWorld!")};
توضیحات و فاصله ها حذف شدند .
.
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .
