Vue CLI CSS プリプロセッサ オプション: dart-sass VS node-sass? 質問する

Vue CLI CSS プリプロセッサ オプション: dart-sass VS node-sass? 質問する

dart-sassCLI (v3.7.0) を使用して新しいプロジェクトを作成する場合、またはコンパイラを選択するオプションがありますnode-sass

これらは、宣言されているよりも具体的には、どのように比較されるのでしょうか?Vue ドキュメント?

Sass パフォーマンスに関するヒント

Dart Sass を使用する場合、非同期コールバックのオーバーヘッドにより、同期コンパイルはデフォルトで非同期コンパイルの 2 倍の速度になることに注意してください。このオーバーヘッドを回避するには、fibers パッケージを使用して、同期コード パスから非同期インポーターを呼び出すことができます。これを有効にするには、fibers をプロジェクトの依存関係としてインストールするだけです。

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:dart-sassVue CLI 4.2.2の新規プロジェクトの作成は、以前の最初のオプションとしてまだ提案されています。しかし、ここでは、よりパフォーマンスの高い選択肢であるnode-sassことが確立されており、node-sassほとんど誰もdart-sassを使っていない(ccleve のコメント)。

2020/09編集:アリ・バフラミ氏が詳細な回答を更新したように、dart-sass好ましい選択肢であるとしてnode-sass非推奨としてマークされています

dart-sass残念ながら、JSコンパイル版のパフォーマンスは低いです。しかし、開発者はこれをよく理解しており、パフォーマンスの向上に取り組んでいます。この問題

ベストアンサー1

アップデート2020年9月17日:

この回答は毎日賛成票を獲得しているので、このトピックについてさらに深く掘り下げる価値があるかもしれないと思いました。


考慮するsass-lang ウェブサイト:

Dart SassはSassの主要な実装であり、他の実装よりも先に新機能が追加されます。高速でインストールも簡単で、コンパイルも簡単です。純粋なJavaScriptにこれにより、最新の Web 開発ワークフローに簡単に統合できます。

Dart-Sassは速いが、JSコンパイル版実際に Dart-Sass と言う場合、2 つのオプションがあります。

  • Dart-VM 上の Dart-Sass
  • ダーツサスオン国立博物館純粋なJSコンパイルバージョンです

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) を使用しようとしたところ、100 秒もかかりました。
  • Dart-Sass(Dart VM)は最も高速ですが、インストールや統合は少し難しいです。
  • そしてNode-Sass非推奨とみなされる

ブログに書いた詳細はこちらをご覧ください。詳細はこちらをご覧ください。

おすすめ記事