Vue CLI CSS पूर्व-प्रोसेसर विकल्प: dart-sass VS नोड- sass?

Question 1

सीएलआई (v3.7.0) के साथ एक नई परियोजना बनाते समय, विकल्प dart-sassया node-sassसंकलक के बीच चयन करने का विकल्प होता है ।

Vue डॉक्स में घोषित की तुलना में ये एक दूसरे से तुलना कैसे करते हैं, यह विशिष्ट है ?

सास के प्रदर्शन पर एक टिप

ध्यान दें कि डार्ट सैस का उपयोग करते समय, एसिंक्रोनस कॉलबैक के ओवरहेड के कारण, तुल्यकालिक संकलन डिफ़ॉल्ट रूप से अतुल्यकालिक संकलन से दोगुना होता है। इस ओवरहेड से बचने के लिए, आप सिंक्रोनस कोड पथ से एसिंक्रोनस आयातकों को कॉल करने के लिए फ़ाइबर पैकेज का उपयोग कर सकते हैं। इसे सक्षम करने के लिए, केवल प्रोजेक्ट निर्भरता के रूप में फाइबर स्थापित करें:

npm install -D fibers

कृपया जागरूक रहें, क्योंकि यह एक देशी मॉड्यूल है, इसमें संगतता समस्याएं हो सकती हैं जो ओएस और बिल्ड पर्यावरण पर भिन्न होती हैं। उस स्थिति में, कृपया npm uninstall -D fibersसमस्या को ठीक करने के लिए चलाएँ ।

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

EDIT 2020/01: Vue CLI 4.2.2 नए प्रोजेक्ट का निर्माण अभी भी dart-sassपहले विकल्प के रूप में सुझा रहा हैnode-sass । फिर भी यह यहां स्थापित किया गया node-sassहै जो अधिक प्रदर्शन करने वाला विकल्प है, और लगभग कोई भी डार्ट- सस (ccleve की टिप्पणी) का उपयोग नहीं करता है ।

EDIT 2020/09: जैसा कि अली बहरामि ने अपना व्यापक जवाब अपडेट किया, dart-sassयह पसंदीदा विकल्प है जैसा node-sassकि पदावनत के रूप में चिह्नित किया जा रहा है ।

बहुत बुरा dart-sassक्या है एक जे एस संकलित संस्करण खराब प्रदर्शन है। हालाँकि, यह डेवलपर्स इसके बारे में अच्छी तरह से जानते हैं, और इस मुद्दे में बताए अनुसार अधिक से अधिक प्रदर्शन की दिशा में काम कर रहे हैं ।

Question 2

अद्यतन 09/17/2020 :

जैसे-जैसे यह जवाब हर दिन बढ़ता जाता है, मैंने सोचा कि शायद इस विषय में गहराई से डाइविंग करने लायक है।

सास-लंग वेबसाइट पर विचार :

डार्ट सैस सैस का प्राथमिक कार्यान्वयन है, जिसका अर्थ है कि यह किसी भी अन्य कार्यान्वयन से पहले नई सुविधाएँ प्राप्त करता है। यह तेज़, आसानी से स्थापित है, और यह शुद्ध जावास्क्रिप्ट के लिए संकलित करता है जो आधुनिक वेब विकास वर्कफ़्लो में एकीकृत करना आसान बनाता है।

डार्ट-सैस तेज है, लेकिन जेएस संकलित संस्करण नहीं है । व्यावहारिक रूप से जब हम कहते हैं कि डार्ट-सैस दो विकल्प हैं:

डार्ट-वीएम पर डार्ट-सस
एनपीएम पर डार्ट-सास जो शुद्ध जेएस संकलित संस्करण है

मैंने सीएसएस को नोड-सास, डार्ट-सैस और डार्ट-सैस (जेएस) के साथ 4 एसएएस फाइल संकलित किया है और आप निम्नलिखित परिणाम देख सकते हैं:

इस विशेष मामले में, दो सेकंड कोई बड़ी बात नहीं है; लेकिन Dart-Sass (JS) Dart-Sass (Dart VM) से नौ गुना धीमा और नोड-sass से तीन गुना धीमा है।
मेरे पास +20 विषयों के साथ एक परियोजना थी, इसमें नोड-एसएएस के साथ 30 सेकंड लगे, लेकिन मैंने डार्ट-सैस (जेएस) का उपयोग करने की कोशिश की, और इसमें एक सदी लगी!
हालांकि डार्ट-सस (डार्ट वीएम) सबसे तेज़ है लेकिन इसे स्थापित या एकीकृत करना थोड़ा मुश्किल है।
और नोड-सास को पदावनत माना जाता है ।

मैंने इसके बारे में यहाँ ब्लॉग किया है, आप यहाँ इसके बारे में अधिक पढ़ सकते हैं।

Question 3

नोड-सस डार्ट-सस की तुलना में तेज हो सकता है, लेकिन इस डार्ट-सस को लिखने के लिए एकमात्र पुस्तकालय है जो @useनियम को लागू करता है , जिसे दृढ़ता से अनुशंसित किया जाता है @import। आधिकारिक सास-लंग वेबसाइट के अनुसार :

गलत क्या है @import? @importशासन गंभीर मुद्दों की एक संख्या है:

@importसभी चर, मिश्रण, और कार्यों को विश्व स्तर पर सुलभ बनाता है। इससे लोगों (या उपकरण) के लिए यह बताना बहुत मुश्किल हो जाता है कि कुछ भी कहां परिभाषित किया गया है।

चूँकि सब कुछ वैश्विक है, पुस्तकालयों को नामकरण टकराव से बचने के लिए अपने सभी सदस्यों के लिए उपसर्ग करना चाहिए।

@extend नियम भी वैश्विक हैं, जिससे यह अनुमान लगाना मुश्किल हो जाता है कि कौन से शैली के नियम बढ़ाए जाएंगे।

प्रत्येक स्टाइलशीट को निष्पादित किया जाता है और इसका CSS हर बार @imported होने पर उत्सर्जित होता है , जो संकलन समय को बढ़ाता है और फूला हुआ आउटपुट पैदा करता है।

निजी सदस्यों या प्लेसहोल्डर चयनकर्ताओं को परिभाषित करने का कोई तरीका नहीं था जो डाउनस्ट्रीम स्टाइलशीट के लिए दुर्गम थे।

नया मॉड्यूल सिस्टम और @useनियम इन सभी समस्याओं का समाधान करता है।

इसके अतिरिक्त, अगले कुछ वर्षों में धीरे-धीरे चरणबद्ध@import किया जाएगा , और अंततः पूरी तरह से भाषा से हटा दिया जाएगा।

आदेश सास में सर्वोत्तम प्रथाओं के साथ करने की तारीख रहने के लिए है, तो आप डार्ट-सास (यानी उपयोग करना चाहिए सास ) अब के लिए।