Vue CLI CSS 预处理器选择：dart-sass vs node-sass，谁更适合你？

Vue CLI 中 CSS 预处理器选择：dart-sass vs node-sass

概览

在使用 Vue CLI 创建项目时，开发人员可以选择 dart-sass 或 node-sass 编译器。虽然 Vue 文档建议使用 dart-sass，但性能方面存在一些差异需要考虑。

dart-sass vs node-sass

优点

• dart-sass 是 Sass 的官方实现： 它由 Sass 核心团队维护，确保与规范的兼容性。
• 异步编译： dart-sass 可以在多个线程上并发编译，从而提高某些场景下的性能。

缺点

• 性能问题： 与 node-sass 相比，dart-sass 的 JavaScript 实现性能较差，尤其是对于大型项目。

优点

• 更高的性能： node-sass 采用 C++ 编写，使其比 dart-sass 的 JavaScript 实现更快。
• 广泛使用： node-sass 是 Vue 社区中广泛使用的编译器，拥有大量的文档和支持。

缺点

• 弃用： node-sass 已被标记为弃用，这可能会在未来导致支持问题。
• 异步编译： node-sass 使用同步编译，这可能会在某些情况下导致性能瓶颈。

建议

总体而言，dart-sass 在以下情况下更可取：

• 小型项目或项目对性能要求不高
• 需要对 Sass 规范有严格的兼容性

node-sass 在以下情况下更可取：

• 大型项目或性能至关重要
• 无需严格遵守 Sass 规范

常见问题解答

1. 为什么 Vue 文档建议使用 dart-sass？

在 Vue CLI 4.2.2 创建的新项目中，dart-sass 被推荐为 node-sass 之前的第一个选项。然而，由于 node-sass 的性能优势，这种情况已发生变化。

2. 我应该在现有项目中切换到 node-sass 吗？

如果你遇到与性能相关的问题，切换到 node-sass 可能是一个值得考虑的选择。但是，请注意，进行此切换需要进行一些代码更改。

3. dart-sass 的性能问题会在未来得到解决吗？

dart-sass 团队已了解其性能问题，正在努力改善它。但是，目前尚不清楚这些改进的具体时间表。

4. 弃用 node-sass 会产生什么影响？

弃用 node-sass 意味着它不再接受重大更新或功能添加。然而，它应该继续在可预见的未来获得安全补丁和错误修复。

5. 我如何衡量 dart-sass 和 node-sass 之间的性能差异？

你可以通过在不同规模的项目上运行基准测试来衡量两者的性能差异。使用性能分析工具（例如 Webpack Bundle Analyzer）也可以帮助你识别性能瓶颈。