ChatGPT解决这个技术问题 Extra ChatGPT

Vue CLI CSS 预处理器选项:dart-sass VS node-sass?

使用 CLI (v3.7.0) 创建新项目时,可以选择 dart-sassnode-sass 编译器。

它们如何相互比较,比 Vue docs 中声明的更具体?

Sass 性能提示 请注意,使用 Dart Sass 时,由于异步回调的开销,默认情况下同步编译的速度是异步编译的两倍。为了避免这种开销,您可以使用 fiber 包从同步代码路径调用异步导入器。要启用此功能,只需将纤程安装为项目依赖项: npm install -D fiber 请注意,由于它是本机模块,可能存在兼容性问题,因操作系统和构建环境而异。在这种情况下,请运行 npm uninstall -D fiber 来解决问题。

? 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 create new project 仍然建议将 dart-sass 作为 node-sass 之前的第一个选项。然而,这里已经确定 node-sass 是性能更高的选择,而 almost nobody uses dart-sass(ccleve 的评论)。

编辑 2020/09: 随着 Ali Bahrami 更新他的广泛答案,dart-sass 是首选,因为 node-sass 被标记为已弃用 .

太糟糕了dart-sass,它是一个 JS 编译的版本,性能很差。但是,它的开发人员很清楚这一点,并正在努力提高性能,如 this issue 中所述。

截至 2020 年 2 月,似乎没有人在使用 dart-sass:npmtrends.com/dart-sass-vs-node-sass。 node 每周下载 350 万次,dart 下载 16,000 次。
@ccleve 这是因为 dart-sass 使用最频繁的发行版是 sass 包,截至 2020 年 5 月,该包目前每周有 200 万次下载。npmtrends.com/sass-vs-node-sass
我很好奇为什么 npm 上有两个 dart-sass 实现。 sass 当前是最新版本,为 v 1.26.5,而 dart-sass 为 1.25。不管 node-sass 仍然使这两个组合相形见绌:npmtrends.com/sass-vs-node-sass-vs-dart-sass
只是一点点更新,截至 2021 年 7 月,sass 已经超越了 node-sass!

A
Ali Bahrami

2020 年 9 月 17 日更新:

随着这个答案每天都在投票,我认为也许值得深入探讨这个话题。

考虑 sass-lang website

Dart Sass 是 Sass 的主要实现,这意味着它在任何其他实现之前获得了新功能。它快速、易于安装,并且可以编译为纯 JavaScript,从而可以轻松集成到现代 Web 开发工作流程中。

Dart-Sass 速度很快,但不是 JS 编译的版本。实际上,当我们说 Dart-Sass 时,有两种选择:

Dart-VM 上的 Dart-Sass

NPM 上的 Dart-Sass 是纯 JS 编译版本

我使用 Node-Sass、Dart-Sass 和 Dart-Sass(JS) 将 Bootstrap 4 Sass 文件编译为 CSS,您可以看到以下结果:

https://i.stack.imgur.com/RzIiL.png

在这种特殊情况下,两秒钟没什么大不了的。但考虑一下 Dart-Sass(JS) 比 Dart-Sass(Dart VM) 慢 9 倍,比 node-sass 慢 3 倍。

我有一个 +20 个主题的项目,使用 node-sass 花了 30 秒,但我尝试使用 Dart-Sass(JS),花了一个世纪!

虽然 Dart-Sass(Dart VM) 是最快的,但安装或集成它有点棘手。

并且 Node-Sass 被认为已弃用。

我在此处blogged了解它,您可以在此处阅读有关它的更多信息。


在最后一行,您的意思是 dart-sass 更快吗?
Dart-Sass on Dart-VM 和 Dart-Sass NPM 有什么区别?
@AnandShiva 它们是相同的,其中一个是用 dart lang 编写的,它在 dart 运行时运行,但 dart sass npm 被编译为 javascript。
E
Earth_Believer

24/01/2021

正如官方 node-sass github doc 中所写,node-sass 已弃用

警告:不推荐使用 LibSass 和 Node Sass。虽然他们将继续无限期地接收维护版本,但没有计划添加额外的功能或与任何新的 CSS 或 Sass 功能兼容。仍在使用它的项目应该转移到 Dart Sass。

所以我想如果你计划长期或保持最新状态,选择 dart sass 会更好。


r
rasnauf

node-sass 可能比 dart-sass 快,但在编写此 dart-sass 时,它是唯一实现 @use 规则的库,强烈推荐在 @import 之上。根据官方sass-lang website

@import 有什么问题? @import 规则有许多严重的问题:@import 使所有变量、mixin 和函数都可以全局访问。这使得人们(或工具)很难分辨出任何东西是在哪里定义的。因为一切都是全局的,所以库必须为其所有成员添加前缀以避免命名冲突。 @extend 规则也是全局的,这使得很难预测哪些样式规则将被扩展。每次@imported 时都会执行每个样式表并发出其 CSS,这会增加编译时间并产生臃肿的输出。无法定义下游样式表无法访问的私有成员或占位符选择器。新的模块系统和@use 规则解决了所有这些问题。

此外,@import 将在未来几年内变为 gradually phased out,并最终从语言中完全删除。

为了及时了解 Sass 中的最佳实践,您现在应该使用 dart-sass(即 sass)。


非常有趣的@rasnauf,非常感谢您指出这一点!对于一些正在导入大型库的 .scss 文件的项目,即使对 .scss 文件进行微小的更改并且不得不等待所有文件都被重建……对于我所读到的关于 {1在这一点上,这似乎可以在进行开发时通过增量构建显着缩短重建时间:)

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅