في الوقت الحاضر ، يُعتقد بشكل عام أن أطر عمل جافا سكريبت الحالية كبيرة للغاية ، وإطار Svelte الجديد مضغوط للغاية. لذلك ، يحتاج الجميع إلى التبديل إليه ، وسيتم حل مشكلة حجم Javasctipt من تلقاء نفسه.
في الآونة الأخيرة كان هناك مقال "هل Svelte هو خيار جيد لتنفيذ القطعة؟" من ذوي الخبرة في تنفيذ مشروع بحجم حزمة مهم. هذا سبب رائع للتحقق من وعود مديري Svelte PR في مشروع حقيقي.
دعونا نحلل ذلك!
البيانات الأولية
المشروع المعني عبارة عن عنصر واجهة مستخدم مضمن تم توزيعه كحزمة Javascript متجانسة بإجمالي حجم 71 كيلوبايت (بما في ذلك gzip). هل هو كثير أم قليل؟ أوصت مقالة "سعر JavaScript في 2019" بتجنب حزم أكبر من 50-100 كيلوبايت. أي أن المشروع الحالي يقع في المنطقة الصفراء ، ولا يزال الحجم مقبولًا ، ولكن حان الوقت للتفكير في كيفية إضافة وظائف جديدة إليه ، وفي الوقت نفسه يتناسب مع الحد الأعلى البالغ 100 كيلوبايت.
الآن قم بتنزيل هذا البرنامج النصي ، وقم بتنسيقه وشاهد ما هو مثير للاهتمام هناك.
إعدادات Bundler
أول شيء يلفت انتباهك عند عرض الرمز هو تكرار هذا النمط:
function (t, e, n) {
t.exports = {
}
}
CommonJS . ES-, – Scope hoisting Tree-shaking. CommonJS-, .
, ES- , . webpack --display-optimization-bailout , .
" " Svelte, , .
, , , 20%, 14 .
, SVG JPG . , .
SVG. SVGO, -.
7 svg- 10 , , -, . SVGO 3 .
JPG. , 5927 , 183x72. , retina-. , . - https://squoosh.app/, . , , 7 .
, , SVGO , imagemin.
Javascript. ES6-, IE . – , ES6 7%. Internet Explorer, .
.
- axios – http-. IE , Fetch API, , 4 .
- process – process Node.js. webpack,
process.env.NODE_ENV, process process.env. 1 . - sentry – . , 17 .
- Sentry CDN. , , .
- , CDN, . , Sentry. , CDN.
Code coverage
Code Coverage Chrome Devtools. , 24% Javascript . , , , , , .
, 46 ( 2 !)
وبالتالي ، نرى أن حجم الحزمة يتأثر بعدة عوامل ، وتأثير استخدام Svelte تقريبًا مثل شرب الهامبرغر مع الكولا الحمية أمر نفسي بحت. يتطلب التحسين الحقيقي الانتباه إلى التفاصيل والتحكم في حجم الإخراج.
وإذا كنت تفكر في التبديل إلى Svelte من أجل تقليل حجم مشروعك - أنصحك بالاهتمام بالنقاط المذكورة أعلاه ، ربما إذا قمت بإصلاحها ، فلن تحتاج إلى الذهاب إلى أي مكان.