Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andrewmcodes/bridgetown-esbuild-minifysyntax

Benchmarking usage of minifySyntax with esbuild and Bridgetown
https://github.com/andrewmcodes/bridgetown-esbuild-minifysyntax

andrewmcodes demo experiment

Last synced: 17 days ago
JSON representation

Benchmarking usage of minifySyntax with esbuild and Bridgetown

Host: GitHub
URL: https://github.com/andrewmcodes/bridgetown-esbuild-minifysyntax
Owner: andrewmcodes
Created: 2022-08-24T02:41:09.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2023-03-02T06:43:55.000Z (over 1 year ago)
Last Synced: 2024-10-21T22:14:26.838Z (26 days ago)
Topics: andrewmcodes, demo, experiment
Language: JavaScript
Homepage:
Size: 45.9 KB
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        [![Project Status: Abandoned – Initial development has started, but there has not yet been a stable, usable release; the project has been abandoned and the author(s) do not intend on continuing development.](https://www.repostatus.org/badges/latest/abandoned.svg)](https://www.repostatus.org/#abandoned)

# `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.

```sh

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](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0170) 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.