Вариант предварительного процессора CSS Vue CLI: dart-sass VS node-sass?

При создании нового проекта с помощью CLI (v3.7.0) существует возможность выбора между компилятором dart-sass или node-sass.

Как они соотносятся друг с другом, чтобы быть более конкретными, чем заявлено в Vue docs?

Совет по Sass Performance

Обратите внимание, что при использовании Dart Sass синхронная компиляция в два раза по умолчанию быстрая асинхронная компиляция из-за асинхронные обратные вызовы. Чтобы избежать этих накладных расходов, вы можете использовать волокна пакет для вызова асинхронных импортеров из пути синхронного кода. Чтобы включить это, просто установите волокна как зависимость проекта:

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

ОТВЕТЫ

Ответ 1

Согласно официальному сайту sass-lang:

Dart Sass - это основная реализация Sass, что означает новые функции перед любой другой реализацией. Это быстро, легко установить, и он компилирует в чистый JavaScript, что облегчает интегрироваться в современные процессы веб-разработки.

Dart-Sass работает быстро, если вы запускаете его внутри Dart-VM, но он говорит, что он компилируется в чистый JS. Пакет npmjs из dart-sass - это просто скомпилированная версия, которая работает медленнее, чем node-sass или native dart-sass.

Если вы ищете результаты измерений, я рекомендую прочитать об этом здесь, здесь есть образцы и разные цифры:

Запуск файла, содержащего 16 экземпляров импорта Bootstrap рамки:

sassc: 0.820s

  • Дарт Сасс из снимка скрипта: 1.558 с

  • Dart Sass native executable: 0.927s

  • Dart Sass на Node.js: 3.129s Исходя из этих цифр, Dart Sass из собственного исполняемого файла выглядит примерно так:

  • В 1,1 раза медленнее, чем libsass

  • В 3,4 раза быстрее, чем Дарт Сасс на узле

Это первое измерение, когда Дарт Сасс работает как заранее скомпилированный нативный код, и результаты обнадеживают. Это намного ниже порога 100 мс для крошечных файлов, и это на одном уровне с SassC для большинства тестовых случаев. SassC по-прежнему ведет для испытаний со многими расширяется, хотя и незначительно, и для одного из наших реальных испытаний случаи (хотя Дарт Сасс ведет в других). Две реализации можно справедливо описать как имеющую примерно одинаковую производительность в целом.

Dart Sass на узле все еще существенно медленнее, чем на Dart VM, и это относительное замедление становится более выраженным, как сырой дротик код становится быстрее.

Мой личный опыт использования пакета dart-sass npmjs вместо node-sass (который является js оболочкой нативной библиотеки C) заключается в том, что dart-sass много (для меня как минимум 50x, потому что у меня много большие файлы темы) медленнее, чем node-sass.