كيفية تصغير JavaScript: دليل خطوة بخطوة للمطورين المبتدئين

جدول المحتويات:

1. لماذا تصغير JavaScript؟ #
2. فوائد تصغير JavaScript #
3. التصغير مقابل التشويش #
4. أدوات عبر الإنترنت لتقليل JavaScript #
5. تصغير JavaScript بأدوات وخدمات أخرى #

لماذا تصغير JavaScript؟

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

 let doResizeResult = () => { console .log( window .innerWidth); } // main function let debounce = ( callback, delay ) => { let myTimeout; return () => { clearTimeout(myTimeout); myTimeout = setTimeout( () => { callback() }, delay); }; }; let doDebounce = debounce( () => doResizeResult(), 1000 ) window .addEventListener( 'resize' , () => doDebounce()); لغة الكود: جافا سكريبت ( جافا سكريبت )

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

إذا كنت سأستخدم مصغر JavaScript لتصغير هذا الرمز ، فسيبدو عندئذٍ مثل هذا:

 let doResizeResult= () => { console .log( window .innerWidth)},debounce= ( e,d )=> { let n; return () => {clearTimeout(n),n=setTimeout( () => {e()},d)}},doDebounce=debounce( () => doResizeResult(), 1e3 ); window .addEventListener( "resize" ,()=>doDebounce()); لغة الكود: جافا سكريبت ( جافا سكريبت )

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

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

فوائد تصغير JavaScript

لإعطائك فكرة عن مقدار حجم الملف الذي يتم حفظه عند تصغير مقتطف مثل المقتطف أعلاه:

• قبل التصغير: 384 بايت
• بعد التصغير: 232 بايت

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

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

التصغير مقابل التشويش

تصغير جافا سكريبت يختلف عن تشويش جافا سكريبت. ومع ذلك ، فمن الصحيح أن التصغير سيجعل قراءة JavaScript أكثر صعوبة. لكنها ليست "مشوشة" ​​تمامًا ومن السهل تجميل (أي "إلغاء تصغير") كود JavaScript. يبدو تشويش جافا سكريبت مختلفًا تمامًا.

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

 var _0xc3ef=[ "\x69\x6E\x6E\x65\x72\x57\x69\x64\x74\x68" , "\x6C\x6F\x67" , "\x72\x65\x73\x69\x7A\x65" , "\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72" ]; let doResizeResult= () => { console [_0xc3ef[ 1 ]]( window [_0xc3ef[ 0 ]])}; let debounce= ( _0xf855x3,_0xf855x4 )=> { let _0xf855x5; return () => {clearTimeout(_0xf855x5);_0xf855x5= setTimeout( () => {_0xf855x3()},_0xf855x4)}}; let doDebounce=debounce( () => { return doResizeResult()}, 1000 ); window [_0xc3ef[ 3 ]](_0xc3ef[ 2 ],()=>{ return doDebounce()}) لغة الكود: جافا سكريبت ( جافا سكريبت )

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

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

وبالتالي ، يمكنك تصغير JavaScript وحدها ؛ يعد تشويش جافا سكريبت أمرًا مبالغًا فيه في معظم الحالات.

أدوات عبر الإنترنت لتقليل JavaScript

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

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

برنامج Toptal JavaScript Minifier

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

أداة JavaScript Minify الخاصة بالمحيط الرقمي

توفر أداة Digital Ocean minify عددًا من إعدادات التكوين المختلفة ، بما في ذلك القدرة على إزالة التعليمات البرمجية غير المستخدمة وعبارات console.log() الضالة جنبًا إلى جنب مع التصغير. يمكنك أيضًا الاختيار من بين ثلاثة إعدادات تكوين مسبقة للتقليل بشكل أسرع.

تصغير

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

bundlejs

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

شبيبة ضغط

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

برنامج JavaScript Minifier بواسطة FreeFormatter.com

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

تصغير JS على الإنترنت

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

JavaScript Minifier بواسطة BeautifyTools

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

شبيبة تصغير

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

تصغير JavaScript بأدوات وخدمات أخرى

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

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

إذا كنت تستخدم إحدى أدوات الإنشاء العديدة المتاحة ، مثل Webpack و Parcel.js و esbuild و Snowpack وما إلى ذلك ، فيمكن إجراء التصغير تلقائيًا. لن يتم تصغير رمز التطوير الخاص بك ، ولكن عندما تكون مستعدًا لدفع تغييراتك إلى الإنتاج ، سيتم إنشاء التعليمات البرمجية الجديدة تلقائيًا باستخدام الميزات المحددة ، بما في ذلك تصغير JavaScript.

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

هناك أيضًا شبكات توصيل المحتوى (CDN) والخدمات ذات الصلة التي تتيح لك تصغير JavaScript تلقائيًا أثناء تقديمها من موقع الويب الخاص بك. هذا مشابه لتحسين الصورة أثناء التنقل.

إحدى هذه الخدمات هي JsDelivr. JsDelivr هو CDN سريع مجاني للمشاريع مفتوحة المصدر ومحسّن لتقديم محتوى JavaScript من npm و GitHub. كما هو موضح في وثائقهم:

سنحاول أولاً تحديد موقع نسخة مصغرة من الملف ... (عن طريق إزالة الامتداد والبحث عن نفس الملف .min.js ). إذا لم نتمكن من العثور على واحد فسنقلل من حجم أنفسنا.

يوفر هذا أداءً قويًا عن طريق التسليم نفسه ، جنبًا إلى جنب مع التقليل إذا لزم الأمر.

ملخص حول كيفية تصغير JavaScript

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

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