Вариант препроцессора Vue CLI CSS: dart-sass VS node-sass?
При создании нового проекта с помощью CLI (v3.7.0) можно выбрать компилятор dart-sass или node-sass.
Как они соотносятся друг с другом, если быть более конкретными, чем объявлено в Vue-документы?
A Tip on Sass Performance
Note that when using Dart Sass, synchronous compilation is twice as fast as asynchronous compilation by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the fibers package to call asynchronous importers from the synchronous code path. To enable this, simply install fibers as a project dependency:
npm install -D fibersPlease also be aware, as it's a native module, there may be compatibility issues vary on the OS and build environment. In that case, please run
npm uninstall -D fibersto fix the 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
РЕДАКТИРОВАТЬ 2020/01: Vue CLI 4.2.2 для создания нового проекта по-прежнему предлагает dart-sass в качестве первого варианта перед node-sass. Тем не менее, здесь было установлено, что node-sass является более эффективным выбором, а почти никто не использует dart-sass (комментарий ccleve).
РЕДАКТИРОВАТЬ 2020/09: Поскольку Али Бахрами обновил свой обширный ответ, dart-sass является предпочтительным выбором как node-sass помечен как устаревший.
Жаль, что dart-sass в версии, скомпилированной с помощью JS, низкая производительность. Однако его разработчики хорошо знают об этом и работают над повышением производительности, как указано в Эта проблема.
@ccleve Это потому, что наиболее часто используемый дистрибутив dart-sass находится в пакете sass, который в настоящее время имеет 2 миллиона загрузок в неделю по состоянию на май 2020 года. npmtrends.com/sass-vs-node-sass
Мне любопытно, почему в npm есть две реализации dart-sass. дерзкий в настоящее время является последней версией 1.26.5, а дерзкий дротик — 1.25. Несмотря на это, узел-дерзость по-прежнему затмевает эти два вместе: npmtrends.com/sass-vs-node-sass-vs-dart-sass
Небольшое обновление, sass обогнал node-sass по состоянию на июль 2021 года!
Ответы 3
Обновить 17.09.2020:
Поскольку этот ответ получает голоса каждый день, я подумал, что, возможно, стоит глубже погрузиться в эту тему.
Учитывая веб-сайт sass-lang:
Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It's fast, easy to install, and it compiles to pure JavaScript which makes it easy to integrate into modern web development workflows.
Dart-Sass быстрый, но не JS скомпилированная версия. Практически, когда мы говорим Dart-Sass, есть два варианта:
- Дарт-Сасс на Дарт-ВМ
- Dart-Sass на НПМ, который представляет собой чистую скомпилированную версию JS.
Я скомпилировал файл Bootstrap 4 Sass в CSS с помощью Node-Sass, Dart-Sass и Dart-Sass(JS), и вы можете увидеть следующий результат:
- В данном конкретном случае две секунды не имеют большого значения; но учтите, что Dart-Sass(JS) в девять раз медленнее, чем Dart-Sass(Dart VM), и в три раза медленнее, чем node-sass.
- У меня был проект с +20 темами, с node-sass это заняло 30 секунд, но я пытался использовать Dart-Sass(JS), и это заняло столетие!
- Хотя Dart-Sass (Dart VM) является самым быстрым, его установка или интеграция немного сложны.
- И Node-Sass считается устаревшим.
Я ведет блог об этом здесь, вы можете прочитать больше об этом здесь.
В последней строке вы имеете в виду dart-sass быстрее ??
В чем разница между Dart-Sass on Dart-VM и Dart-Sass NPM?
@AnandShiva Они одинаковы, один из них написан на языке dart и работает в среде выполнения dart, но npm dart sass скомпилирован в javascript.
node-sass может быть быстрее, чем dart-sass, но на момент написания этой статьи dart-sass — единственная библиотека, реализующая правило @use, которое настоятельно рекомендуется вместо @import. Согласно официальному веб-сайт sass-lang:
What’s Wrong With
@import? The@importrule has a number of serious issues:
@importmakes all variables, mixins, and functions globally accessible. This makes it very difficult for people (or tools) to tell where anything is defined.Because everything’s global, libraries must prefix to all their members to avoid naming collisions.
@extendrules are also global, which makes it difficult to predict which style rules will be extended.Each stylesheet is executed and its CSS emitted every time it’s
@imported, which increases compilation time and produces bloated output.There was no way to define private members or placeholder selectors that were inaccessible to downstream stylesheets.
The new module system and the
@userule address all these problems.
Кроме того, @import будет постепенно прекращено в течение следующих нескольких лет и в конечном итоге будет полностью удален из языка.
Чтобы быть в курсе лучших практик Sass, вам следует использовать dart-sass (т. е. дерзкий) на данный момент.
Очень интересно @rasnauf, большое спасибо, что указали на это! В некоторых проектах, которые импортируют файлы .scss больших библиотек, внесение даже крошечных изменений в файл .scss было очень медленным, и приходилось ждать, пока все файлы будут перестроены... О чем я читал @use на на данный момент кажется, что это может значительно сократить время пересборки с помощью инкрементных сборок во время разработки :)
24.01.2021
Как написано в официальном документ node-sass github, node-sass — устарел.
Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass.
Так что я думаю, было бы лучше выбрать dart sass, если вы планируете долгосрочную перспективу или хотите быть в курсе последних событий.
По состоянию на февраль 2020 года похоже, что никто не использует dart-sass: npmtrends.com/dart-sass-vs-node-sass. 3,5 миллиона загрузок в неделю для node, 16 000 для dart.