Tùy chọn bộ xử lý trước Vue CLI CSS: dart-sass VS node-sass?

Khi tạo một dự án mới với CLI (v3.7.0), có một tùy chọn để chọn giữa dart-sasshoặc node-sasstrình biên dịch.

Làm thế nào để những điều này so sánh với nhau, cụ thể hơn được khai báo trong tài liệu Vue ?

Mẹo về Hiệu suất Sass

Lưu ý rằng khi sử dụng Dart Sass, biên dịch đồng bộ nhanh hơn gấp đôi so với biên dịch không đồng bộ theo mặc định, do chi phí gọi lại không đồng bộ. Để tránh chi phí này, bạn có thể sử dụng gói sợi để gọi các trình nhập không đồng bộ từ đường dẫn mã đồng bộ. Để kích hoạt điều này, chỉ cần cài đặt các sợi làm phụ thuộc dự án:

npm install -D fibers

Cũng xin lưu ý, vì đây là một mô-đun gốc, có thể có các vấn đề tương thích khác nhau trên hệ điều hành và môi trường xây dựng. Trong trường hợp đó, vui lòng chạy npm uninstall -D fibersđể khắc phục sự cố.

? 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

EDIT 2020/01: Vue CLI 4.2.2 tạo dự án mới vẫn được đề xuất dart-sasslà tùy chọn đầu tiên trước đây node-sass. Tuy nhiên, nó đã được thiết lập ở đây node-sasslà sự lựa chọn hiệu quả hơn, và hầu như không ai sử dụng dart-sass (nhận xét của ccleve).

CHỈNH SỬA 2020/09: Khi Ali Bahrami cập nhật câu trả lời mở rộng của mình, dart-sasslà lựa chọn ưu tiên vì node-sassđang được đánh dấu là không được dùng nữa .

Quá tệ dart-sasslà một phiên bản do JS biên dịch có hiệu suất kém. Tuy nhiên, các nhà phát triển của nó đã nhận thức rõ điều này và đang làm việc để đạt được hiệu suất cao hơn như đã nêu trong vấn đề này .

Cập nhật 17/09/2020 :

Vì câu trả lời này nhận được nhiều phiếu bầu mỗi ngày, tôi nghĩ có lẽ nên đi sâu hơn vào chủ đề này.

Xem xét trang web sass-lang :

Dart Sass là triển khai chính của Sass, có nghĩa là nó có các tính năng mới trước bất kỳ triển khai nào khác. Nó nhanh chóng, dễ cài đặt và nó biên dịch sang JavaScript thuần túy , giúp dễ dàng tích hợp vào quy trình phát triển web hiện đại.

Dart-Sass nhanh, nhưng không phải là phiên bản được biên dịch JS . Thực tế khi chúng ta nói Dart-Sass, có hai lựa chọn:

• Dart-Sass trên Dart-VM
• Dart-Sass trên NPM là phiên bản biên dịch JS thuần túy

Tôi đã biên dịch tệp Bootstrap 4 Sass sang CSS với Node-Sass, Dart-Sass và Dart-Sass (JS) và bạn có thể thấy kết quả sau:

• Trong trường hợp cụ thể này, hai giây không phải là vấn đề lớn; nhưng hãy coi Dart-Sass (JS) chậm hơn Dart-Sass (Dart VM) chín lần và chậm hơn ba lần so với node-sass.
• Tôi đã có một dự án với +20 chủ đề, mất 30 giây với node-sass, nhưng tôi đã cố gắng sử dụng Dart-Sass (JS), và phải mất một thế kỷ!
• Mặc dù Dart-Sass (Dart VM) là nhanh nhất nhưng việc cài đặt hoặc tích hợp nó hơi phức tạp.
• Và Node-Sass được coi là không được dùng nữa .

Tôi đã viết blog về nó ở đây, bạn có thể đọc thêm về nó ở đây.

node-sass có thể nhanh hơn dart-sass, nhưng khi viết dart-sass này là thư viện duy nhất thực hiện @usequy tắc, được khuyến khích sử dụng @import. Theo trang web sass-lang chính thức :

Điều gì sai với @import? Các @importquy tắc có một số vấn đề nghiêm trọng:

• @importlàm cho tất cả các biến, mixin và các hàm có thể truy cập được trên toàn cầu. Điều này làm cho mọi người (hoặc công cụ) rất khó để biết nơi nào bất kỳ thứ gì được xác định.

• Bởi vì mọi thứ là toàn cầu, các thư viện phải đặt tiền tố cho tất cả các thành viên của họ để tránh xung đột tên.

• @extend các quy tắc cũng mang tính toàn cầu, điều này gây khó khăn cho việc dự đoán quy tắc kiểu nào sẽ được mở rộng.

• Mỗi biểu định kiểu được thực thi và CSS của nó được phát ra mỗi khi được chỉnh sửa @import, điều này làm tăng thời gian biên dịch và tạo ra đầu ra cồng kềnh.

• Không có cách nào để xác định các thành viên riêng tư hoặc bộ chọn trình giữ chỗ không thể truy cập được vào các bảng định kiểu xuống dòng.

Hệ thống mô-đun mới và @usequy tắc giải quyết tất cả những vấn đề này.

Ngoài ra, @importsẽ bị loại bỏ dần dần trong vài năm tới và cuối cùng sẽ bị loại bỏ hoàn toàn khỏi ngôn ngữ này.

Để luôn cập nhật các phương pháp hay nhất trong Sass, bạn nên sử dụng dart-sass (tức là sass ) ngay bây giờ.