sass-embedded:高性能版的 Sass

早年的 node-sass 是用 c/c++ 实现的,现在已经不再维护了。

sass 和 sass-embedded 是不同的软件包,虽然用法和发行版本都是一样的,但本质的区别是,sass 是 Dart Sass 的纯 javascript 实现版本 ,而 sass-embedded 是 Dart 原生实现,外层暴露了 javascript 接口。

因为有不同的实现,而且包的名字有很大的区别,sass 包的名字更直接,占尽优势,所以很多人都是直接安装 Sass 这个包,像 element-plus 用的也是 sass,但它们真的不一样。

对比

下面从几个维度来看看这两者的区别:

特性 sass sass-embedded
编译引擎 dart sass javascript
编译速度 较慢 较快
启动时间 稍慢 快
包体积 2.8MB 18-22MB
内存占用 80-120MB 40-70MB
安装耗时 2-5 秒 5-10 秒
周下载量 18,967,153 2,896,642
版本 同步发布 同步发布

我们用两者分别来编译 element-plus 的 scss 文件来看看对比:

js 复制代码
const fs = require('fs')
const sass = require('sass')
const saasEmbedded = require('sass-embedded')

console.time('sass')
const result = sass.compile('./packages/theme-chalk/src/index.scss')
fs.writeFileSync('./element-plus.css', result.css)
console.timeEnd('sass')

console.time('sass-embedded')
const result1 = saasEmbedded.compile('./packages/theme-chalk/src/index.scss')
fs.writeFileSync('./element-plus1.css', result1.css)
console.timeEnd('sass-embedded')

编译结果:

三次对比中 sass-embedded 分别约比 sass 快 3.39 倍、3.31 倍、2.78 倍;sass-embedded 平均比 sass 快约 3.16 倍。

测试机器为 Mac Mini M4;node版本:v22.14.0

优先推荐大家使用 sass-embedded。

如何使用?

lua 复制代码
pnpm install sass-embedded

直接安装,使用方式和原来的 sass 一样,无任何改变。

相关推荐
风骏时光牛马9 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端
IT_陈寒10 小时前
JavaScript的this坑人实录,这次我真的记下来了
前端·人工智能·后端
开开心心就好11 小时前
音频降噪剪辑工具,音量裁剪一键处理
运维·服务器·前端·spring·ocr·音视频·1024程序员节
PedroQue9912 小时前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
淡漠的蓝精灵12 小时前
web.py:一个简单到极致的 Python Web 框架
开发语言·前端·python·其他
开开心心就好13 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
起个名字费劲死了13 小时前
Halcon学习一:骰子识别
前端·python·学习
大江东去浪淘尽千古风流人物13 小时前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
其实防守也摸鱼13 小时前
Chrome 扩展安全攻防实录:从攻击面到防御实践
开发语言·前端·网络·chrome·安全·web安全·php
web打印社区13 小时前
Lodop排障总纲-常见报错一张表
开发语言·前端·javascript·chrome·websocket