تصغير JS
صغر كود JavaScript
نبذة عن تصغير JS
تضغط أداة «تصغير JS» كود JavaScript باستخدام Terser في متصفحك. يحلل Terser الكود أولا، لذا يعمل الناتج مثل الأصل: يعالج الكود المكتوب دون فواصل منقوطة، وتعليمة return يليها فاصل سطر، والتعابير النمطية، وتعابير مثل a - -b معالجة صحيحة. افتراضيا، تقصر الأسماء المحلية داخل الدوال، ويبقى على الأسماء العامة وخصائص الكائنات، ويحذف الكود الذي لا يمكن بلوغه مثل كتلة if (false)، وتحذف كل التعليقات. وتتيح الإعدادات الإبقاء على تعليقات الترخيص أو على كل التعليقات، وحذف استدعاءات console، وتقصير أسماء المستوى الأعلى أيضا، والإبقاء على أسماء الدوال والأصناف، وقراءة الكود كوحدة ES، وترك Terser يكتب صياغة أحدث، وإضافة خريطة المصدر. ويمكن تصغير عدة ملفات .js أو .mjs أو .cjs واحدا واحدا في ملف ZIP أو دمجها في ملف واحد، وتعرض الأحجام قبل وبعد بالبايت ومع gzip. والصياغة الحديثة مقبولة، بما فيها الأصناف والدوال async والتسلسل الاختياري وBigInt، وكذلك أسطر import وexport. أما TypeScript فلا: حوله أولا.
مثال
لا فواصل منقوطة في الإدخال؛ يضيفها Terser ويضع كل شيء في سطر واحد ويعيد تسمية المتغيرات المحلية.
الإدخال
function total(prices) {
let sum = 0
for (const price of prices) sum += price
return sum
}
console.log(total([1, 2]))الإخراج المصغر
function total(o){let t=0;for(const l of o)t+=l;return t}console.log(total([1,2]));كيف تصغر كود JavaScript
- 1الصق السكربت في «الإدخال»، أو انقر على «فتح ملفات» لتحميل ملف .js أو .mjs أو .cjs واحد أو أكثر.
- 2غير «الإعدادات» عند الحاجة: «التعليقات»، «حذف استدعاءات console.*»، «تقصير الأسماء المحلية»، «نوع الكود»، «خريطة المصدر (ملف .map)»؛ ومع عدة ملفات، اختر «تصغير كل ملف (ZIP)» أو «دمجها في ملف واحد».
- 3انقر على «تصغير».
- 4اقرأ «الإخراج المصغر» والأحرف الموفرة والأحجام قبل وبعد؛ وإذا تعذر تحليل الكود، يذكر الخطأ سطره وعموده، واسم الملف عند فتح عدة ملفات.
- 5انقر على «نسخ»، أو على «تنزيل» لحفظ «minified.js» (أو اسم الملف المفتوح مع .min.js)، أو خريطة المصدر الخاصة به، أو ملف ZIP للملفات المصغرة.
الصيغ والحدود
- الإدخال
- سكربتات JavaScript أو وحدات ES، ملصقة أو مفتوحة من ملفات .js أو .mjs أو .cjs، حتى 100 ملف في المرة الواحدة
- الإخراج
- كود JavaScript مصغر، يحفظ باسم minified.js، أو باسم name.min.js لملف مفتوح؛ وملف .map عند تحديد «خريطة المصدر (ملف .map)»؛ وملف ZIP لعدة ملفات مصغرة واحدا واحدا
- الإعدادات
- افتراضيا: الضغط وتقصير الأسماء مفعلان، والتعليقات محذوفة، وأسماء المستوى الأعلى محفوظة، وتعليمات debugger محذوفة، وسكربت، وصياغة إخراج ES5؛ ويمكن تغيير كل منها
- الأخطاء
- رسالة Terser مع سطرها وعمودها، واسم الملف عند فتح عدة ملفات
- الحجم مع gzip
- مقدر باستخدام gzip في المستوى 6، وهو المستوى الافتراضي لمعظم خوادم الويب؛ ويتوقف الحجم الذي يرسله خادمك على إعداداته
أين يعالج السكربت
ينزل Terser مرة واحدة، عند أول نقرة على «تصغير»، ثم يعمل على جهازك: السكربت والملفات التي تفتحها يقرؤها متصفحك ولا ترفع. والاستثناء هو التصغير الذي يفشل، إذ ترسل رسالة الخطأ المعروضة، بعد استبدال النصوص بين علامات الاقتباس والأرقام الطويلة والعناوين، إلى سجل الأخطاء لدينا مع اسم الأداة واسم متصفحك وإصداره؛ ويبلغ عن أي عطل غير متوقع في الصفحة بالطريقة نفسها.
الأسئلة الشائعة
هل يعمل الكود المصغر بالطريقة نفسها؟
نعم. لا يطبق Terser إلا تحويلات تحافظ على سلوك الكود الذي استطاع تحليله، بما في ذلك الكود المكتوب دون فواصل منقوطة؛ وتعليمة return يليها فاصل سطر تبقى لا تعيد شيئا، كما في الأصل.
هل يعيد تسمية المتغيرات؟
نعم، المحلية منها افتراضيا: تحصل المتغيرات والمعاملات داخل الدوال على أسماء من حرف واحد، كما تصبح total(prices) في المثال total(o). وتبقى أسماء المستوى الأعلى وخصائص الكائنات كما هي، لتتمكن السكربتات الأخرى من استدعائها. حدد «تقصير أسماء المستوى الأعلى أيضا» لسكربت لا يستدعيه أي سكربت آخر (تحذف عندئذ أسماء المستوى الأعلى التي لا يستخدمها)، أو «الإبقاء على أسماء الدوال والأصناف» عندما يقرأ كودك هذه الأسماء (fn.name).
هل يمكنه الإبقاء على تعليقات الترخيص؟
نعم. في «التعليقات»، يبقي «الإبقاء على تعليقات الترخيص (/*! */ و@license و@preserve)» على التعليقات التي تبدأ بـ /*! أو تحتوي على @license أو @preserve، كما تطلب معظم المكتبات؛ ويبقي «الإبقاء عليها كلها» على كل التعليقات.
هل يمكنني الحصول على خريطة المصدر؟
نعم. حدد «خريطة المصدر (ملف .map)»: ينتهي الكود المصغر بتعليق sourceMappingURL، ويعرض بجانبه ملف .map الذي يحتوي على كودك الأصلي. ضع الملفين في المجلد نفسه لتعرض أدوات المطور في المتصفح الأسطر الأصلية.
هل يمكنه تحويل JavaScript الحديث إلى ES5؟
لا. يسمح «صياغة الإخراج حتى» لـ Terser فقط بكتابة صيغ أقصر وأحدث، مثل { a } بدل { a: a } ابتداء من ES2015؛ ولا يعيد أبدا كتابة الأصناف أو الدوال السهمية أو الدوال async بصياغة ES5. فذلك يحتاج إلى مترجم مثل Babel أو esbuild قبل التصغير.
هل يمكنه تصغير TypeScript؟
لا. تعليقات الأنواع خطأ في الصياغة بالنسبة إلى Terser. استخدم أداة «تصغير الكود» في وضع TS، التي تحذف الأنواع وتصغر في خطوة واحدة، أو استخدم أولا «TypeScript إلى JavaScript» والصق ناتجها هنا.
هل يبين موضع خطأ الصياغة؟
نعم. يعطي الخطأ رسالة Terser مع سطرها وعمودها، مثلا خطأ في السطر 4، العمود 15: Unexpected token: punc (;)، واسم الملف عند فتح عدة ملفات. وتعد الأسطر والأعمدة ابتداء من 1.