ตัวเลือกพรีโปรเซสเซอร์ Vue CLI CSS: dart-sass VS node-sass?

เมื่อสร้างโครงการใหม่ด้วย CLI (v3.7.0) มีตัวเลือกให้เลือกระหว่างdart-sassหรือnode-sassคอมไพเลอร์

เหล่านี้จะเปรียบเทียบวิธีการแต่ละอื่น ๆ ที่จะเฉพาะเจาะจงมากขึ้นกว่าที่ประกาศไว้ในเอกสาร Vue ?

เคล็ดลับเกี่ยวกับประสิทธิภาพของ Sass

โปรดทราบว่าเมื่อใช้ Dart Sass การคอมไพล์แบบซิงโครนัสจะเร็วกว่าการคอมไพล์แบบอะซิงโครนัสเป็นสองเท่าโดยค่าเริ่มต้นเนื่องจากค่าใช้จ่ายของการเรียกกลับแบบอะซิงโครนัส เพื่อหลีกเลี่ยงค่าใช้จ่ายนี้คุณสามารถใช้แพ็คเกจ fibre เพื่อเรียกผู้นำเข้าแบบอะซิงโครนัสจากเส้นทางรหัสซิงโครนัส ในการเปิดใช้งานสิ่งนี้เพียงแค่ติดตั้งเส้นใยเป็นการพึ่งพาโครงการ:

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

แก้ไข 2020/01:วู CLI 4.2.2 สร้างโครงการใหม่ยังคงแนะนำเป็นตัวเลือกแรกก่อนdart-sass node-sassยังได้รับการยอมรับที่นี่ซึ่งnode-sassเป็นตัวเลือกที่มีประสิทธิภาพมากกว่าและแทบไม่มีใครใช้ dart-sass (ความคิดเห็นของ ccleve)

แก้ไข 2020/09:ในฐานะที่เป็นอาลี Bahrami ปรับปรุงคำตอบที่กว้างขวางของเขาdart-sassเป็นทางเลือกที่เป็นจะถูกทำเครื่องหมายว่าเลิกnode-sass

น่าเสียดายที่dart-sassเป็นเวอร์ชันที่คอมไพล์ด้วย JS มีประสิทธิภาพต่ำ อย่างไรก็ตามนักพัฒนาซอฟต์แวร์ตระหนักดีถึงเรื่องนี้และกำลังดำเนินการเพื่อเพิ่มประสิทธิภาพตามที่ระบุไว้ในปัญหานี้

ปรับปรุง17/17/2020 :

เนื่องจากคำตอบนี้ได้รับการโหวตเพิ่มขึ้นทุกวันฉันคิดว่าอาจจะคุ้มค่าที่จะดำดิ่งลงไปในหัวข้อนี้

พิจารณาเว็บไซต์ sass-lang :

Dart Sass เป็นการใช้งานหลักของ Sass ซึ่งหมายความว่าจะได้รับคุณสมบัติใหม่ก่อนการใช้งานอื่น ๆ รวดเร็วติดตั้งง่ายและรวบรวมเป็น JavaScript บริสุทธิ์ซึ่งทำให้ง่ายต่อการรวมเข้ากับเวิร์กโฟลว์การพัฒนาเว็บสมัยใหม่

โผ Sass เป็นไปอย่างรวดเร็ว แต่ไม่JS รุ่นรวบรวม ในทางปฏิบัติเมื่อเราพูดว่า Dart-Sass มีสองทางเลือก:

• Dart-Sass บน Dart-VM
• Dart-Sass บนNPMซึ่งเป็นเวอร์ชันคอมไพล์ JS ที่บริสุทธิ์

ฉันรวบรวมไฟล์ Bootstrap 4 Sass เป็น CSS ด้วย Node-Sass, Dart-Sass และ Dart-Sass (JS) และคุณจะเห็นผลลัพธ์ต่อไปนี้:

• ในกรณีนี้สองวินาทีไม่ใช่เรื่องใหญ่ แต่ถือว่า Dart-Sass (JS) ช้ากว่า Dart-Sass (Dart VM) เก้าเท่าและช้ากว่า node-sass สามเท่า
• ฉันมีโปรเจ็กต์ที่มีธีม +20 ใช้เวลา 30 วินาทีกับ node-sass แต่ฉันพยายามใช้ Dart-Sass (JS) และใช้เวลาเป็นศตวรรษ!
• แม้ว่า Dart-Sass (Dart VM) จะเร็วที่สุด แต่การติดตั้งหรือรวมเข้าด้วยกันนั้นค่อนข้างยุ่งยาก
• และ Node-Sass ถือว่าเลิก

ฉันเขียนบล็อกเกี่ยวกับเรื่องนี้ที่นี่คุณสามารถอ่านเพิ่มเติมได้ที่นี่

โหนดเขื่องอาจจะเร็วกว่าโผเขื่อง แต่เป็นที่เขียนนี้โผเขื่องเป็นห้องสมุดที่เดียวที่ดำเนินการกฎซึ่งขอแนะนำมากกว่า@use @importตามเว็บไซต์sass-langอย่างเป็นทางการ:

เกิดอะไรขึ้น@import? @importกฎมีจำนวนของปัญหาร้ายแรง:

• @importทำให้ตัวแปรมิกซ์อินและฟังก์ชันทั้งหมดสามารถเข้าถึงได้ทั่วโลก สิ่งนี้ทำให้ผู้คน (หรือเครื่องมือ) บอกได้ยากมากว่าสิ่งใดถูกกำหนดไว้ที่ไหน

• เนื่องจากทุกสิ่งเป็นทั่วโลกห้องสมุดจึงต้องนำหน้าสมาชิกทั้งหมดเพื่อหลีกเลี่ยงการชนกันของการตั้งชื่อ

• @extend กฎยังเป็นแบบสากลซึ่งทำให้ยากที่จะคาดเดาว่าจะขยายกฎสไตล์ใด

• แต่ละสไตล์ชีทจะถูกเรียกใช้งานและ CSS จะถูกปล่อยออกมาทุกครั้งที่มีการ@importแก้ไขซึ่งจะเพิ่มเวลาในการคอมไพล์และสร้างเอาต์พุตที่ขยาย

• ไม่มีวิธีกำหนดสมาชิกส่วนตัวหรือตัวเลือกตัวยึดตำแหน่งที่ไม่สามารถเข้าถึงสไตล์ชีตดาวน์สตรีมได้

ระบบโมดูลใหม่และ@useกฎจะแก้ไขปัญหาเหล่านี้ทั้งหมด

นอกจากนี้@importจะค่อยๆยุติลงในอีกไม่กี่ปีข้างหน้าและในที่สุดก็ถูกลบออกจากภาษาทั้งหมด

เพื่อให้ได้รับข้อมูลล่าสุดเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดใน Sass คุณควรใช้ dart-sass (เช่นsass ) ในตอนนี้