كيفية تصغير JavaScript - الأدوات والطرق الموصى بها

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

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

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

يمكن أن يكون تصغير JavaScript أمرًا صعبًا. في هذه المقالة ، سنقوم برسم دورة لمساعدتك في تصغير كود JavaScript لمواقع WordPress والمواقع الأخرى بخلاف WordPress.

ما هو جافا سكريبت؟

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

في حين أن HTML و CSS يبنيان بنية موقع الويب ، فإن JavaScript يضيف ميزات معقدة تجلب التفاعل إلى موقع الويب الخاص بك لإشراك المستخدمين. على سبيل المثال ، تقدم JavaScript عناصر معقدة مثل تمرير الفيديو الموسيقي ومقاطع الفيديو ثنائية الأبعاد / ثلاثية الأبعاد والخرائط التفاعلية.

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

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

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

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

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

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

أمثلة على كود JavaScript غير المصغر مقابل Minified JavaScript Code

دعنا نلقي نظرة على بعض نماذج التعليمات البرمجية. هذه الكتلة الأولى هي JavaScript عادي وغير مصغر:

 // program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

الآن ، دعنا نرى كيف يبدو هذا الرمز نفسه بمجرد تصغيره:

 function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

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

هنا ، قمنا بتقليل 529 بايت إلى 324 بايت ، والحصول على 205 بايت من المساحة الحرة وتقليل تحميل الصفحة بنسبة 40٪ تقريبًا.

إنه يشبه أخذ كتاب من 529 صفحة وتكثيفه في كتاب من 324 صفحة. بالطبع ، سيكافح الإنسان لقراءتها ، لكن الآلة ستسرع من خلالها دون مشكلة.

عند توصيل عدة ملفات JavaScript بملف فردي مصغر ، فإن تصغير الكود يقلل من عدد طلبات HTTP إلى الخادم. هذا يقلل أيضًا من استهلاك النطاق الترددي للموقع. علاوة على ذلك ، يقلل تصغير الكود من وقت تشغيل البرنامج النصي - كل الأشياء التي تقلل من وقتك إلى البايت الأول (TTFB).

لماذا يجب عليك تصغير كود JavaScript؟

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

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

يمكن للنسخة المصغرة من كود JavaScript تقليل حجم الملف بنسبة تصل إلى 30-90٪. وبالتالي ، أصبح تصغير JavaScript من الطقوس المألوفة لجميع المطورين.

يوفر كل مطور رئيسي لمكتبة جافا سكريبت (Angular و Bootstrap وما إلى ذلك) إصدارًا مصغرًا من JavaScript لنشر الإنتاج. ويستخدم كل واحد امتداد min.js للإشارة إلى ذلك.

فوائد تصغير كود JavaScript

فيما يلي ملخص موجز للفوائد التي ستحققها بعد استخدام تصغير JavaScript:

• تقليل وقت تحميل الصفحة
• أقل استهلاك النطاق الترددي لموقع الويب الخاص بك
• وقت تنفيذ البرنامج النصي أقل
• عدد أقل من طلبات HTTP إلى الخادم (وتحميل أخف على)
• الحماية من السرقة (النسخ المصغرة أو المصغرة معقدة القراءة والسرقة لإعادة الاستخدام)

الفرق بين JavaScript Minification و Uglification و Compression

يتشابه تصغير JavaScript أو تصغيره أو ضغطه في وظائفها. ومع ذلك ، لديهم أغراض مختلفة.

يؤدي تقصير JavaScript إلى إعادة كتابة التعليمات البرمجية لجعلها أقل قابلية للقراءة من قبل الإنسان. تزيل العملية المسافة البيضاء والفاصلة المنقوطة والتعليقات أثناء إعادة تسمية المتغيرات والوظائف المضمنة لجعل الشفرة صعبة القراءة.

تحتوي JavaScript على مكتبة تسمى UglifyJS لتقليل الشفرة تلقائيًا. يحسن الأداء ويقلل من إمكانية القراءة لجعل الكود آمنًا وأقل جاذبية للصوص.

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

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

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

كيفية تصغير كود جافا سكريبت

يمكنك تصغير كود JavaScript الخاص بك بعدة طرق. تتخذ كل طريقة من هذه الأساليب نهجًا متميزًا عن الطرق الأخرى.

يكاد يكون من المستحيل تصغير جميع الرموز في ملفات JavaScript الكبيرة يدويًا. لا يمكن تصغير ملفات JavaScript يدويًا إلا للملفات الصغيرة لأنها تستغرق وقتًا طويلاً.

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

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

كيفية تصغير JavaScript يدويًا: أفضل 5 أدوات

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

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

فيما يلي أفضل أدوات تصغير JavaScript التي يمكن أن تساعدك في تحسين أداء الويب الخاص بك.

1. JSMin

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

لذلك ، سيوفر الحجم المصغر فرصًا للتنزيل السريع. ستلاحظ أيضًا زيادة في أسلوب البرمجة التواصلي مثل تكلفة تنزيل المستندات الذاتية الأدبية الجديدة.

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

2. Microsoft Ajax تصغير

يمكّنك Microsoft Ajax Minifier من تحسين أداء تطبيقات الويب الخاصة بك عن طريق تقليل حجم ملفات JavaScript و CSS. يقوم بحذف التعليقات والمسافات غير الضرورية والفواصل المنقوطة والوظائف والأقواس.

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

باستخدام AjaxMin ، يمكنك تحليل الإنتاجية وشحن أداة تصغير JS في الخلفية. وعندما يكمل التصغير ، يمكنك فتح مجلد الإنتاجية.

3. Google Closure Compiler

يعد Google Closure Compiler أداة أخرى ممتازة لتصغير JavaScript. يقوم بصياغة JavaScript للتنزيل السريع والأداء الأكثر سلاسة. كما يتحقق من بناء الجملة والاقتراحات القابلة للتغيير ، ويزيل الأكواد والأنواع الميتة ، ويعلمك بشأن عيوب JavaScript. تقوم هذه الأداة بتجميع JavaScript الخاص بك وتقييمه وإزالة التعليمات البرمجية الزائدة عن الحاجة وإعادة كتابتها.

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

4. ضاغط YUI

YUI compressor عبارة عن أداة تصغير JavaScript و CSS بسطر الأوامر والتي تضمن لك نسبة ضغط أعلى من معظم الآخرين. إنها أداة تصغير مكتوبة بلغة Java وتعتمد على Rhino لترميز ملف JavaScript المصدر.

أولاً ، تفحص YUI ملف JavaScript المصدر لتحديد بنائه. ثم يقوم بطباعة تيار الرمز المميز. بعد ذلك ، يزيل أكبر عدد ممكن من أحرف المسافات البيضاء ويستبدل جميع الرموز المحلية برمز حرف 1 (أو 2 أو 3).

نظرًا لأن YUI Compressor مفتوح المصدر ، يمكنك فحص الكود المصدري لمعرفة كيفية عمله. بالإضافة إلى ذلك ، YUI هي أداة تصغير JavaScript الأكثر أمانًا مع نسبة ضغط بليغة.

5. UglifyJS

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

أيضًا ، يمكن أن يستغرق الأمر عدة ملفات إدخال في وقت واحد ، وتحليل ملفات الإدخال أولاً ، ثم تحليل الخيارات.

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

كيفية تصغير JavaScript تلقائيًا: أفضل 5 أدوات عبر الإنترنت

هناك وفرة من مصغرات JavaScript على الإنترنت لضغط شفرتك على الإنترنت. تتبع جميع أدوات تصغير JavaScript عبر الإنترنت تقريبًا عملية تصغير مماثلة.

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

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

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

1. Toptal JavaScript Minifier

يوفر Toptal JavaScript Minifier أداة تصغير جافا سكريبت فعالة ومباشرة عبر الإنترنت حيث يمكنك تكثيف JavaScript الخاص بك في غضون ثوانٍ قليلة. كما يسمح لك بتحويل الشفرة إلى ملف .js لاستخدامها في المستقبل.

2. JSCompress

يمكن لـ JSCompress تصغير وتقليل حجم JavaScript بنسبة 80٪. إنه يوفر واجهة بسيطة للنقر والذهاب حيث يمكنك إما لصق التعليمات البرمجية الخاصة بك أو تحميل ملف .js الخاص بك لتصغيره. ستتلقى الإخراج المصغر كرمز نظيف وقابل للنسخ بدلاً من ملف .js . والجدير بالذكر أن الأداة تستخدم UglifyJS و Babel-minify لتصغير وضغط JavaScript.

3. Minifier.org

يعد Minfier.org أحد أبسط مُصغرات JavaScript التي يمكنك استخدامها لتقليل أكوادك. يستخدم طرقًا متعددة لتقليل كود JavaScript. تزن الأداة حجم شفرة JavaScript قبل وبعد عملية التصغير. ثم يقوم بحساب كسب البرنامج النصي بعد التصغير ويعرضه على الشاشة.

4. TutorialsPoint Online JavaScript Minifier

يمكنك إدخال ملف .js أو توفير عنوان URL أو لصق التعليمات البرمجية الأولية مباشرة إلى أداة المصغر TutorialsPoint JavaScript. تحتوي الأداة على حقل قابل للتعديل للرمز مباشرة إذا كنت ترغب في ذلك. بالإضافة إلى ذلك ، يحتوي على خيار تصغير بنقرة واحدة ، ويمكنك تنزيل الكود المصغر في ملف .js .

5. باكر: Dean Edwards JavaScript Compressor

إذا كنت بحاجة إلى ضغط كود JavaScript الخاص بك ، فيمكن أن يوفر لك Packer by Dean Edwards واحدة من أكثر تجارب ضغط JavaScript على الإنترنت إرضاءً. إنه يعمل مع رموز / ذرات JavaScript وأنماط البت والبايت.

علاوة على ذلك ، فإنه يتيح لك تنفيذ خيار تشفير Base62 وخيار تقليص متغيرات أثناء تصغير الكود الخاص بك. لتصغير كود JS الخاص بك ، انسخه والصقه في JavaScript واضغط على زر الحزمة. سيقوم تلقائيًا بإنشاء رمز مصغر لك.

كيفية تصغير JavaScript في WordPress: أفضل 5 أدوات وإضافات

يتبع تصغير JavaScript إجراءً مختلفًا في WordPress. يتطلب تصغير JavaScript إما دعم المضيف أو تثبيت مكون WordPress الإضافي. بعد تثبيت مكون إضافي لتصغير WordPress ، سيهتم بعملية التصغير نيابة عنك.

هناك العديد من ملحقات WordPress لتصغير JavaScript. تتبع معظم هذه المكونات الإضافية نفس الإجراء الخاص بالتصغير ويمكن تشغيلها من لوحة معلومات WordPress.

دعنا نستكشف بعضًا من أكثر الأدوات فعالية لتعديل JavaScript في WordPress:

1. تصغير الكود في MyKinsta

إذا كنت أحد عملاء Kinsta ، فيمكنك استخدام ميزة تصغير الشفرة لتقليل ملفات JS و CSS لموقعك. كل ما عليك فعله هو تمكين Kinsta CDN وتحديد اثنين من مربعات الاختيار في لوحة معلومات MyKinsta. لست مضطرًا إلى تثبيت أي مكونات إضافية لجهات خارجية - سيتم الآن تصغير ملفاتك.

يحدث هذا التصغير على شبكة الحافة الخاصة بـ Cloudflare ، والتي تعمل أيضًا على تشغيل Kinsta CDN. يتم أيضًا تخزين جميع ملفاتك المصغرة مؤقتًا على شبكة Cloudflare ، مما يُترجم إلى مزايا أداء إضافية.

2. W3 إجمالي ذاكرة التخزين المؤقت

يتيح لك W3 Total Cache تصغير JavaScript و CSS و HTML من خلال التحكم الدقيق. علاوة على ذلك ، يسمح لك بتقليل أي كود JavaScript أو CSS مضمن أو مضمن أو تابع لجهة خارجية. كما أنه يفسد JavaScript و CSS لتحميل الصفحة بشكل أسرع ، بصرف النظر عن التصغير. علاوة على ذلك ، توفر المكونات الإضافية العديد من فرص تصغير JavaScript لمواقع WordPress.

3. WP- الأمثل

WP-Optimize هو مكون إضافي لتحسين WordPress يوفر أداة تصغير متقدمة لتقليل CSS و JavaScript جنبًا إلى جنب مع مسح ذاكرة التخزين المؤقت وتحسين موقع WordPress الخاص بك. كما أنه يمكّنك من تأجيل CSS و JavaScript. ونتيجة لذلك ، يقوم الموقع بتحميل الأصول غير الهامة بعد تحميل الصفحة الرئيسية ، مما يؤدي إلى تحسين أداء الصفحة.

4. التحسين التلقائي

Autoptimize هو مكون إضافي لتصغير WordPress يقوم بتجميع CSS وجافا سكريبت غير المجمعة وتقليلها وتخزينها مؤقتًا لتقليل وقت تحميل الصفحة وتحسين أداء موقع الويب الخاص بك. يمكنه تصغير البرامج النصية وتخزينها مؤقتًا ، ومضمنة JavaScript المهمة ، وعدم مزامنة JavaScript غير المجمعة.

إذا كنت تتطلع إلى مكون إضافي لتصغير WordPress JavaScript سيركز بشكل أساسي على أداء موقع الويب الخاص بك ، فإن Autoptimize هو خيار ممتاز.

5. السرعة تصغير

تقدم Fast Velocity Minify تصغير JavaScript و CSS و HTML متقدم لمستخدمي WordPress. يقوم بالتصغير على الواجهة الأمامية عند حدوث أول طلب غير مؤقت. إلى جانب ذلك ، يحتوي البرنامج المساعد على واجهة مستخدم مباشرة وسهولة الاستخدام.

ملخص

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

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

هل فاتنا أي أداة تصغير JavaScript أو مكون إضافي لتصغير WordPress تريده؟ دعنا نعلم فى قسم التعليقات!