Vue CLI CSS 전 처리기 옵션 : dart-sass VS node-sass?

122

CLI (v3.7.0)를 사용하여 새 프로젝트를 만들 때 dart-sass또는 다음 중에서 선택할 수있는 옵션이 있습니다.node-sass 컴파일러 .

Vue 문서 에서 선언 한 것보다 더 구체적으로 어떻게 비교 합니까?

Sass 성능에 대한 팁

Dart Sass를 사용할 때 비동기식 콜백의 오버 헤드로 인해 동기식 컴파일이 기본적으로 비동기식 컴파일보다 두 배 빠릅니다. 이 오버 헤드를 방지하기 위해 fiber 패키지를 사용하여 동기 코드 경로에서 비동기 임포터를 호출 할 수 있습니다. 이를 활성화하려면 Fiber를 프로젝트 종속성으로 설치하기 만하면됩니다.

npm install -D fibers

네이티브 모듈이므로 OS 및 빌드 환경에 따라 호환성 문제가있을 수 있습니다. 이 경우 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

2020/01 편집 : Vue CLI 4.2.2 새 프로젝트 만들기는 여전히 dart-sass이전의 첫 번째 옵션으로 제안 됩니다 node-sass. 그러나 node-sass더 성능이 좋은 선택이 여기에 확립되어 있으며 거의 아무도 다트를 사용하지 않습니다. 않습니다 (ccleve의 의견).

편집 2020/09 : 알리 Bahrami 그의 광범위한 대답을 업데이트, dart-sass선호하는 선택 으로 node-sass되지 않는 것으로 표시되고있다 .

너무 나쁜 dart-sass것은 JS 컴파일 버전이 성능이 좋지 않다는 것입니다. 그러나 개발자는이를 잘 알고 있으며이 문제에 명시된대로 더 나은 성능을 위해 노력하고 있습니다 .

vue.js  webpack  sass  vue-cli  node-sass 
— ux.engineer
소스
4
2020 년 2 월 현재 아무도 dart-sass : npmtrends.com/dart-sass-vs-node-sass를 사용하지 않는 것으로 보입니다 . 노드의 주당 350 만 다운로드, 다트의 경우 16,000 회.
— ccleve
3
@ccleve 그 이유는 dart-sass의 가장 많이 사용되는 배포판이 sass 패키지에 있기 때문입니다. 현재 2020 년 5 월 현재 2 백만 회 다운로드가 있습니다. npmtrends.com/sass-vs-node-sass
— sebu
1
npm에 왜 두 개의 dart-sass 구현이 있는지 궁금합니다. sass 는 현재 v 1.26.5이고 dart-sass 는 1.25입니다. node-sass에 관계없이 여전히이 두 가지가 결합 된 것은 왜소합니다. npmtrends.com/sass-vs-node-sass-vs-dart-sass
— orionrush

답변:

123

업데이트 09/17/2020 :

이 답변은 매일 찬성 투표를 받으므로이 주제에 대해 더 깊이 파고 드는 것이 가치가 있다고 생각했습니다.

sass-lang 웹 사이트 고려 :

Dart Sass는 Sass의 주요 구현으로, 다른 구현보다 먼저 새로운 기능을 얻습니다. 빠르고 설치가 쉬우 며 순수한 JavaScript로 컴파일 되어 최신 웹 개발 워크 플로에 쉽게 통합 할 수 있습니다.

Dart-Sass는 빠르지 만 JS 컴파일 버전 은 아닙니다 . 실제로 Dart-Sass를 말할 때 두 가지 옵션이 있습니다.

  • Dart-VM의 Dart-Sass
  • 순수 JS 컴파일 버전 인 NPM의 Dart-Sass

Node-Sass, Dart-Sass 및 Dart-Sass (JS)를 사용하여 Bootstrap 4 Sass 파일을 CSS로 컴파일했으며 다음 결과를 볼 수 있습니다.

Node-Sass와 Dart-Sass 비교-출처 : https://itnext.io/the-css-preprocessor-dilemma-node-sass-or-dart-sass-32a0a096572?source=friends_link&sk=3c465b78a0e1bc98379afd818546fcf4

  • 이 특별한 경우에 2 초는 큰 문제가 아닙니다. 그러나 Dart-Sass (JS)는 Dart-Sass (Dart VM)보다 9 배 느리고 node-sass보다 3 배 느립니다.
  • +20 개의 테마로 프로젝트를 진행했는데 node-sass로 30 초가 걸렸지 만 Dart-Sass (JS)를 사용하려고했는데 한 세기가 걸렸습니다!
  • Dart-Sass (Dart VM)가 가장 빠르지 만 설치 또는 통합이 약간 까다 롭습니다.
  • 그리고 Node-Sass 는 더 이상 사용되지 않는 것으로 간주됩니다 .

나는 블로그 당신이 여기에 대한 자세한 내용을보실 수 있습니다, 여기에 대해.

— 알리 바라미
소스
1
마지막 줄에서 dart-sass더 빠르다는 뜻 입니까 ??
— Saksham
6

node-sass는 dart-sass보다 빠를 수 있지만,이 dart-sass는이 @use규칙 을 구현하는 유일한 라이브러리이며 @import. 공식 sass-lang 웹 사이트 에 따르면 :

무엇이 문제입니까 @import? 이 @import규칙에는 여러 가지 심각한 문제가 있습니다.

  • @import모든 변수, 믹스 인 및 함수를 전역 적으로 액세스 할 수 있습니다. 이로 인해 사람 (또는 도구)이 정의 된 위치를 알기가 매우 어렵습니다.

  • 모든 것이 글로벌이기 때문에 라이브러리는 이름 충돌을 피하기 위해 모든 멤버 앞에 접두사를 붙여야합니다.

  • @extend 규칙도 전역 적이므로 확장 될 스타일 규칙을 예측하기 어렵습니다.

  • 각 스타일 시트가 실행되고 CSS가 @import편집 될 때마다 방출 되므로 컴파일 시간이 늘어나고 출력이 부풀어집니다.

  • 다운 스트림 스타일 시트에 액세스 할 수없는 개인 멤버 또는 플레이스 홀더 선택기를 정의 할 방법이 없었습니다.

새로운 모듈 시스템과 @use규칙은 이러한 모든 문제를 해결합니다.

또한, @import됩니다 점차 단계적으로 향후 몇 년 동안, 결국 완전히 언어에서 제거.

Sass의 모범 사례를 최신 상태로 유지하려면 지금은 dart-sass (예 : sass )를 사용해야합니다 .

— Rasnauf
소스
1
또한 dart-sass와 node-sass 간의 인기 비교는 대부분의 사람들 이 Dart Sass의 분포 인 dart-sass 대신 sass 를 사용 한다는 점을 고려할 때 극도로 불명예 합니다.
— rasnauf
매우 흥미로운 @rasnauf, 이것을 지적 해 주셔서 감사합니다! 큰 라이브러리의 .scss 파일을 가져 오는 일부 프로젝트에서는 .scss 파일을 아주 조금만 변경하고 모든 파일이 다시 작성 될 때까지 기다려야하는 속도가 매우 느려졌습니다. 제가 읽은 내용 @use은 요점은,이 극적으로 dev에 :)하는 동안 증분 빌드와 시간을 다시 개선 할 수있는 것
— ux.engineer
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.