andrewmcodes / bridgetown-esbuild-minifysyntax

Benchmarking usage of minifySyntax with esbuild and Bridgetown

minifySyntax Experiments

No JavaScript

First I want to get a baseline and then see what the difference is on a clean site.

bridgetown new bt-esbuild-minifysyntax -t erb

Fresh 1.1.0

Environment	JS Size	CSS Size	User Time	System Time
Development	153B	4.25KB	0.49s	0.13s
Production	113B	3.03KB	0.71s	0.20s

Fresh minifySyntax

Environment	JS Size	CSS Size	User Time	System Time
Development	153B	3.86KB	0.48s	0.13s
Production	113B	3.03KB	0.71s	0.18s

So not much of a change for the JS size, though it did reduce the CSS size a bit.

Add JavaScript

Now let's run a bunch of configurators and see what happens when there is actual JS to be minified.

bridgetown configure turbo
bridgetown configure stimulus
bridgetown configure lit
bridgetown configure shoelace

With JS

Environment	JS Size	CSS Size	User Time	System Time
Development	285.52KB	23.15KB	0.71s	0.16s
Production	173.9KB	20.26KB	1.19s	0.85s

With JS and minifySyntax

Environment	JS Size	CSS Size	User Time	System Time
Development	266KB	22.47KB	0.70s	0.16s
Production	173.9KB	20.36KB	1.16s	0.82s

Not a major difference in size but still a reduction in JS and CSS size. Over time though this adds up!

Summary

The results show that while the difference in JS size is not significant, the CSS size is reduced slightly in both cases. When there is actual JS to be minified, the difference in size is still not major but significant over time.

However, this was done before esbuild v0.17.0 was released which had a lot of breaking changes that I haven't investigated fully so this may no longer apply. Regardless, it appears to help but not significantly under these circumstances and in my own personal site.