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

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 .

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:

• 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.

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 ).