vue.js - Vue CLI CSS 预处理器选项:dart-sass VS node-sass?
问题描述
使用 CLI (v3.7.0) 创建新项目时,可以选择编译器dart-sass
或node-sass
编译器。
这些如何相互比较,比Vue 文档中声明的更具体?
关于 Sass 性能的提示
请注意,使用 Dart Sass 时,由于异步回调的开销,默认情况下同步编译的速度是异步编译的两倍。为了避免这种开销,您可以使用 fiber 包从同步代码路径调用异步导入器。要启用此功能,只需将纤程安装为项目依赖项:
npm install -D fibers
另请注意,由于它是本机模块,因此可能存在兼容性问题,因操作系统和构建环境而异。在这种情况下,请运行
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
是性能更高的选择,几乎没有人使用 dart-sass(ccleve 的评论)。
编辑 2020/09:随着 Ali Bahrami 更新他的广泛答案,dart-sass
是首选,因为node-sass
被标记为 deprecated。
太糟糕dart-sass
了,它是一个 JS 编译的版本,性能很差。但是,它的开发人员很清楚这一点,并正在努力实现更高的性能,如本期所述。
解决方案
2020 年 9 月 17 日更新:
随着这个答案每天都在投票,我认为也许值得深入探讨这个话题。
考虑sass-lang 网站:
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,您可以看到以下结果:
- 在这种特殊情况下,两秒钟没什么大不了的。但考虑一下 Dart-Sass(JS) 比 Dart-Sass(Dart VM) 慢 9 倍,比 node-sass 慢 3 倍。
- 我有一个 +20 个主题的项目,使用 node-sass 花了 30 秒,但我尝试使用 Dart-Sass(JS),花了一个世纪!
- 虽然 Dart-Sass(Dart VM) 是最快的,但安装或集成它有点棘手。
- 并且 Node-Sass被认为是 deprecated。
我在这里写了博客,你可以在这里阅读更多关于它的信息。
推荐阅读
- java - 如何将小 ORC 文件合并或合并为更大的 ORC 文件?
- logging - 将日志文件输出到集群选项
- html - Why does my footer have elements under it?
- c - AES decryption without padding in crypt file
- python - 使用带有多个参数的函数与`map`
- chart.js - chart.js - 将企业设计添加到图表
- hadoop - 将数据从 Apache Hadoop 迁移到 Cloudera Hadoop
- javascript - 使用 JQuery 设置新大小不起作用
- git - 如何在旧版本的 abc 文件中提交我的更改,而 git 具有相同的 abc 文件以及其他开发人员的新更改?
- python - 如何修复此 AttributeError?