Opcja preprocesora Vue CLI CSS: dart-sass VS node-sass?

122

Podczas tworzenia nowego projektu z CLI (v3.7.0), istnieje możliwość wyboru między dart-sasslub node-sasskompilatorem.

Jak to się ma do siebie, by być bardziej szczegółowym niż deklarowane w dokumentach Vue ?

Wskazówka dotycząca wydajności Sass

Należy pamiętać, że podczas korzystania z Dart Sass kompilacja synchroniczna jest domyślnie dwukrotnie szybsza niż kompilacja asynchroniczna, ze względu na obciążenie związane z asynchronicznymi wywołaniami zwrotnymi. Aby uniknąć tego narzutu, można użyć pakietu Fiber do wywoływania importerów asynchronicznych ze ścieżki kodu synchronicznego. Aby to umożliwić, po prostu zainstaluj włókna jako zależność projektu:

npm install -D fibers

Należy również pamiętać, że jest to moduł natywny, mogą wystąpić problemy ze zgodnością w zależności od systemu operacyjnego i środowiska kompilacji. W takim przypadku uruchom, npm uninstall -D fibersaby rozwiązać problem.

? 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

EDYCJA 2020/01: Vue CLI 4.2.2 tworzenie nowego projektu nadal sugeruje dart-sassjako pierwszą opcję wcześniej node-sass. Jednak ustalono, że node-sassjest to bardziej skuteczny wybór i prawie nikt nie używa dart-sass (komentarz ccleve).

EDYCJA 2020/09: Ponieważ Ali Bahrami zaktualizował swoją obszerną odpowiedź, dart-sassjest preferowanym wyborem, ponieważ node-sassjest oznaczony jako przestarzały .

Szkoda, dart-sassże wersja skompilowana w JS ma słabą wydajność. Jednak jego programiści są tego świadomi i pracują nad większą wydajnością, jak opisano w tym numerze .

ux.engineer
źródło
4
Od lutego 2020 r. Wydaje się, że nikt nie używa dart-sass: npmtrends.com/dart-sass-vs-node-sass . 3,5 miliona pobrań na tydzień dla węzła, 16 000 dla dart.
ccleve
3
@ccleve Dzieje się tak dlatego, że najczęściej używaną dystrybucją dart-sass jest pakiet sass, który obecnie ma 2 miliony pobrań tygodniowo od maja 2020 r. npmtrends.com/sass-vs-node-sass
sebu
1
Jestem ciekawy, dlaczego na npm są dwie implementacje dart-sass. sass jest obecnie najnowszy, w wersji 1.26.5, podczas gdy dart-sass jest na poziomie 1,25. Bez względu na to, że node-sass nadal krasnoludków tych dwóch połączonych: npmtrends.com/sass-vs-node-sass-vs-dart-sass
orionrush

Odpowiedzi:

123

Aktualizacja 17.09.2020 :

Ponieważ ta odpowiedź zbiera się każdego dnia, pomyślałem, że może warto zagłębić się w ten temat.


Biorąc pod uwagę stronę internetową sass-lang :

Dart Sass jest podstawową implementacją Sassa, co oznacza, że ​​otrzymuje nowe funkcje przed jakąkolwiek inną implementacją. Jest szybki, łatwy w instalacji i kompiluje się do czystego JavaScript, co ułatwia integrację z nowoczesnymi przepływami pracy związanymi z tworzeniem stron internetowych.

Dart-Sass jest szybki, ale nie jest wersją skompilowaną w JS . Praktycznie, gdy mówimy Dart-Sass, istnieją dwie opcje:

  • Dart-Sass na Dart-VM
  • Dart-Sass na NPM, który jest czystą skompilowaną wersją JS

Skompilowałem plik Bootstrap 4 Sass do CSS z Node-Sass, Dart-Sass i Dart-Sass (JS) i możesz zobaczyć następujący wynik:

Porównanie Node-Sass i Dart-Sass - źródło: https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572?source=friends_link&sk=3c465b78a0e1bc98379afd818546fcf4

  • W tym konkretnym przypadku dwie sekundy to nic wielkiego; ale weźmy pod uwagę, że Dart-Sass (JS) jest dziewięć razy wolniejszy niż Dart-Sass (Dart VM) i trzy razy wolniejszy niż node-sass.
  • Miałem projekt z ponad 20 motywami, zajęło to 30 sekund z node-sass, ale próbowałem użyć Dart-Sass (JS) i zajęło to sto lat!
  • Chociaż Dart-Sass (Dart VM) jest najszybszy, ale instalacja lub integracja jest nieco trudna.
  • Node-Sass jest uważany za przestarzały .

I blogu o tym tutaj można przeczytać więcej na ten temat tutaj.

Ali Bahrami
źródło
1
Czy w ostatniej linii masz na myśli dart-sassto, że jest szybszy?
Saksham,
6

node-sass może być szybszy niż dart-sass, ale w chwili pisania tego dart-sass jest jedyną biblioteką, która implementuje @useregułę, co jest zdecydowanie zalecane @import. Według oficjalnej strony internetowej Sass-Lang :

Co jest nie tak @import? @importReguła ma kilka poważnych problemów:

  • @importsprawia, że ​​wszystkie zmienne, elementy mieszane i funkcje są globalnie dostępne. To sprawia, że ​​ludziom (lub narzędziom) bardzo trudno jest stwierdzić, gdzie cokolwiek zostało zdefiniowane.

  • Ponieważ wszystko jest globalne, biblioteki muszą poprzedzać wszystkie swoje elementy członkowskie, aby uniknąć kolizji nazw.

  • @extend reguły są również globalne, co utrudnia przewidzenie, które reguły stylu zostaną rozszerzone.

  • Każdy arkusz stylów jest wykonywany, a jego kod CSS jest emitowany za każdym razem, gdy jest @importedytowany, co wydłuża czas kompilacji i powoduje nadęty wynik.

  • Nie było sposobu na zdefiniowanie prywatnych członków lub zastępczych selektorów, które byłyby niedostępne dla dalszych arkuszy stylów.

Nowy system modułów i @usereguła rozwiązują wszystkie te problemy.

Ponadto w ciągu najbliższych kilku lat @importbędzie stopniowo wycofywany , a ostatecznie całkowicie usunięty z języka.

Aby być na bieżąco z najlepszymi praktykami w Sassie, powinieneś na razie używać dart-sass (tj. Sass ).

rasnauf
źródło
1
Ponadto porównanie popularności między dart-sass i node-sass jest wyjątkowo nieszczere, biorąc pod uwagę, że większość ludzi używa sass zamiast dart-sass , z których oba są dystrybucjami Dart Sass .
rasnauf
Bardzo interesujące @rasnauf, wielkie dzięki za zwrócenie na to uwagi! W przypadku niektórych projektów, które są importowane pliki big bibliotek .scss, został starannie powolny, aby jeszcze malutką zmianę do pliku .scss i konieczności oczekiwania, że wszystkie pliki zostają odbudowane ... Za to, co czytałem o @usena ten wydaje się, że może to radykalnie poprawić czas odbudowy dzięki przyrostowym kompilacjom podczas tworzenia programu :)
ux.engineer