ضواغط جافا سكريبت: كيف ولماذا تصغير JS الخاص بك

لقد تعلمت أننا كنا جميعًا هناك كيفية بناء موقع رائع ، ولكن بمجرد نشره ، يصبح بطيئًا بشكل لا يطاق.

يعد تصغير جافا سكريبت طريقة واحدة لتسريع أوقات استجابة موقع الويب (جنبًا إلى جنب مع ضغط HTML ) ، ولحسن حظك ، إنها عملية سهلة. سأريك اليوم كل ما تريد أن تعرفه.

ماذا يعني تصغير؟

عملية تصغير (أو تصغير ) مفهوم بسيط. عندما تكتب تعليمات برمجية بلغة جافا سكريبت أو أي لغة أخرى ، فهناك العديد من الميزات المطلوبة فقط لتسهيل فهم الكود على البشر - لا تهتم أجهزة الكمبيوتر بما تسميه متغيراتك ، أو مقدار التباعد حول الأقواس ، على سبيل المثال.

من خلال تصغير الرمز ، يمكنك تقليل حجم ملفه بشكل كبير. لذلك سيكون تنزيل الملف الأصغر أسرع بالنسبة للمستخدمين. إذا كنت تكتب سطرًا واحدًا أو سطرين فقط من JavaScript ، فمن المحتمل ألا يكون هناك تحسن ملحوظ. ومع ذلك ، إذا كنت تكتب الكثير من التعليمات البرمجية ، أو تستخدم مكتبات كبيرة مثل jQuery ، فمن السهل تحقيق زيادات ملحوظة في الأداء وتقليل أحجام الملفات بشكل كبير!

إذا قمت بتحميل رمز من CDN خارجي ، مثل مكتبات Google المستضافة ، لقد استخدمت رمزًا مصغرًا.

كيفية إجراء استعادة النظام على نظام التشغيل windows 10

كيف تبدو الكود المصغر؟

لنلق نظرة على بعض الأمثلة. من الصعب رؤية تأثير التصغير على قواعد التعليمات البرمجية الصغيرة ، لذلك أعتذر مقدمًا عن طولها الطويل.

هنا بعض غير مصغر JavaScript من دليلنا لاستخدام JSON مع Python و JavaScript:

// 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 بالمائة تقليل - لا يزال هذا جيدًا جدًا لمثل هذه الكتلة الصغيرة من التعليمات البرمجية.

إليك مثال أخير من دليلنا إلى Javascript و 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 بالمائة :

ما الذي تفعله ميزة الجلب الفائق في نظام التشغيل Windows 10

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

فيما يلي أحجام بعض مكتبات JavaScript الشائعة مقارنة بإصداراتها المصغرة:

هاي شارتس: 1 ميجا بايت> 201 كيلو بايت
مسج: 270 كيلوبايت> 90 كيلوبايت
Moo الأدوات: 164 كيلوبايت> 93 كيلوبايت

تُظهر بعض هذه المكتبات انخفاضًا كبيرًا في الحجم عند الضغط ( ~ 80 بالمائة ) ، في حين أن البعض الآخر ليس جيدًا جدًا ( ~ 40 بالمائة ). ومع ذلك ، فإن أي حفظ سيجعل موقع الويب الخاص بك أسرع للمستخدمين ، ويقلل من الضغط على خادم الويب الخاص بك.

كيف تصغر؟

الآن أنت تعرف كيف يعمل وكيف يبدو ، دعنا نتعمق في كيفية القيام بذلك. لا تقلق ، ليس هناك حاجة لتعديل التعليمات البرمجية يدويًا على الإطلاق! هناك مجموعة متنوعة من الأدوات المتاحة مجانًا والتي تتعامل مع العملية نيابة عنك.

هذه تعمل بعدة طرق. تسمح لك معظم الأدوات عبر الإنترنت بنسخ الشفرة ولصقها ، والتي ستعالجها بعد ذلك وتعود إليك على الصفحة. ستتيح لك هذه الأدوات غالبًا تحميل ملفات متعددة أيضًا.

فيما يلي عرض موجز للأدوات المتوفرة عبر الإنترنت. إنهم يعملون في الغالب بنفس الطريقة ، لذا لا داعي للقلق كثيرًا بشأن أي واحد تختار.

شبيبة ضغط - أنا شخصياً أستخدم هذا الموقع أكثر من غيره إذا كان مجرد عمل سريع. إنه سريع التشغيل ويظهر لك حتى الأدوات التي استخدموها في بنائه.

مصغر جافا سكريبت - تعمل هذه الأداة بشكل جيد ، لكنها تتألق حقًا كواجهة برمجة تطبيقات. يتيح لك هذا إنشاء التكامل أو الخدمة الخاصة بك فوق موقع الويب الحالي الخاص بهم.

JavaScript Minifier - موقع ويب آخر بنفس الاسم ، هذه الأداة بسيطة بقدر ما تأتي. لا توجد خيارات أو قوائم ، زر واحد فقط.

تصغير - يبدو هذا الموقع مذهلاً ، وقد أولى المطورون اهتمامًا واضحًا بالتفاصيل هنا.

هذه القائمة يمكن أن تستمر إلى الأبد. هناك العديد من الأدوات عبر الإنترنت لتقليل مواقع الويب التي يصعب ارتكابها بشكل خاطئ.

توجد أدوات التصغير أيضًا كأدوات سطر أوامر أو مكونات إضافية لملف محرر جافا سكريبت . غالبًا ما تكون هذه الأدوات أسرع في الاستخدام ، وتعمل فقط مع التعليمات البرمجية الموجودة لديك. ليست هناك حاجة للنسخ واللصق ، ولا يتعين عليك استخراج JavaScript من أي HTML أو CSS قد يكونان في نفس الملف.

إذا كنت تستخدم Microsoft Visual Studio ، فإن ملف التجميع والمُصغر التمديد من السوق لديه أكثر من 600000 تثبيت! ليس ذلك فحسب ، بل يتم تحديثه بانتظام و متاح على جيثب .

إذا كنت من محبي نص سامي مثلي ، ثم تصغير الحزمة هي التي تريدها. مع أكثر من 61000 عملية تثبيت ، إنها حزمة شائعة جدًا ، وواحدة أيضًا متاح على جيثب ، إذا كنت ترغب في المساهمة في مشروع مفتوح المصدر.

أخيرًا ، إذا كنت أحد PyCharm المستخدم ، يمكنك ذلك تكوينه لدمج مباشرة مع العديد من أدوات الضغط الشائعة مثل ضاغط YUI . تعمل العديد من هذه الأدوات مباشرة على تشغيل الأدوات عبر الإنترنت المذكورة أعلاه.

تحفظات

هناك لديها ليكون صيدا صحيحا؟ لا شيء يمكن أن يكون مثاليا. حسنًا ، نعم ، هناك مشكلة واحدة ، لكنها بسيطة إلى حد ما ويمكن حلها بسهولة:

لا يمكن استعادة الرمز المصغر إلى حالته الأصلية.

عند تصغير أي رمز ، يتم فقد شكله الأصلي. تحتاج إلى الاحتفاظ بنسخة منه إذا كنت تريد أن يكون لديك أي أمل في إجراء تغييرات كبيرة بسهولة - لا يكفي استخدام التحكم في الإصدار.

في حين أنه من الممكن تلغى شفرتك ، لم تعد كما كانت تمامًا مرة أخرى. فقدت كل تعليقاتك القيمة ، لشيء واحد.

هذه ليست مشكلة كبيرة ، ولكن عليك أن تضعها في اعتبارك عند البرمجة. كقاعدة أساسية ، غير مضغوط > تطوير و مضغوط > الإنتاج.

أنت الآن تعرف كل شيء يجب معرفته حول تصغير JavaScript! يعد تصغير الكود أحد الطرق لإخراج الأداء من الخادم ، وتقوم جميع مواقع الويب الكبيرة بذلك.

ما هي الأدوات التي تستخدمها لتقليل الكود الخاص بك؟ هل تهتم حتى؟ اسمحوا لنا أن نعرف في التعليقات أدناه!

كيف ترسل رسالة على اليوتيوب

حقوق الصورة: NavinTar عبر Shutterstock

يشارك يشارك سقسقة بريد الالكتروني احذف ملفات ومجلدات Windows هذه لتحرير مساحة على القرص

هل تحتاج إلى إفراغ مساحة القرص على جهاز الكمبيوتر الذي يعمل بنظام Windows؟ فيما يلي ملفات ومجلدات Windows التي يمكن حذفها بأمان لتحرير مساحة على القرص.

اقرأ التالي مواضيع ذات صلة

برمجة
جافا سكريبت
جافا
تصميم المواقع

نبذة عن الكاتب جو كوبيرن(تم نشر 136 مقالاً)

تخرج جو في علوم الكمبيوتر من جامعة لينكولن بالمملكة المتحدة. إنه مطور برامج محترف ، وعندما لا يطير بطائرات بدون طيار أو يكتب الموسيقى ، يمكن العثور عليه في كثير من الأحيان يلتقط الصور أو ينتج مقاطع فيديو.

المزيد من Joe Coburn

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك