Vue CLI CSS ön işlemci seçeneği: dart-sass VS düğüm-sass?

CLI (v3.7.0) ile yeni bir proje oluştururken, dart-sassveya node-sassderleyici arasında seçim yapma seçeneği vardır .

Vue belgelerinde belirtilenden daha spesifik olmak üzere bunlar birbirleriyle nasıl karşılaştırılır ?

Sass Performansı Üzerine Bir İpucu

Dart Sass kullanılırken, zaman uyumsuz geri aramaların ek yükü nedeniyle senkronize derlemenin varsayılan olarak eşzamansız derlemeden iki kat daha hızlı olduğunu unutmayın. Bu ek yükü önlemek için, eşzamanlı kod yolundan eşzamansız ithalatçıları çağırmak için lifler paketini kullanabilirsiniz. Bunu etkinleştirmek için, fiberleri bir proje bağımlılığı olarak kurmanız yeterlidir:

npm install -D fibers

Yerel bir modül olduğu için, işletim sistemine ve derleme ortamına göre uyumluluk sorunları olabileceğini lütfen unutmayın. Bu durumda npm uninstall -D fiberssorunu çözmek için lütfen çalıştırın .

? 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 DÜZENLEME: Vue CLI 4.2.2 yeni proje oluşturma hala daha dart-sassönce ilk seçenek olarak öneriliyornode-sass . Yine de burada node-sassdaha performanslı bir seçim olduğu tespit edilmiştir ve neredeyse hiç kimse dart sass (ccleve'in yorumu) kullanmaz.

DÜZENLEME 2020/09: As Ali Bahrami yaptığı kapsamlı cevabı güncellenen, dart-sasstercih edilen bir seçimdir olarak node-sasskullanım dışı olarak işaretlenmiş ediliyor .

Çok kötü dart-sassİçinde JS-derlenmiş sürümü zayıf performansa sahiptir var. Ancak, geliştiricileri bunun farkındadır ve bu sayıda belirtildiği gibi daha yüksek performans için çalışmaktadır .

Güncelleme 09/17/2020 :

Bu cevap her geçen gün artıyor, belki de bu konuya daha derin dalmaya değer diye düşündüm.

Düşünüldüğünde küstahlık-lang web sitesi :

Dart Sass, Sass'ın birincil uygulamasıdır, yani başka herhangi bir uygulamadan önce yeni özellikler alır. Hızlıdır, kurulumu kolaydır ve saf JavaScript ile derlenir , bu da modern web geliştirme iş akışlarına entegre etmeyi kolaylaştırır.

Dart-Sass hızlıdır, ancak JS'nin derlenmiş versiyonu değildir . Pratik olarak Dart-Sass dediğimizde iki seçenek vardır:

• Dart-VM'de Dart-Sass
• Dart-Sass on NPM üzerinde saf JS derlenmiş versiyonu

Bootstrap 4 Sass dosyasını Node-Sass, Dart-Sass ve Dart-Sass (JS) ile CSS'ye derledim ve aşağıdaki sonucu görebilirsiniz:

• Bu özel durumda, iki saniye çok önemli değil; ancak Dart-Sass'ın (JS), Dart-Sass'tan (Dart VM) dokuz kat ve node-sass'tan üç kat daha yavaş olduğunu düşünün.
• +20 temalı bir projem vardı, node-sass ile 30 saniye sürdü ama Dart-Sass (JS) kullanmaya çalıştım ve bir asır sürdü!
• Dart-Sass (Dart VM) en hızlısı olmasına rağmen, onu kurmak veya entegre etmek biraz zor.
• Ve Node-Sass kullanımdan kaldırılmış kabul edilir .

Burada blog yazdım , buradan daha fazla bilgi edinebilirsiniz.

node-sass, dart-sass'tan daha hızlı olabilir, ancak bu dart-sass yazılırken, @usekuralı uygulayan tek kitaplıktır ve şiddetle tavsiye edilir @import. Resmi sass-lang web sitesine göre :

Neyin Yanlış @import? @importKural ciddi sorunların bir numarası vardır:

• @importtüm değişkenleri, karışımları ve işlevleri küresel olarak erişilebilir hale getirir. Bu, insanların (veya araçların) herhangi bir şeyin nerede tanımlandığını söylemesini çok zorlaştırır.

• Her şey küresel olduğu için, kitaplıkların ad çakışmalarını önlemek için tüm üyelerine önek olması gerekir.

• @extend kurallar da küreseldir, bu da hangi stil kurallarının genişletileceğini tahmin etmeyi zorlaştırır.

• Her stil sayfası çalıştırılır ve her düzenlendiğinde CSS'si yayınlanır @import, bu da derleme süresini artırır ve şişirilmiş çıktı üretir.

• Alt yöndeki stil sayfalarına erişilemeyen özel üyeleri veya yer tutucu seçicileri tanımlamanın bir yolu yoktu.

Yeni modül sistemi ve @usekural tüm bu sorunları ele almaktadır.

Ayrıca, @importolacak zaman içerisinde terk önümüzdeki birkaç yıl içinde ve sonunda tamamen dilden kaldırıldı.

Sass'taki en iyi uygulamalardan haberdar olmak için şimdilik dart sass (yani sass ) kullanmalısınız.