Opción de preprocesador Vue CLI CSS: dart-sass VS node-sass?

108

Al crear un nuevo proyecto con CLI (v3.7.0), hay una opción para elegir entre dart-sasso node-sasscompilador.

¿Cómo se comparan estos entre sí, para ser más específicos de lo declarado en los documentos de Vue ?

Un consejo sobre el rendimiento sass

Tenga en cuenta que al utilizar Dart Sass, la compilación sincrónica es dos veces más rápida que la compilación asincrónica de forma predeterminada, debido a la sobrecarga de las devoluciones de llamada asincrónicas. Para evitar esta sobrecarga, puede utilizar el paquete de fibras para llamar a importadores asíncronos desde la ruta del código síncrono. Para habilitar esto, simplemente instale fibras como una dependencia del proyecto:

npm install -D fibers

También tenga en cuenta que, como es un módulo nativo, puede haber problemas de compatibilidad que varían según el sistema operativo y el entorno de compilación. En ese caso, ejecute npm uninstall -D fiberspara solucionar el problema.

? 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

EDITAR 2020/01: Vue CLI 4.2.2 crear un nuevo proyecto todavía se sugiere dart-sasscomo la primera opción anterior node-sass. Sin embargo, se ha establecido aquí que node-sasses la opción más performativa y casi nadie usa dart-sass (comentario de ccleve).

EDITAR 2020/09: Como Ali Bahrami actualizó su extensa respuesta, dart-sasses la opción preferida ya que node-sassse marca como obsoleta .

Lástima dart-sassque es una versión compilada por JS que tiene un rendimiento deficiente. Sin embargo, sus desarrolladores son muy conscientes de esto y están trabajando para lograr un mayor rendimiento como se indica en este número .

ingeniero ux
fuente
4
A partir de febrero de 2020, parece que nadie está usando dart-sass: npmtrends.com/dart-sass-vs-node-sass . 3,5 millones de descargas por semana de nodo, 16.000 para dardos.
ccleve
3
@ccleve Eso se debe a que la distribución de dart-sass más utilizada está en el paquete sass, que actualmente tiene 2 millones de descargas semanales a partir de mayo de 2020. npmtrends.com/sass-vs-node-sass
sebu
1
Tengo curiosidad por saber por qué hay dos implementaciones de dart-sass en npm. sass es actualmente el último, en v 1.26.5 mientras que dart-sass está en 1.25. Independientemente, node-sass todavía eclipsa a estos dos combinados: npmtrends.com/sass-vs-node-sass-vs-dart-sass
orionrush

Respuestas:

112

Actualización 17/09/2020 :

Como esta respuesta recibe votos a favor todos los días, pensé que tal vez valía la pena profundizar en este tema.


Considerando el sitio web de sass-lang :

Dart Sass es la implementación principal de Sass, lo que significa que obtiene nuevas funciones antes que cualquier otra implementación. Es rápido, fácil de instalar y se compila en JavaScript puro, lo que facilita su integración en los flujos de trabajo de desarrollo web modernos.

Dart-Sass es rápido, pero no la versión compilada de JS . Prácticamente cuando decimos Dart-Sass hay dos opciones:

  • Dart-Sass en Dart-VM
  • Dart-Sass en NPM, que es una versión compilada de JS pura

Compilé el archivo Bootstrap 4 Sass en CSS con Node-Sass, Dart-Sass y Dart-Sass (JS) y puede ver el siguiente resultado:

Comparación Node-Sass y Dart-Sass - fuente: https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572?source=friends_link&sk=3c465b78a0e1bc98379afd818546fcf4

  • En este caso particular, dos segundos no es gran cosa; pero considere que Dart-Sass (JS) es nueve veces más lento que Dart-Sass (Dart VM) y tres veces más lento que node-sass.
  • Tenía un proyecto con +20 temas, me tomó 30 segundos con node-sass, pero intenté usar Dart-Sass (JS), ¡y me tomó un siglo!
  • Aunque Dart-Sass (Dart VM) es el más rápido, instalarlo o integrarlo es un poco complicado.
  • Y Node-Sass se considera obsoleto .

Me escribió en su blog acerca de ello aquí, se puede leer más sobre esto aquí.

Ali Bahrami
fuente
1
En la última línea, ¿quieres decir que dart-sasses más rápido?
Saksham
1
Lo siento, quise comentar sobre otra respuesta, de alguna manera debo haber publicado en la incorrecta :)
mr1031011
5

node-sass puede ser más rápido que dart-sass, pero al momento de escribir este dart-sass es la única biblioteca que implementa la @useregla, que se recomienda encarecidamente @import. Según el sitio web oficial de sass-lang :

¿Qué tiene de malo @import? La @importregla tiene varios problemas graves:

  • @importhace que todas las variables, mixins y funciones sean accesibles globalmente. Esto hace que sea muy difícil para las personas (o herramientas) saber dónde se define algo.

  • Debido a que todo es global, las bibliotecas deben prefijar a todos sus miembros para evitar colisiones de nombres.

  • @extend Las reglas también son globales, lo que dificulta predecir qué reglas de estilo se extenderán.

  • Cada hoja de estilo se ejecuta y su CSS se emite cada vez que se @importedita, lo que aumenta el tiempo de compilación y produce resultados inflados.

  • No había forma de definir miembros privados o selectores de marcadores de posición que fueran inaccesibles para las hojas de estilo posteriores.

El nuevo sistema de módulos y la @useregla abordan todos estos problemas.

Además, @importse eliminará gradualmente durante los próximos años y, finalmente, se eliminará del idioma por completo.

Para mantenerse actualizado con las mejores prácticas en Sass, debe usar dart-sass (es decir, sass ) por ahora.

rasnauf
fuente
1
Además, la comparación de popularidad entre dart-sass y node-sass es extremadamente falsa considerando que la mayoría de la gente usa sass en lugar de dart-sass , las cuales son distribuciones de Dart Sass .
rasnauf
Muy interesante @rasnauf, ¡muchas gracias por señalar esto! Con algunos proyectos que están importando archivos grandes bibliotecas .scss, ha sido muy lento para hacer incluso un pequeño cambio en un archivo .scss y tener que esperar a que todos los archivos se reconstruyeron ... Por lo que he leído sobre @useen este punto, parece que esto podría mejorar drásticamente los tiempos de reconstrucción con compilaciones incrementales mientras se realiza el desarrollo :)
ux.engineer