परफ़ॉर्मेंस

यह पेज बताता है कि पैकेज bundle साइज़ और runtime लागत को कैसे प्रभावित करते हैं, और कई आइकन कैसे रेंडर करें।

आइकन कैसे लोड और रन होते हैं

हर आइकन का एक मॉड्यूल। आइकन मॉड्यूल में कोई side effect नहीं होता, इसलिए bundler उन आइकन को हटा देते हैं जिन्हें आप इंपोर्ट नहीं करते। Minify और gzip करने के बाद पहला React या Vue आइकन, साझा रनटाइम सहित, लगभग 4 KB जोड़ता है और हर अगला आइकन लगभग 0.6 KB।
पहले से रेंडर किया markup। रेस्ट पोज़ एक स्ट्रिंग के रूप में आता है, इसलिए सर्वर या ब्राउज़र में पहली पेंट से पहले किसी गणना की ज़रूरत नहीं पड़ती।
ज़रूरत पर मोशन। मोशन का कोड केवल तब चलता है जब आइकन हिल रहा हो, और मोशन खत्म होते ही रुक जाता है।
साझा कोड। सभी आइकन एक ही geometry मॉड्यूल साझा करते हैं और सभी एनिमेटेड आइकन एक ही runtime, इसलिए ब्राउज़र और CDN उस कोड को केवल एक बार कैश करते हैं।
CSS रंग। आइकन के पूरे पेज का रंग बदलने के लिए एक ही CSS बदलाव काफ़ी है, और आइकन दोबारा रेंडर नहीं होते।

बड़े आइकन सेट

हर आइकन अपनी शैडो और चमक के लिए SVG filter का उपयोग करता है। अगर आप सैकड़ों आइकन दिखाते हैं, तो केवल दिखने वाली पंक्तियाँ रेंडर करें, या <img> टैग में स्टैटिक SVG फ़ाइलें उपयोग करें, जिन्हें ब्राउज़र एक बार rasterize करता है।

डीप इंपोर्ट

डेव सर्वर अक्सर पूरा पैकेज इंडेक्स लोड करते हैं, जो हर आइकन का संदर्भ देता है। इससे बचने के लिए हर आइकन को उसकी अपनी फ़ाइल से इंपोर्ट करें:

import Folder from "kubai-icons-react/icons/folder";