search

glromeo / esbuild-sass-plugin

esbuild plugin for sass
MIT License
153 stars 41 forks source link

Use `dart-sass` instead of `sass` #160

Closed Twixes closed 8 months ago

Twixes commented 8 months ago

Hey! This plugin is great. I was doing some build profiling recently though, and looks like there's a lot of time spent in the sass package. It's originally written in Dart, but compiled to JS, so not particularly performant. However, this same library is also available in a Dart VM-powered version: dart-sass. According to their repo, the latter is between 2 and 25 times faster than the all-JS version currently used by esbuild-sass-plugin: https://github.com/sass/dart-sass/blob/main/perf.md.

One downside I know of is that custom functions become difficult because of communication between Dart and JS being limited. But that can be an explicit trade-off of speed.

So, what do you think about dart-sass being an optional backend?

glromeo commented 8 months ago

This road has already been explored and abandoned for the integration complexity results in worse performance when there are many small scss imports.... there's a fork of this plugin that went the opposite direction and uses dart-sass. Dig in the issues history if you want to know more ;)

Twixes commented 8 months ago

Oh, I see, I was searching for dart-sass and missed that embedded means just that. Thanks!

NathanBeddoeWebDev commented 8 months ago

@glromeo just a heads up, https://github.com/sass/dart-sass/releases/tag/1.70.0 has been released (literally today), and now there's a new API to run sass-embedded under a single dart.exe instead of creating a new one for each file. Does this solve for the issue you were seeing?

NathanBeddoeWebDev commented 7 months ago

@glromeo Sorry, just butting into this one again. With my fork https://github.com/NathanBeddoeWebDev/esbuild-sass-embedded-plugin, having changed to sass-embedded and using their async compiler, I was able to improve our build time of 80-100 scss files -> 80-100 css files by about half (~16s to ~8s).

I believe 1.70.0 has solved the initial issues with sass-embedded.

glromeo commented 7 months ago

no worries ;) I appreciate the enthusiasm ...I'll have a look at the possibility of merging your changes have you run the included benchmarks by any chance?

NathanBeddoeWebDev commented 7 months ago

image So this is on Windows on my work laptop (so antivirus packed lol) I did one with a powershell script calculating the average over 5 runs, and then one just through yarn build in the benchmark fixture.

Note, that in the embedded fixture, this still had the overhead of running up 5 dart.exes, because the yarn builds were completely different processes. That's likely why the 5x ps1 was less proportionately efficient than the single run.