[vue.js] Vue CLI CSS 전 처리기 옵션 : dart-sass VS node-sass?

Program / 글쓴이

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 컴파일 버전이 성능이 좋지 않다는 것입니다. 그러나 개발자는이를 잘 알고 있으며이 문제에 명시된대로 더 나은 성능을 위해 노력하고 있습니다 .

답변

업데이트 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 는 더 이상 사용되지 않는 것으로 간주됩니다 .

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

답변

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

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

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

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

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

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

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

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

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

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

답변