জাভাস্ক্রিপ্ট কম্প্রেসার: কিভাবে এবং কেন আপনার JS কে ছোট করা যায়

আমরা সবাই সেখানে ছিলাম, আপনি শিখেছেন কিভাবে একটি অসাধারণ ওয়েবসাইট তৈরি করবেন , কিন্তু একবার আপনি এটি প্রকাশ করলে, এটি অসহনীয়ভাবে ধীর।

আপনার জাভাস্ক্রিপ্টকে ছোট করা ওয়েবসাইটের প্রতিক্রিয়া সময়ের গতি বাড়ানোর একটি উপায় (সাথে HTML কম্প্রেস করা ), এবং ভাগ্যক্রমে আপনার জন্য, এটি একটি সহজ প্রক্রিয়া। আজ আমি আপনাকে যা কিছু জানা দরকার তা দেখাবো।

---

---

মিনিফাই মানে কি?

প্রক্রিয়া ক্ষুদ্রীকরণ (অথবা ছোট করা ) একটি সহজ ধারণা। যখন আপনি জাভাস্ক্রিপ্ট বা অন্য কোন ভাষায় কোড লিখেন, তখন অনেক বৈশিষ্ট্য আছে যা কেবলমাত্র মানুষের বোঝার জন্য কোডটি সহজ করার জন্য প্রয়োজনীয় - কম্পিউটারগুলি আপনার ভেরিয়েবলগুলিকে কী বলে, বা বন্ধনীগুলির চারপাশে কতটুকু ফাঁক আছে তা গুরুত্ব দেয় না, উদাহরণ স্বরূপ.

কোডটি ছোট করে, আপনি এর ফাইলের আকার ব্যাপকভাবে হ্রাস করতে পারেন। একটি ছোট ফাইল তাই আপনার ব্যবহারকারীদের ডাউনলোড করার জন্য দ্রুত হবে। যদি আপনি শুধুমাত্র জাভাস্ক্রিপ্টের এক বা দুটি লাইন লিখছেন, সম্ভবত একটি লক্ষণীয় উন্নতি হবে না। যাইহোক, যদি আপনি প্রচুর কোড লিখছেন, অথবা jQuery এর মতো বড় লাইব্রেরি ব্যবহার করছেন, লক্ষণীয় কর্মক্ষমতা বৃদ্ধি পায় এবং ফাইলের আকারগুলি হ্রাস পায় সহজেই অর্জনযোগ্য!

যদি আপনি একটি বহিরাগত CDN থেকে কোড লোড করেন, যেমন গুগল হোস্ট করা লাইব্রেরি , আপনি মিনিফাইড কোড ব্যবহার করেছেন।

কিভাবে একটি ইউএসবি ড্রাইভ লক করবেন

মিনিফাইড কোড দেখতে কেমন?

আসুন কিছু উদাহরণ দেখি। ছোট কোড বেসগুলিতে ক্ষুদ্রীকরণের প্রভাব দেখা কঠিন, তাই আমি তাদের দীর্ঘ দৈর্ঘ্যের জন্য আগাম ক্ষমা চেয়েছি।

এখানে কিছু অসীম পাইথন এবং জাভাস্ক্রিপ্টের সাথে JSON ব্যবহার করার জন্য আমাদের গাইড থেকে জাভাস্ক্রিপ্ট:

---

---

// 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')});

এইবার ছিল শুধু a 26 শতাংশ হ্রাস - কোডের এমন একটি ছোটখাট ব্লকের জন্য এটি এখনও খুব ভাল।

আমাদের গাইড থেকে জাভাস্ক্রিপ্ট এবং DOM- এর একটি চূড়ান্ত উদাহরণ:

//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 শতাংশ :

100% ডিস্ক ব্যবহার উইন্ডোজ 10 ঠিক করে

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

কিছু সাধারণ জাভাস্ক্রিপ্ট লাইব্রেরির আকার তাদের ছোট করা সংস্করণের তুলনায় এখানে দেওয়া হল:

1. উচ্চ চার্ট: 1 এমবি> 201 কেবি
2. jQuery: 270 KB> 90 KB
3. MooTools: 164 KB> 93 KB

এই লাইব্রেরিগুলির কিছু সংকুচিত করার সময় একটি উল্লেখযোগ্য আকার হ্রাস দেখায় ( ~ 80 শতাংশ ), যখন অন্যরা খুব ভাল নয় ( ~ 40 শতাংশ )। এটি বলেছিল, যে কোনও সঞ্চয় আপনার ব্যবহারকারীদের জন্য আপনার ওয়েবসাইটকে আরও দ্রুত করে তুলবে এবং আপনার ওয়েব সার্ভারের চাপ কমিয়ে দেবে।

আপনি কিভাবে ছোট করবেন?

এখন আপনি জানেন যে এটি কীভাবে কাজ করে এবং এটি কেমন দেখাচ্ছে, আসুন এটি কীভাবে করা যায় সে সম্পর্কে ডুব দিন। চিন্তা করবেন না, আপনার কোডটি ম্যানুয়ালি সংশোধন করার দরকার নেই! এখানে বিভিন্ন ধরণের সরঞ্জাম রয়েছে যা আপনার জন্য প্রক্রিয়াটি পরিচালনা করে।

এইগুলি বিভিন্ন উপায়ে কাজ করে। বেশিরভাগ অনলাইন টুলস আপনাকে কোডটি কপি এবং পেস্ট করার অনুমতি দেয়, যা তারা তখন প্রক্রিয়া করবে এবং পৃষ্ঠায় আপনার কাছে ফিরে আসবে। এই সরঞ্জামগুলি আপনাকে প্রায়শই একাধিক ফাইল আপলোড করতে দেয়।

এখানে অনলাইন সরঞ্জামগুলির একটি সংক্ষিপ্ত বিবরণ রয়েছে। তারা বেশিরভাগই একই কাজ করে তাই কোনটি বেছে নেবেন সে সম্পর্কে আপনাকে খুব বেশি চিন্তা করতে হবে না।

JSCompress - আমি ব্যক্তিগতভাবে এই ওয়েবসাইটটি সবচেয়ে বেশি ব্যবহার করি যদি এটি একটি দ্রুত কাজ। এটি দ্রুত চালানো এবং তারা আপনাকে এটি তৈরি করতে ব্যবহৃত সরঞ্জামগুলিও দেখায়।

জাভাস্ক্রিপ্ট মিনিফায়ার - এই সরঞ্জামটি ভাল কাজ করে, কিন্তু এটি সত্যিই একটি API হিসাবে উজ্জ্বল। এটি আপনাকে তাদের বিদ্যমান ওয়েবসাইটের উপরে আপনার নিজস্ব ইন্টিগ্রেশন বা পরিষেবা তৈরি করতে দেয়।

জাভাস্ক্রিপ্ট মিনিফায়ার - একই নামের আরেকটি ওয়েবসাইট, এই টুলটি যত সহজ তারা আসে। কোনও বিকল্প বা মেনু নেই, কেবল একটি বোতাম।

ছোট করুন - এই ওয়েবসাইটটি আশ্চর্যজনক দেখাচ্ছে, এবং ডেভেলপাররা স্পষ্টভাবে এখানে বিস্তারিত বিবরণ মনোযোগ দিয়েছেন।

এই তালিকা চিরকাল চলতে পারে। ওয়েবসাইটগুলি ছোট করার জন্য অনেকগুলি অনলাইন সরঞ্জাম রয়েছে যা ভুল হওয়া কঠিন।

কমান্ড লাইন টুলস বা প্লাগইন হিসেবে মিনিফাইং টুলসও বিদ্যমান জাভাস্ক্রিপ্ট সম্পাদক । এই সরঞ্জামগুলি প্রায়ই ব্যবহার করা অনেক দ্রুত, এবং আপনার বিদ্যমান কোডের সাথে 'শুধু কাজ' করে। কপি এবং পেস্ট করার কোন প্রয়োজন নেই, এবং আপনাকে আপনার জাভাস্ক্রিপ্ট কোন HTML বা CSS থেকে বের করতে হবে না যা একই ফাইলে থাকতে পারে।

আপনি যদি মাইক্রোসফট ভিসুয়াল স্টুডিও ব্যবহার করেন, বান্ডলার এবং মিনিফায়ার মার্কেটপ্লেস থেকে এক্সটেনশনের 600,000 টিরও বেশি ইনস্টল রয়েছে! শুধু তাই নয়, এটি নিয়মিত আপডেট করা হয় এবং GitHub এ উপলব্ধ ।

আপনি যদি ভক্ত হন সাবলাইম টেক্সট আমি যেমন, তারপর ছোট করুন প্যাকেজ আপনি চান। 61,000 এরও বেশি ইনস্টলেশনের সাথে, এটি একটি খুব জনপ্রিয় প্যাকেজ, এবং এটিও GitHub এ উপলব্ধ , যদি আপনি একটি ওপেন সোর্স প্রকল্পে অবদান রাখতে চান।

অবশেষে, যদি আপনি একজন হন পাইচার্ম ব্যবহারকারী, আপনি পারেন এটি সংহত করার জন্য কনফিগার করুন সরাসরি অনেক সাধারণ কম্প্রেশন টুলস যেমন YUI সংকোচকারী । এই সরঞ্জামগুলির মধ্যে অনেকগুলি উপরে তালিকাভুক্ত অনলাইন সরঞ্জামগুলিকে সরাসরি ক্ষমতা দেয়।

সাবধান

সেখানে আছে ধরার অধিকার? কোন কিছুই কখনো নিখুঁত হতে পারে না। আচ্ছা, হ্যাঁ, একটি সমস্যা আছে, কিন্তু এটি মোটামুটি ছোটখাট এবং সহজেই কাজ করে:

মিনিফাইড কোডটি তার মূল অবস্থায় ফিরিয়ে আনা যাবে না।

যখন আপনি কোন কোড ছোট করেন, তার মূল ফর্মটি হারিয়ে যায়। যদি আপনি সহজেই বড় পরিবর্তন করার কোন আশা রাখতে চান তবে আপনাকে এর একটি অনুলিপি রাখতে হবে - এটি সংস্করণ নিয়ন্ত্রণ ব্যবহার করার জন্য যথেষ্ট নয়।

যদিও এটা সম্ভব unminify আপনার কোড, এটি আবার কখনও একই রকম নয়। আপনার সব মূল্যবান মন্তব্য হারিয়ে গেছে, একটি জিনিসের জন্য।

এটি একটি বিশাল সমস্যা নয়, তবে কোডিং করার সময় আপনাকে এটি মনে রাখতে হবে। একটি মৌলিক নিয়ম হিসাবে, অসম্পূর্ণ > উন্নয়নশীল এবং সংকুচিত > উৎপাদন।

এখন আপনি জাভাস্ক্রিপ্টকে ছোট করার বিষয়ে জানার জন্য সবকিছু জানেন! কোডকে মিনিফাই করা হচ্ছে একটি সার্ভার থেকে কর্মক্ষমতা ছিঁড়ে ফেলার অন্যতম উপায়, এবং সমস্ত বড় ওয়েবসাইট এটি করছে।

আপনার কোডটি ছোট করার জন্য আপনি কোন সরঞ্জামগুলি ব্যবহার করেন? আপনি এমনকি বিরক্ত? নীচের মতামত আমাদের জানতে দিন!

নাম সাইন ইন করুন উইন্ডোজ ১০

ইমেজ ক্রেডিট: শাটারস্টক হয়ে নাভিনটার

শেয়ার করুন শেয়ার করুন টুইট ইমেইল ডিস্ক স্পেস খালি করতে এই উইন্ডোজ ফাইল এবং ফোল্ডারগুলি মুছুন

আপনার উইন্ডোজ কম্পিউটারে ডিস্ক স্পেস খালি করতে হবে? এখানে উইন্ডোজ ফাইল এবং ফোল্ডার রয়েছে যা ডিস্কের স্থান খালি করতে নিরাপদে মুছে ফেলা যায়।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• জাভাস্ক্রিপ্ট
• জাভা
• ওয়েব ডিজাইন

লেখক সম্পর্কে জো কোবার্ন(136 নিবন্ধ প্রকাশিত)

জো যুক্তরাজ্যের লিংকন বিশ্ববিদ্যালয় থেকে কম্পিউটার বিজ্ঞানে স্নাতক। তিনি একজন পেশাদার সফটওয়্যার ডেভেলপার, এবং যখন তিনি ড্রোন উড়াচ্ছেন না বা সঙ্গীত লিখছেন না, তখন তাকে প্রায়ই ফটো তুলতে বা ভিডিও তৈরি করতে দেখা যায়।

জো কোবার্ন থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন