Softonic

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

خطوة 1 / 3

الصق سكربتًا أو وحدة ES بطول يصل إلى ١٬٠٠٠٬٠٠٠ حرف، أو افتح ملف JavaScript.

التالي: اختيار الخيارات

قم بنسخ كود 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 كيلوبايت

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

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

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

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

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

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

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

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

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

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

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

نعم. فعّل خيار “إنشاء خريطة مصدر (source map) أيضًا” لتحصل على ملف .map مع الكود المصغّر. يربط هذا الملف الكود المصغّر بأسطرك وأسمائك الأصلية، فتعرض أدوات DevTools في المتصفح كودًا وسجلات تتبُّع مقروءة. ضع الملفين في المجلد نفسه: ينتهي الكود المصغّر بتعليق //# sourceMappingURL= يعثر على الخريطة من خلال اسم ملفها. تحتوي الخريطة على الكود الأصلي، لذا لا تنشرها إلا حيث يُسمح لأي شخص بقراءة هذا الكود.

نعم. تدعم الأداة await في المستوى الأعلى (داخل وحدات ES)، وحقول الفئات، والدوال الخاصة، ودمج القيم العدمية (nullish coalescing)، والتسلسل الاختياري (optional chaining)، وفواصل الأرقام. أما المزخرفات (decorators) فغير مدعومة: حوّلها أولًا إلى JavaScript عادي، كما تفعل مع TypeScript و JSX. لا تحوّل الأداة الصيغة الأحدث إلى إصدار أقدم أبدًا: يحدد خيار إصدار ECMAScript فقط أحدث صيغة يمكن للكود المصغّر استخدامها لتوفير البايتات.

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

أدوات ذات صلة

مولّد إعدادات Webpack

أنشئ ملف webpack.config.js لـ webpack 5 من نموذج قصير: حدّد entry ومجلد الإخراج والوضع (mode)، ثم فعّل TypeScript وBabel ومحمّل CSS وHtmlWebpackPlugin وخادم تطوير.

مرجع جدول ASCII

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

مولّد ملف .gitignore

اجمع قواعد استبعاد المشروع لـ Laravel وNode.js وPython وRails. انسخ الناتج أو نزّل ملف ZIP يحتوي على .gitignore، مع إبقاء القواعد الشخصية منفصلة.

مولد ملف tsconfig.json

أنشئ ملف tsconfig.json نظيفا باختيار target وmodule وmoduleResolution وJSX وأعلام الصرامة الشائعة، ثم انسخ الإعداد المولّد إلى مشروعك.

مولّد Dockerfile

أنشئ ملف Dockerfile وملف .dockerignore مطابقًا له لخمس بيئات تطبيقات. أدخل مدخل التشغيل الفعلي ودليل العمل والمنفذ الداخلي، ثم راجع الملفين.

مولد تراخيص

قم بإنشاء النص الكامل لترخيصات المصدر المفتوح مع إدخال اسمك والسنة المقابلة، ويشمل ذلك تراخيص MIT وApache 2.0 وGPLv3 وBSD-3 وMPL-2.0 وCC.

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