كسر - وليس بناء. أو نقل

في الآونة الأخيرة ، ظهر عدد من المقالات المثيرة حول حبري. تم تكريس الأول لمشكلة التصغير ES6 ، والثاني حول نصائح التحسين المثلى المفيدة في حزمة الويب .

سيكون كل شيء على ما يرام ، ولكن كلاهما تجاوز مسألة تقسيم الحزم إلى ES6 و ES5 لأغراض التصغير وأغراض التحسين الأخرى. وبشكل عام ، بينما يكتب البعض مقالات حول هذا الموضوع ويكتبوه ، يتجاهل آخرون (جميعهم تقريبًا) هذه التقنية.

لأنه لفترة طويلة. غالية وليس كذلك جدا.

ولكن من الضروري بسرعة ، بثمن بخس ، والغباء. ربما يجب عليك عكس التطور.

فكرة

وصف "الفكرة" ليس فكرة جيدة. من الأفضل أن تصف كيف يجب أن تعمل. كيف يجب أن تعمل عملية تشكيل الحزمة:

• لدي كود
• أجمعها تحت متصفح "التطوير" الخاص بي
• وهذا كله يعمل.

متصفح التطوير موجود هنا - بحيث يكون المزامنة / الانتظار والمولد والفئات ووظائف السهم وما إلى ذلك. بشكل عام ، الهدف: esmodules في بابل.

لا أعرف عنك ، لكني أحب هذه الفكرة. إليك فقط المتصفحات القديمة التي لا تزال بيننا ، هذه الفكرة لا تتناسب مع هذا النحو. (وبالتالي ، نحن جميعًا نرعى es5 في الإنتاج ، مع توابل بنصف ميغا بايت من polyfills)

وهذا هو بالضبط ما يحتاج إلى إصلاح.

نقل

Devolution هي أداة صغيرة من أدوات cli تأخذ الحزمة التي تم تجميعها إلى هدف: esmodules وتحطيمها إلى es5 ، مضيفًا جميع polyfiles اللازمة على طول الطريق.

باختصار ، ثم:

• جميع البرامج النصية شبيبة هي
• تشغيل عبر بابل مع مكون إضافي نشط (شوكة useBuiltins: "الاستخدام") الذي يعرف polyfiles المطلوبة. هذا سريع ، حيث لا توجد تحولات.
• لكل ملف ، يتم جمع كل الألواح المتعددة التي يحتاجها (مطروحًا منها الموجودة بالفعل في الحزمة الرئيسية) ، ويتم دمجها وتشغيلها عبر terser وإضافتها إلى أعلى الملف.
• سيتم تشغيل كل ملف من خلال swc ، وهو إصدار صدأ من بابل يرفع مستوى الشفرة إلى مستوى يفهمه IE11. يعمل 10-60 مرات أسرع من بابل. لا يدعم المكونات الإضافية المختلفة ، ولكن هذا ليس ضروريًا - كل ما هو مطلوب هو __ بالفعل __ مطبق.
• يتم تثبيت terser مرة أخرى على النتيجة ، ولكن مع إيقاف تشغيل mangle (ضغط الاسم) ، والذي يكون سريعًا مرة أخرى.
• كل هذا يتم في العمال.

قمت بتشغيل الرمز في ثلاثة مشاريع بمستويات صعوبة مختلفة:

• المشروع 1 ، 60 ملف js النهائي (تقسيم الشفرة). بناء الوقت 400s. نقل 30s.
• المشروع 2 ، 1 ملف js النهائي (30mb). بناء الوقت 120s. نقل 10s.
• المشروع 3 ، 1 ملف js النهائي (2mb). بناء الوقت 20s. نقل 5s (في بداية العمال تضيع الكثير من الأشياء).

كانت المكافأة من حزمة ESM غريبة بعض الشيء:

• مشروع واحد خسر 400KB بابل / polyfill. لم يتم استخدام شرائح متصفح "انتهى" هناك مبتذلة ، وفي "esm" لا يحتاج الأمر إلى صقلها
• خسر مشروع واحد 10٪ بسبب الشفرة المدمجة أكثر من المولدات ، غير المتزامن / تنتظر ومنشئو الصف
• أصبح مشروع واحد أكثر بدانة ، لأن تحويلات بابل "فضفاضة" في بعض الأحيان تجعل الشفرة أكثر إحكاما. لكن الوضع السائب هو خيار خطير بعض الشيء ، في حين أن رمز "ES6" هو "آمن".

مرة أخرى:

• نحن نأخذ كود ES6 (بشكل أكثر دقة ، يتم استبدال / اسمحوا ليتم استبداله بـ var لأغراض السرعة)
• جعله ES5
• رمي على جانب polyphiles
• مبعثر على الآباء ، إضافة روابط إلى الملفات الأخرى
• نغير اتصال البرامج النصية بالصفحات إلى أكثر ذكاءً (الوحدات النمطية / وحدات الترميز IE11 لا تفهم)
• تم - ESM لـ 85٪ من العدادات المخصصة ، ES5 لأولئك في الخزان.

بسيط سريع مجرد غبي. نحن رفع مستوى الحزمة. المتصفحات القديمة! الاتحاد الافريقي - خدم.

حسنًا ، ستتلقى المتصفحات الجديدة حزمة بدون تقريبًا أي ملفات polyfills ، بدون تحولات فظيعة للمولدات وغير المتزامنة / المنتظرة ، مع وظائف السهم بدون الدفوف (وعادة ما تكون أسرع). بشكل عام ، الجميع سعداء ، ويبدو أن هذا كان المقصود في الأصل.

github.com/thekashey/devolution

ملحوظة : في الواقع ، في الوقت الحالي ، لا يستخدم نقل السلطة swc ، لأنه في بعض الأحيان يجعل الكود غير فعال - github.com/swc-project/swc/issues/280 ، Babel ليس أبطأ كثيرًا - حيث تم تصحيح swc في 20 ثانية ، بابل يمكن أن تفعل ذلك في دقيقة واحدة. مع وقت بناء "عادي" - من 5 فصاعداً - تعد هذه ميزة كبيرة

PS: إذا أصبح فجأة مثيرة للاهتمام لماذا نقل - الفيديو هنا .