مصغّر JavaScript

الصق JavaScript لتقليص حجمه باستخدام Terser: يُزال الكود الميت، وتُختصر الأسماء، وتختفي المسافات. تشير أخطاء الصياغة إلى السطر والعمود بدقة.

يعمل في متصفحكبدون تسجيللا يُرفع شيء

المدخلات

فتح ملف

المخرجات المصغَّرة

طريقة استخدام مصغّر JavaScript

الصق كود JavaScript أو افتح ملف .js.
اختر الخيارات: تشويش الأسماء يختصر المتغيرات المحلية، وضغط يعيد كتابة الكود بصيغة مكافئة أصغر، ووحدة ES تُفعّل import/export في المستوى الأعلى.
اختر هدف ECMAScript الذي تدعمه متصفحات مستخدميك. ES2020 آمن لكل المتصفحات دائمة التحديث.
راجع الحجم والتوفير وتقدير gzip أسفل المخرجات.
انسخ الكود المصغَّر أو نزّله كملف output.min.js.

ماذا يفعل مصغّر JavaScript؟

يجعل التصغير كود JavaScript أصغر دون تغيير ما يفعله. تستخدم هذه الأداة Terser، المصغّر المستخدم في webpack وVite وRollup، وتطبّق ثلاثة أنواع من التغييرات:

إزالة المسافات والتعليقات: المسافات البادئة والأسطر الجديدة والتعليقات لا يحتاجها محرك JavaScript.
التشويش (Mangling): تصبح أسماء المتغيرات المحلية ومعاملات الدوال مثل subtotal حروفًا مفردة. وتُترك الأسماء العامة وخصائص الكائنات دون تغيير لتبقى واجهتك البرمجية العامة تعمل.
الضغط: تُطوى التعبيرات الثابتة، ويُحذف الكود الذي لا يمكن الوصول إليه، وتصبح عبارات if تعبيرات ثلاثية، وتُضمَّن الدوال القصيرة.

التصغير مقابل gzip: هل تحتاج إلى الاثنين؟

نعم. يضغط gzip وBrotli أنماط البايتات المتكررة أثناء النقل، بينما يزيل التصغير بايتات كان على المتصفح تنزيلها وتحليلها وترجمتها. يتقلص السكربت النموذجي بنسبة 40–60% بالتصغير ثم 60–70% أخرى بـ gzip. حجم gzip المعروض هنا تقدير جيد لما سيرسله خادمك فعليًا.

الإبقاء على تعليقات الترخيص

تشترط كثير من تراخيص المصادر المفتوحة (MIT وBSD وApache) بقاء إشعار حقوق النشر مع الكود. وبحسب العُرف، تُبقى التعليقات التي تبدأ بـ /*! أو تحتوي على @license أو @preserve عند تفعيل الإبقاء على تعليقات الترخيص.

متى لا تصغّر يدويًا

إذا كان مشروعك يستخدم أداة تجميع (bundler) بالفعل، فدعها تصغّر نسخ الإنتاج وتُنشئ source maps لتصحيح الأخطاء. المصغّر الأونلاين مثالي للسكربتات لمرة واحدة، والمقتطفات لنظام إدارة محتوى أو مدير وسوم، والـ bookmarklets، ولمعرفة إلى أي حد يمكن تصغير جزء من الكود.

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

هل يُرفع الكود الخاص بي إلى خادم؟

لا. يعمل Terser داخل علامة تبويب متصفحك، لذا لا يغادر الكود المملوك جهازك أبدًا.

هل يمكن أن يكسر التصغير الكود الخاص بي؟

لا يطبّق Terser إلا تحويلات تُبقي السلوك مطابقًا لكود JavaScript الصالح. قد يتأثر الكود الذي يعتمد على Function.prototype.toString() أو على أسماء المتغيرات المحلية عبر eval؛ عطّل تشويش الأسماء في هذه الحالة.

هل يدعم الصياغة الحديثة مثل async/await والأصناف والتسلسل الاختياري؟

نعم. يحلّل Terser صياغة ES2022+. يتحكم إعداد الهدف فقط في الصياغة التي يجوز أن تستخدمها المخرجات؛ ولا يحوّل الميزات الأحدث إلى أقدم.

ما الفرق بين minify وuglify؟

يعنيان الشيء نفسه. كانت UglifyJS الأداة الكلاسيكية؛ وTerser هي نسختها المتفرعة المُصانة مع دعم كامل لـ ES2015+.