आपको अपने जावास्क्रिप्ट को कम करने की आवश्यकता नहीं है

आजकल, लोकप्रिय राय यह है कि वर्तमान जावास्क्रिप्ट फ्रेमवर्क बड़े रूप से बड़े हैं, और नई Svelte फ्रेमवर्क बहुत कॉम्पैक्ट है। इसलिए, सभी को इसे स्विच करने की आवश्यकता है, और Javasctipt आकार की समस्या अपने आप हल हो जाएगी।

हाल ही में एक लेख "क्या विजेट को लागू करने के लिए एक अच्छा विकल्प है?" एक महत्वपूर्ण बंडल आकार के साथ एक परियोजना को लागू करने में अनुभव के साथ। यह एक वास्तविक परियोजना पर Svelte PR प्रबंधकों के वादों की जांच करने का एक बड़ा कारण है।

चलो इसका विश्लेषण करते हैं!

प्रारंभिक आंकड़े

विचाराधीन परियोजना एक एम्बेडेड विजेट है जिसे एक अखंड जावास्क्रिप्ट बंडल के रूप में वितरित किया गया है, जिसका कुल आकार 71 Kb (गपशप सहित) है। यह बहुत है या थोड़ा है? लेख "2019 में जावास्क्रिप्ट की कीमत" 50-100 Kb से बड़े बंडलों से बचने की सिफारिश की। यही है, वर्तमान परियोजना पीले क्षेत्र में है, आकार अभी भी स्वीकार्य है, लेकिन यह सोचने का समय है कि इसमें नई कार्यक्षमता कैसे जोड़ें, और एक ही समय में 100 Kb की ऊपरी सीमा में फिट होते हैं।

अब इस स्क्रिप्ट को डाउनलोड करें, इसे प्रारूपित करें और देखें कि वहां क्या दिलचस्प है।

बुंडलर सेटिंग्स

कोड को देखने पर आपकी आंख को पकड़ने वाली पहली चीज इस पैटर्न की पुनरावृत्ति है:

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 !)

• 14 –
• 10 –
• 22 – Javascript-

इस प्रकार, हम देखते हैं कि बंडल का आकार कई कारकों से प्रभावित होता है, और Svelte का उपयोग करने का प्रभाव, डाइट कोला के साथ हैमबर्गर पीने की तरह, विशुद्ध रूप से मनोवैज्ञानिक है। वास्तविक अनुकूलन को आउटपुट आकार के विस्तार और नियंत्रण पर ध्यान देने की आवश्यकता है।

और यदि आप अपने प्रोजेक्ट के आकार को कम करने की खातिर Svelte पर स्विच करने के बारे में सोच रहे हैं - मैं आपको उपरोक्त बिंदुओं पर ध्यान देने की सलाह देता हूं, शायद अगर आप उन्हें ठीक कर देते हैं, तो आपको कहीं भी जाने की आवश्यकता नहीं है।