تصغير الكود
صغر كود JS وCSS وHTML وTypeScript وXML وJSON وSQL
نبذة عن تصغير الكود
تصغر أداة «تصغير الكود» سبعة أنواع من الكود في متصفحك، تختارها بالأزرار JS وTS وCSS وHTML وXML وJSON وSQL. يمر كود JavaScript عبر Terser الذي يعيد تسمية المتغيرات المحلية ويحذف الكود الميت؛ أما TypeScript فيحذف Sucrase أنواعه أولا، ثم يصغر بالطريقة نفسها، فتكون النتيجة JavaScript. ويمر كود CSS عبر CSSO الذي يدمج القواعد المتطابقة ويختصر القيم. ويفقد HTML تعليقاته، وتصبح كل سلسلة من المسافات البيضاء مسافة واحدة، ويبقى محتوى <pre> و<textarea> و<script> و<style> كما كتب. ويفقد XML تعليقاته والمسافات بين الوسوم؛ ويفقد JSON مسافاته وتعليقاته وفواصله الأخيرة؛ ويفقد SQL تعليقاته ومسافاته الزائدة دون المساس بسلاسله النصية. ولا يبلغ عن كود CSS أو HTML المعطوب.
مثال
وضع HTML: يحذف التعليق، وتختصر المسافات إلى مسافة واحدة، ويحتفظ <pre> بمسافاته.
الإدخال
<ul> <!-- main menu --> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre> keep this</pre>
الإخراج
<ul> <li><a href="/">Home</a></li> <li> About us </li> </ul> <pre> keep this</pre>
كيفية تصغير كود JavaScript أو CSS أو HTML
- 1انقر على «JS» أو «TS» أو «CSS» أو «HTML» أو «XML» أو «JSON» أو «SQL» لاختيار اللغة.
- 2الصق الكود في «الإدخال»، أو انقر على «فتح ملف» لتحميل ملف .js أو .ts أو .css أو .html أو .xml أو .json أو .sql (وكذلك .mjs و.cjs و.mts و.cts و.htm و.svg و.xsl و.xsd و.jsonc و.geojson)؛ ويختار امتداده اللغة.
- 3انقر على «تصغير»؛ تظهر النتيجة في «الإخراج»، ويذكر السطر الذي تحته عدد الأحرف الموفرة.
- 4انقر على «نسخ»، أو على «تنزيل» لحفظ minified.js أو minified.ts أو minified.css أو minified.html أو minified.xml أو minified.json أو minified.sql حسب الوضع.
الصيغ والحدود
- لغات الإدخال
- JavaScript، وTypeScript دون JSX، وCSS، وHTML، وXML، وJSON (مع قبول التعليقات والفواصل الأخيرة)، وSQL
- المحركات
- Terser (لـJavaScript وTypeScript)، وSucrase (لأنواع TypeScript)، وCSSO (لـCSS)، وأدوات التصغير الخاصة بالموقع (لـHTML وXML وJSON وSQL)
- الأخطاء
- تظهر أخطاء بناء الجملة في JavaScript وTypeScript وJSON على شكل «خطأ:» تليها رسالة المحرك؛ ويرفض TSX ومساحات الأسماء التي تحتوي على كود برسالة توضح السبب؛ ويرفض XML وSQL مع رقم السطر إذا بقي وسم أو تعليق أو سلسلة نصية أو اسم بين علامتي اقتباس دون إغلاق، أو إذا لم يطابق وسم الإغلاق وسم الفتح؛ ولا يرفض CSS وHTML أبدا
- اسم الملف
- minified متبوعا بالوضع: .js أو .css أو .html أو .xml أو .json أو .sql؛ وفي وضع TS يسمى الملف .ts مع أنه يحتوي على JavaScript
أين يعالج كودك
تعمل أدوات التصغير السبع على جهازك؛ ويجلب Terser أو Sucrase أو CSSO عند أول استخدام لوضعه، ولا يرفع الكود الذي تلصقه. إذا ظهر خطأ، ترسل رسالته إلى سجل الأخطاء لدينا بعد حذف المقاطع المقتبسة والأرقام الطويلة والعناوين منها، مع اسم الأداة واسم متصفحك وإصداره.
الأسئلة الشائعة
هل يعمل كود JavaScript المصغر بالطريقة نفسها؟
نعم. يحلل Terser الكود قبل ضغطه، لذا يحتفظ الكود المكتوب دون فواصل منقوطة، وتعليمة return يليها فاصل سطر، وتعابير مثل a - -b بمعناها. والكود الذي يتعذر تحليله يعطي خطأ بدل ملف معطوب.
هل يتعامل وضع TS مع TSX أو مع مساحات الأسماء (namespace)؟
ليس تماما. تحذف مساحة الأسماء التي لا تحتوي إلا على أنواع، كما يفعل tsc؛ أما التي تحتوي على كود فترفض برسالة تذكر اسمها وسطرها، لأن حذف الأنواع لا يستطيع تحويلها إلى JavaScript: انقل هذا الكود خارجها أولا. ويرفض TSX برسالة تقول إن Terser لا يستطيع قراءة JSX: حوّله أولا في أداة البناء الخاصة بك.
هل يحذف وضع HTML كل المسافات بين الوسوم؟
لا. قد تكون المسافة بين العناصر السطرية مرئية: فكلمتان بخط عريض لا يفصل بينهما إلا فاصل سطر تلتصقان دونها. لذلك تصبح كل سلسلة من المسافات وفواصل الأسطر مسافة واحدة بدل أن تختفي.
هل يتحقق وضع CSS من صحة كود CSS؟
لا. يصلح CSSO ما لا يستطيع قراءته أو يتجاوزه دون أي رسالة: يضاف القوس المعقوف الختامي الناقص، وقد يختفي من الإخراج النص الذي ليس CSS. راجع نتيجة ورقة الأنماط التي لست متأكدا منها.
هل يحتفظ وضع SQL بسلاسلي النصية وتلميحاتي؟
نعم. تنسخ السلاسل النصية والأسماء بين علامات الاقتباس (المزدوجة أو المائلة أو الأقواس المعقوفة) ومتون $$ في PostgreSQL كما هي، حتى إن احتوت على -- أو /*. وتحذف التعليقات، إلا تلميحات /*! */ في MySQL و/*+ */ الخاصة بالمحسن. ويبقى فاصل السطر بعد #، الذي يبدأ تعليقا في MySQL، وحول DELIMITER وGO وأوامر \ في psql، حيث يغير حذفه السكربت.
هل يغير وضعا XML وJSON بياناتي؟
لا. لا يفقد XML إلا تعليقاته والمسافات بين الوسوم، ولا يمس أبدا ما داخل عنصر xml:space="preserve" ولا ما بين كلمات المحتوى المختلط، مثل <p>Hello <b>big</b> <i>world</i></p>؛ ويبقى النص وقيم السمات وأقسام CDATA كما كتبت. ويفقد JSON مسافاته وتعليقاته وفواصله الأخيرة؛ وتحتفظ الأرقام بكل خاناتها، في حين يحول JSON.parse متبوعا بـJSON.stringify الرقم 12345678901234567890 إلى 12345678901234567000.
نصائح وحيل
- ✓لا يظهر سطر الأحرف الموفرة إلا بعد تصغير ناجح؛ وبعد الخطأ يعرض «الإخراج» الرسالة بدلا منه.