Softonic

أداة تقليل حجم كود جافا سكريبت

خطوة 1 / 3
التالي

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

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

  1. 1

    لصق المصدر

    أي كود جافا سكريبت صالح من إصدار ES5 فما فوق. بالنسبة لإصدارات ES6 وما بعدها (مثل العبارات النموذجية، والفئات، والوحدات)، تأكد من أن الإصدار المستهدف متوافق معها.

  2. 2

    اختر مستوى العدوانية

    آمن (مساحة فارغة + تعليقات)، افتراضي (+ إعادة تسمية المتغيرات)، عدواني (+ تشويه خصائص الكود، وقد يؤدي إلى تعطيل الوصول إلى هيكل DOM).

  3. 3

    تقليل الحجم إلى أدنى حد ممكن

    يقوم الأداة بتنفيذ تحويل متوافق مع Terser ويُخرِج النتيجة مع إحصاء عدد البايتات قبل وبعد التحويل.

  4. 4

    قم بنسخه أو تنزيله.

    قم بلصق الناتج في علامة `<script>` أو حفظه تحت اسم `.min.js` لتقديمه من شبكة التوزيع المركزي (CDN) الخاصة بك.

إلى أين تذهب البايتات

الملف المُصغَّر النموذجي يكون أصغر بنسبة تتراوح بين 40 و70٪ مقارنة بالملف الأصلي. وعند ضغطه باستخدام gzip (أو Brotli، الذي تستخدمه Cloudflare ومعظم شبكات توصيل المحتوى CDN)، ينخفض حجمه إضافيًا بنسبة تتراوح بين 60 و75٪. وبالجمع بينهما، يمكن نقل ملف أصلي بحجم 100 كيلوبايت بحجم يتراوح بين 15 و25 كيلوبايت عبر الشبكة.

المصدر المُصغَّر ‎+gzip ‎+Brotli
jQuery 3.6 87 كيلوبايت 30 كيلوبايت 27 كيلوبايت
Lodash 4.17 71 كيلوبايت 25 كيلوبايت 22 كيلوبايت
React + ReactDOM 18 140 كيلوبايت 44 كيلوبايت 39 كيلوبايت

التقنيات المُطبَّقة

التقنية ما الذي تفعله
إزالة المسافات الفارغة حذف المسافات وعلامات الجدولة وأسطر النص الجديدة
إزالة التعليقات حذف // و/* */ (إلا في حالة !important)
تشويه أسماء المتغيرات إعادة تسمية userName إلى u (آمن ضمن النطاق)
تشويه أسماء الخصائص إعادة تسمية obj.foo إلى obj.a (غير آمن)
طي الثوابت 1 + 2 + 3 ← 6
إزالة الكود الميت حذف الفروع التي تلي return
تضمين تدفق التحكم تضمين الدوال الصغيرة المستخدمة مرة واحدة
ضغط القيم النصية الحرفية دمج الثوابت النصية المتكررة

الوضع الآمن مقابل الوضع العدواني

  • الوضع الآمن يحافظ على أسماء المتغيرات، ويزيل المسافات الفارغة فقط. مناسب لتصحيح الأخطاء عندما ترغب في الحصول على سجلات تتبُّع قابلة للقراءة.
  • الوضع الافتراضي يشوّه أسماء المتغيرات المحلية لكنه يحافظ على الأسماء العامة وأسماء الخصائص. يعمل مع معظم أنواع الكود.
  • الوضع العدواني يشوّه كل شيء، بما في ذلك أسماء الخصائص. وغالبًا ما يعطّل الكود الذي يصل إلى الخصائص بشكل ديناميكي (obj["prop"]، Object.keys(obj)) ما لم تُحدِّد أسماءً محفوظة.

متى تُصغِّر الكود ومتى لا تفعل ذلك

  • صغِّر الكود في بيئة الإنتاج، لكل مورد يُنزِّله المتصفح.
  • وفِّر خريطة مصدر (source map) حتى تتمكن أدوات تطوير المتصفح من عرض الأسماء الأصلية أثناء تصحيح الأخطاء.
  • لا تُصغِّر الكود أثناء التطوير، فأنت تُهدر وقت البناء وتفقد رسائل الأخطاء القابلة للقراءة.
  • لا تُصغِّر كودًا مُصغَّرًا بالفعل. ملفات .min.js تنكمش بنسبة 1‏–3٪ تقريبًا عند إعادة التصغير مع المخاطرة بحدوث أعطال.

الأخطاء الشائعة

  • عدم تحديد الأسماء المحفوظة. يتعطل الوصول الديناميكي إلى الخصائص (obj["payment_method"]) عندما يُشوَّه اسم payment_method ليصبح a.
  • نسيان خرائط المصدر. بدون ملفات .map، تصبح أخطاء الإنتاج غير قابلة للقراءة.
  • تصغير CommonJS وESM معًا. تتطلب أنظمة الوحدات المختلطة عملية tree-shaking دقيقة قبل التصغير.

الأسئلة الشائعة

عادةً ما يكون الحجم أصغر بنسبة تتراوح بين 40 و70٪ دون ضغط، وينخفض بنسبة إضافية تتراوح بين 60 و75٪ عند الضغط باستخدام gzip أو Brotli. وغالبًا ما يُرسل ملف مصدر بحجم 100 كيلوبايت بحجم يتراوح بين 15 و25 كيلوبايت عبر الشبكة.

إن التشويه الافتراضي (للمتغيرات المحلية) آمن تقريبًا في جميع الحالات. أما التشويه العدواني للخصائص فيُعطِّل أي كود يصل إلى الخصائص بشكل ديناميكي. اضبط قائمة reserved بعناية قبل تفعيلها.

نعم، عند تفعيل خيار “إنشاء خريطة المصدر”، يعيد الأداة إرجاع الكود المُختصر بالإضافة إلى ملف .map الذي يربط كل بايت بالنص المصدر الأصلي. قم برفع كلا الملفين إلى شبكة التوزيع المركزية (CDN) الخاصة بك حتى يتمكن أداة DevTools من عرض سجلات التسلسل القابلة للقراءة.

نعم، فجميع الميزات مدعومة: الانتظار على المستوى الأعلى (top-level await)، وحقول الفئة، والطرق الخاصة، ودمج القيم العدمية (nullish coalescing)، والتسلسل الاختياري (optional chaining)، وفواصل الأرقام. أما الاقتراحات الحديثة جدًا (الديكوريتورات في المرحلة الثالثة)، فيُرجى التحقق من العلامة المحددة لها.

أدوات ذات صلة

مرجع جدول ASCII

جدول ASCII كامل من 0 إلى 127 مع التمثيل العشري والست عشري والثماني والثنائي والمرجع الرقمي في HTML لكل محرف، بما في ذلك أكواد التحكم مثل NUL وLF وDEL.

مرجع أحرف HTML

قائمة قابلة للبحث بكيانات HTML، مع رموزها المسمّاة والرقمية، بالإضافة إلى خيار النسخ بنقرة واحدة للأحرف والرموز الخاصة.

مرجع اختصارات لوحة المفاتيح

ابحث في الاختصارات الافتراضية الموثقة لـ VS Code وChrome وBash مع GNU Readline على macOS وWindows وLinux.

مدقق البريد الإلكتروني

تحقق من عنوان بريد إلكتروني: فحص صياغة RFC 5322، واستعلام حي عن سجل MX، بالإضافة إلى تفاصيل الجزء المحلي والنطاق والطول. لا يتم إرسال أي بريد.

مولد EditorConfig

أنشئ ملف .editorconfig بقواعد نمط المسافة البادئة وحجمها ونهاية السطر ومجموعة الأحرف والمسافات البيضاء، لتنسيق موحّد عبر بيئات التطوير المتكاملة (IDEs) والمحررات.

منسق HTML

نسّق HTML محلياً في المتصفح بمسافة بادئة من مسافتين أو أربع مسافات. لا يُرفع HTML ولا يُتحقق منه.

الأداة متاحة بلغات أخرى