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

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

خلاصه سازی جاوا اسکریپت روش بسیار خوبی برای بالا بردن سرعت وب سایت است و انجام دادن آن بسیار ساده است. در این مقاله به شما هرچیزی را که باید در این زمینه بدانید را یاد می دهیم. 

خلاصه سازی به چه معنی است؟ 

روند خلاصه سازی ( minification) مفهومی بسیار ساده است. وقتی که در جاوا اسکریپت یا زبانی دیگر کد می نویسید قابلیت هایی وجود دارد تا فهم این کدها را برای انسان ها ساده تر می کند اما برای کامپیوترها مهم نیست که شما نام متغیرهای خود را چه می گذارید یا اطراف پرانتزها چقدر فاصله هست. 

با خلاصه سازی کد شما می توانید اندازه فایل را کاهش دهید. دانلود کردن فایل های کوچک تر نیز برای کاربران ساده تر است. اگر تنها یک یا دو خط جاوا اسکریپت بنویسید شاید تغییری به چشم نیاید. اما وقتی که کدهای زیادی می نویسید یا از یک کتابخانه بزرگ مثل jQuery استفاده می کنید عملکرد بالا رفته و اندازه فایل به طور چشمگیری کاهش می یابد. 

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

کد خلاصه شده به چه صورت است؟ 

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

در زیر مثالی از یک کد جاوا اسکریپت خلاصه نشده می بینید: 

// setup some JSON to use

var cars = [

  { "make":"Porsche", "model":"911S" },

  { "make":"Mercedes-Benz", "model":"220SE" },

  { "make":"Jaguar","model": "Mark VII" }

];

window.onload = function() {

  // setup the button click

  document.getElementById("theButton").onclick = function() {

    doWork()

  };

}

function doWork() {

  // ajax the JSON to the server

  $.post("receiver", cars, function(){

  });

  // stop link reloading the page

  event.preventDefault();

}

و حال کد خلاصه شده: 

function doWork(){$.post("receiver",cars,function(){}),event.preventDefault()}var cars=[{make:"Porsche",model:"911S"},{make:"Mercedes-Benz",model:"220SE"},{make:"Jaguar",model:"Mark VII"}];window.onload=function(){document.getElementById("theButton").onclick=function(){doWork()}};

این نسخه خلاصه شده کد، 39 درصد کوچک تر شده است. در این مثال نام متغیرها تغییر نکرده اما فضای سفید و نظرات حذف شده است. 

یک مثال دیگر از jQuery: 

// dfd == deferred

var dfd = $.Deferred();

function doThing() {

    $.get('some/slow/url', function() {

        dfd.resolve();

    });

    return dfd.promise();

}

$.when(doThing()).then(function(){

    console.log('YAY, it is finished');

});

و حال کد خلاصه شده: 

function doThing(){return $.get("some/slow/url",function(){dfd.resolve()}),dfd.promise()}var dfd=$.Deferred();$.when(doThing()).then(function(){console.log("YAY, it is finished")});

در این مثال کد تنها 26 درصد کاهش داشته است. این میزان کاهش برای کدی به این کوچکی تغییر بزرگی است. 

و حال یک مثال دیگر :

//declare a new variable to hold a new h1 element

var newHeading = document.createElement("h1");

//add the text node to the document

var h1Text = document.createTextNode("Heading Level 1");

//make it a child node of the new heading

newHeading.appendChild(h1Text);

//append this as a child of element defined as "bt"

document.getElementById("bt").appendChild(newHeading);

ببینید فضای سفید و نظرات چقدر زیاد است. حال نسخه خلاصه شده اندازه فایل را تا 52 درصد کاهش می دهد: 

var newHeading=document.createElement("h1"),h1Text=document.createTextNode("Heading Level 1");newHeading.appendChild(h1Text),document.getElementById("bt").appendChild(newHeading);

اندازه چند کتابخانه جاوا اسکریپت در مقایسه با نسخه های خلاصه شده: 

• Highcharts: 1 مگابایت > 201 کیلوبایت 

• jQuery: 270 کیلوبایت> 90 کیلوبایت

• MooTools: 164کیلوبایت>93 کیلوبایت 

بعضی از این کتابخانه ها هنگام خلاصه سازی کاهش سایز چشمگیری را نشان می دهند ( نزدیک به 80 درصد)، در حالی که بقیه تنها تا 40 درصد تغییر می کنند. البته حتی اندکی کاهش در طول خلاصه سازی نیز سرعت وب سایت شما را بالا می برد و فشار را از سرورهای وب شما می کاهد. 

چگونه خلاصه سازی را انجام دهیم؟

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

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

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

JSCompress- ابزاری سریع است و حتی ابزارهایی که برای ساخت آن استفاده شده را به شما نشان می دهد. 

JavaScript Minifier- این وب سایت خیلی خوب عمل می کند اما بیشتر یک API است و به شما این امکان را می دهد تا روی وب سایت آن ها سرویس خود را پیاده سازی کنید. 

JavaScript Minifier- یک وب سایت دیگر با همان نام است. این وب سایت ابزاری بسیار ساده است. هیچ گزینه یا منو نمی بینید و تنها یک دکمه وجود دارد. 

Minify- این وب سایت عالی است و سازندگان آن توجه بسیار زیادی به جزئیات کرده اند. 

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

ابزار خلاصه سازی در قالب ابزارهای خط فرمان یا پلاگین برای ویرایشگر جاوا اسکریپت نیز موجود است. استفاده از این ابزارها سریع تر است و فقط روی کد شما کار می کند. هیچ نیازی به کپی و پیست نیست و لازم نیست که جاوا اسکریپت خود را از HTML یا CSS که ممکن است در همان فایل باشد جدا کنید. 

اگر از مایکروسافت ویژوال استودیو استفاده می کنید، افزونه  Bundler and Minifier تا به حال 600 هزار بار نصب شده است و به درد شما می خورد. درضمن مدام به روز می شود و برای گیت هاب نیز موجود است. 

اگر طرفدار Sublime Text هستید، پکیج Minify برای شما مناسب است. این پکیج که تا به حال 61 هزار بار نصب شده است پکیجی بسیار پرطرفدار است و روی گیت هاب نیز موجود است. 

در نهایت اگر کاربر PyCharm هستید می توانید از ابزارهای خلاصه سازی مثل YUI compressor استفاده کنید. بعضی از این ابزارها به طور مستقیم از ابزارهای آنلاینی که در بالا به آن ها اشاره کردیم استفاده می کنند. 

هشدارها

حتماٌ فکر می کنید که این کار نیز باید نقصی داشته باشد. هیچ چیز عالی نیست. بله یک مشکل کوچک وجود دارد. اما بسیار کوچک است و می توانید با آن کنار بیایید. 

کد خلاصه شده را نمی توانید به حالت اصلی خود باز گردانید. 

وقتی که کد را خلاصه می کنید حالت اصلی از بین می رود. اگر می خواهید تغییر بزرگی در کد خود ایجاد کنید حتماٌ یک کپی از حالت اصلی نگاه دارید. 

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

شاید این کشل بزرگ نباشد اما هنگام خلاصه سازی باید آن را در نظر بگیرید. یک قانون وجود دارد: کد خلاصه نشده>کد خلاصه شده و در حال توسعه> محصول نهایی. 

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

با کانال تلگرام فیسیت همراه باشید