14 أدوات لتقليص جافا سكريبت
جافا سكريبت تصغير هو الأسلوب الذي يتكثف البرنامج النصي الخاص بك في بصمة أصغر بكثير. تفقد قابلية قراءة الإنسان لكنك تحافظ على نطاق ترددي كبير - في النهاية, المقصود Javascript لمتصفحك وليس للمستخدمين.
تستخدم معظم مواقع الإنتاج عملية تصغير جافا سكريبت ، لكن الطريقة التي يتم بها تحقيق ذلك تختلف بشكل كبير. من المحولات البسيطة عبر الإنترنت إلى أدوات واجهة المستخدم الرسومية الأكثر شمولية إلى واجهات سطر الأوامر ، فإن خياراتنا متنوعة إلى حد كبير. في هذه المقالة سوف نلقي نظرة على كيف يعمل تصغير جافا سكريبت, كيف يمكننا أن نبنيها في سير العمل لدينا وما هي إيجابيات وسلبيات التصغير.
كيف يعمل التصغير
أفضل طريقة لمعرفة ما يحدث عند تصغير الكود هي إلقاء نظرة على مستودع UglifyJS Github. يتم استخدام هذا البرنامج النصي في العديد من المحولات عبر الإنترنت وكذلك أدوات واجهة المستخدم الرسومية وأدوات سطر الأوامر مثل Grunt. فيما يلي بعض التحويلات التي يتم تطبيقها لجعل الكود الخاص بك أقصر:
- يزيل مساحة غير ضرورية
- تقصير أسماء المتغيرات ، وعادة إلى أحرف واحدة
- ينضم إلى إعلانات var المتتالية
- تحويل الصفائف إلى كائنات حيثما كان ذلك ممكنًا
- يحسن لو البيانات
- يحسب تعبيرات ثابتة بسيطة
- إلخ.
كمثال سريع ، إليك وظيفة تكتب بشكل أساسي بعض النص المعطى.
وظيفة مرحبا (النص) document.write (النص) ؛
مرحبًا ("مرحبًا بك في المقالة") ؛ دعونا نرى ما يحدث عندما نقوم بتصغير هذا. لاحظ إزالة المسافات والمسافة البادئة وتقصير متغير النص.
الوظيفة hello (e) document.write (e) hello ("مرحبًا بك في المقالة") أدوات تصغير جافا سكريبت
يمكن تصنيف الأدوات المستخدمة لتقليل Javascript على نطاق واسع إلى 3 مجموعات: الأدوات عبر الإنترنت وأدوات واجهة المستخدم الرسومية وأدوات سطر الأوامر.
- باستخدام الأدوات عبر الإنترنت ، عادةً ما يكون الأمر يتعلق بلصق الشفرة ونسخ النتيجة على الفور.
- تحتوي أدوات واجهة المستخدم الرسومية غالبًا على وظائف أكثر ؛ JS التصغير هو مجرد جزء صغير من ما يفعلونه.
- أدوات سطر الأوامر عادة ما تكون أكثر شمولًا ، حيث تقدم صورة مصغرة كوحدة نمطية.
أدوات عبر الإنترنت
- javascript-minifier.com هي أداة لطيفة المظهر مع واجهة برمجة التطبيقات
- تعد أداة YUI Compressor عبر الإنترنت أداة أكثر قوة تستخدم ضاغط YUI ، مع الكثير من الخيارات وقدرات تصغير CSS
- jscompress.com هو minifier الرتوش لكنه ينجز المهمة
- jsmini.com هو خيار آخر بسيط ولكن قابل للاستخدام بالكامل
إن الشيء العظيم في الأدوات عبر الإنترنت هو السرعة التي يمكنك من خلالها العمل معهم. تعمل أدوات واجهة المستخدم الرسومية المعقدة وأدوات سطر الأوامر على التقليل من السرعة ، لكن يلزمك إعداد مشروع حتى يعمل بشكل صحيح. الجانب السلبي لهذه الأدوات هي أنها في الغالب تقديم القليل إلى أي التخصيص, على الأقل بالمقارنة مع أدوات سطر الأوامر.
أدوات واجهة المستخدم الرسومية
- كوالا هي أداة مجانية لأقل ، تجميع SASS ، تصغير JS وأكثر من ذلك بكثير
- Prepros هو تطبيق مدفوع عبر الأنظمة يوفر لك المزيد من الخيارات
- Codekit هو تطبيقي المفضل. إنه تطبيق Mac-only مدفوع يوفر تجميع الرموز ، والتصغير ، وخادم المعاينة ، وإدارة حزمة الكشوف ، والكثير غير ذلك
- AjaxminGui هو أداة Windows مجانية وحيدة الغرض لتقليل JS الخاص بك
- UltraMinifier هو تطبيق مجاني لنظام التشغيل X الذي يقلل من CSS و JS بالسحب والإسقاط
- أصغر هو أداة OS X التي تقلل وتسلسل الملفات بالنسبة لك
لقد ذكرت نوعين من تطبيقات واجهة المستخدم الرسومية هنا. تشبه تطبيقات التصغير البسيطة بخطوة إلى حد كبير نظيراتها على الإنترنت. إنها سريعة الاستخدام للغاية نظرًا لأنه يمكنك فقط سحب الملفات وإفلاتها فيها ، دون الحاجة إلى إعداد. قال ، هم توفير تقريبا أي التخصيص.
تعد أدوات واجهة المستخدم الرسومية الأكبر (Prepros و Koala و Codekit) رائعة في إدارة المشاريع وتمنحك المزيد من الخيارات للضغط لكنها تفعل ذلك تحتاج قليلا من الإعداد. سيستغرق التصغير السريع JS حوالي 20 ثانية من الإعداد وهو كثير مقارنةً بالعملية الثانية لأدوات واجهة المستخدم الرسومية البسيطة عبر الإنترنت.
من ناحية أخرى ، فإنها توفر لك المزيد من الميزات بشكل عام وتوفر لك الأتمتة. سيتم تصغير ملفات JS الخاصة بك في كل مرة تقوم بحفظها ، ولن تحتاج إلى تصغيرها يدويًا. إذا كنت تقوم بتطوير شيء ما في جافا سكريبت ، فهذا بالتأكيد هو الطريق الصحيح.
أدوات سطر الأوامر
- Minify هو لأولئك الذين يريدون تصغير JS من سطر الأوامر ولكن لا يريدون إعداد أي شيء رائع في Grunt أو Gulp
- Uglify.js التي ذكرناها من قبل متاحة أيضًا كأداة سطر أوامر مستقلة
- يحتوي Grunt على امتداد لتصغير Javascript باسم grunt-particip-uglify
- يحتوي Gulp أيضًا على JS minification باستخدام Uglify.js من خلال gulp-uglify
أدوات سطر الأوامر ليست فقط لالمهوسين لينكس! أنا لست رائعًا في المحطة ولكن إعداد أشياء مثل Grunt و Gulp سهل من خلال وثائقهم الرائعة. الجانب العلوي من أدوات سطر الأوامر هو مقدار رائع من المرونة لديك من الخيارات إلى الإخراج.
من ناحية أخرى ، هناك قليلا من منحنى التعلم. التعود على سطر الأوامر يأخذ بعض الممارسات (وليس الكثير منها) التي ستجدها مقيدة قبل البدء في التمتع بالمزايا.
نظرة عامة
إذا كنت جديدًا في تطوير الويب ، فإنني أوصي بأحد أدوات واجهة المستخدم الرسومية الثلاثة الأولى. سوف يساعدونك على إدارة مشاريعك بشكل عام ويقدمون أكثر بكثير من مجرد تصغير JS.
إذا كنت مؤيدًا محنكًا ، فيجب أن تنظر إلى الأمر النخر أو اللب لأن هذه توفر أكثر سيطرة على مهام الأتمتة. إذا كنت بحاجة إلى تصغير البرنامج النصي بسرعة دون اقامة مشروع, أدوات سطر الأوامر يمكن أن توفر لك الكثير من الوقت.
كل مجموعة من الأدوات لها إيجابيات وسلبيات وفي الحقيقة سوف ينتهي بك الأمر باستخدام واحدة من كل منها في وقت ما أو آخر. ضع في اعتبارك أنه عندما تكون في بيئة إنتاج يجب عليك دائمًا تصغير Javascript و CSS!
