Skip to content

Conversation

@43081j
Copy link
Contributor

@43081j 43081j commented Jun 25, 2025

this reduces the bundle size a little (few hundred bytes i think)

do we have a bot or a tool to diff the sizes?

43081j added 2 commits June 25, 2025 13:02
To avoid duplicating logic, we can use `createElement` with
pre-populated props.
@github-actions
Copy link

github-actions bot commented Jun 25, 2025

📊 Tachometer Benchmark Results

Summary

⏳ Benchmarks are currently running. Results below are out of date.

duration

  • create10k: unsure 🔍 -0% - +0% (-3.13ms - +4.16ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -0% - +0% (-0.02ms - +0.04ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -3% - +1% (-2.10ms - +0.88ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -2% - +2% (-0.30ms - +0.39ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -1% - +2% (-0.81ms - +1.23ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -5% - +4% (-0.10ms - +0.07ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -0% - +1% (-0.15ms - +0.24ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -4% - +4% (-1.20ms - +1.18ms)
    preact-local vs preact-main

usedJSHeapSize

  • create10k: unsure 🔍 -0% - -0% (-0.00ms - -0.00ms)
    preact-local vs preact-main
  • filter-list: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • hydrate1k: unsure 🔍 -7% - +5% (-0.42ms - +0.28ms)
    preact-local vs preact-main
  • many-updates: unsure 🔍 -0% - +0% (-0.01ms - +0.00ms)
    preact-local vs preact-main
  • replace1k: unsure 🔍 -1% - +0% (-0.02ms - +0.00ms)
    preact-local vs preact-main
  • text-update: unsure 🔍 -4% - +1% (-0.04ms - +0.01ms)
    preact-local vs preact-main
  • todo: unsure 🔍 -0% - +0% (-0.00ms - +0.00ms)
    preact-local vs preact-main
  • update10th1k: unsure 🔍 -0% - +0% (-0.01ms - +0.01ms)
    preact-local vs preact-main

Results

⏳ Benchmarks are currently running. Results below are out of date.
create10k

duration

VersionAvg timevs preact-localvs preact-main
preact-local991.72ms - 997.37ms-unsure 🔍
-0% - +0%
-3.13ms - +4.16ms
preact-main991.72ms - 996.33msunsure 🔍
-0% - +0%
-4.16ms - +3.13ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local19.19ms - 19.19ms-unsure 🔍
-0% - -0%
-0.00ms - -0.00ms
preact-main19.19ms - 19.19msunsure 🔍
+0% - +0%
+0.00ms - +0.00ms
-
filter-list

duration

VersionAvg timevs preact-localvs preact-main
preact-local16.48ms - 16.53ms-unsure 🔍
-0% - +0%
-0.02ms - +0.04ms
preact-main16.47ms - 16.52msunsure 🔍
-0% - +0%
-0.04ms - +0.02ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.54ms - 1.54ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main1.54ms - 1.54msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
hydrate1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local69.56ms - 71.58ms-unsure 🔍
-3% - +1%
-2.10ms - +0.88ms
preact-main70.08ms - 72.28msunsure 🔍
-1% - +3%
-0.88ms - +2.10ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local5.56ms - 6.08ms-unsure 🔍
-7% - +5%
-0.42ms - +0.28ms
preact-main5.66ms - 6.13msunsure 🔍
-5% - +7%
-0.28ms - +0.42ms
-
many-updates

duration

VersionAvg timevs preact-localvs preact-main
preact-local15.97ms - 16.49ms-unsure 🔍
-2% - +2%
-0.30ms - +0.39ms
preact-main15.97ms - 16.41msunsure 🔍
-2% - +2%
-0.39ms - +0.30ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local3.78ms - 3.78ms-unsure 🔍
-0% - +0%
-0.01ms - +0.00ms
preact-main3.78ms - 3.78msunsure 🔍
-0% - +0%
-0.00ms - +0.01ms
-
replace1k
  • Browser: chrome-headless
  • Sample size: 100
  • Built by: CI #4838
  • Commit: c2a4372

duration

VersionAvg timevs preact-localvs preact-main
preact-local64.81ms - 66.33ms-unsure 🔍
-1% - +2%
-0.81ms - +1.23ms
preact-main64.68ms - 66.05msunsure 🔍
-2% - +1%
-1.23ms - +0.81ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local2.99ms - 2.99ms-unsure 🔍
-1% - +0%
-0.02ms - +0.00ms
preact-main2.99ms - 3.00msunsure 🔍
-0% - +1%
-0.00ms - +0.02ms
-

run-warmup-0

VersionAvg timevs preact-localvs preact-main
preact-local25.91ms - 26.60ms-unsure 🔍
-1% - +2%
-0.38ms - +0.57ms
preact-main25.83ms - 26.49msunsure 🔍
-2% - +1%
-0.57ms - +0.38ms
-

run-warmup-1

VersionAvg timevs preact-localvs preact-main
preact-local32.59ms - 34.02ms-unsure 🔍
-4% - +2%
-1.47ms - +0.56ms
preact-main33.04ms - 34.48msunsure 🔍
-2% - +4%
-0.56ms - +1.47ms
-

run-warmup-2

VersionAvg timevs preact-localvs preact-main
preact-local29.79ms - 30.81ms-unsure 🔍
-1% - +3%
-0.36ms - +1.02ms
preact-main29.51ms - 30.43msunsure 🔍
-3% - +1%
-1.02ms - +0.36ms
-

run-warmup-3

VersionAvg timevs preact-localvs preact-main
preact-local26.86ms - 28.08ms-unsure 🔍
-2% - +4%
-0.55ms - +1.06ms
preact-main26.69ms - 27.74msunsure 🔍
-4% - +2%
-1.06ms - +0.55ms
-

run-warmup-4

VersionAvg timevs preact-localvs preact-main
preact-local22.94ms - 24.02ms-unsure 🔍
-2% - +5%
-0.50ms - +1.14ms
preact-main22.54ms - 23.78msunsure 🔍
-5% - +2%
-1.14ms - +0.50ms
-

run-final

VersionAvg timevs preact-localvs preact-main
preact-local21.39ms - 22.24ms-unsure 🔍
-2% - +3%
-0.44ms - +0.73ms
preact-main21.28ms - 22.08msunsure 🔍
-3% - +2%
-0.73ms - +0.44ms
-
text-update
  • Browser: chrome-headless
  • Sample size: 130
  • Built by: CI #4838
  • Commit: c2a4372

duration

VersionAvg timevs preact-localvs preact-main
preact-local2.01ms - 2.14ms-unsure 🔍
-5% - +4%
-0.10ms - +0.07ms
preact-main2.03ms - 2.14msunsure 🔍
-4% - +5%
-0.07ms - +0.10ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local0.97ms - 1.00ms-unsure 🔍
-4% - +1%
-0.04ms - +0.01ms
preact-main0.98ms - 1.02msunsure 🔍
-1% - +4%
-0.01ms - +0.04ms
-
todo

duration

VersionAvg timevs preact-localvs preact-main
preact-local32.00ms - 32.28ms-unsure 🔍
-0% - +1%
-0.15ms - +0.24ms
preact-main31.96ms - 32.23msunsure 🔍
-1% - +0%
-0.24ms - +0.15ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local1.24ms - 1.24ms-unsure 🔍
-0% - +0%
-0.00ms - +0.00ms
preact-main1.24ms - 1.25msunsure 🔍
-0% - +0%
-0.00ms - +0.00ms
-
update10th1k

duration

VersionAvg timevs preact-localvs preact-main
preact-local31.77ms - 33.36ms-unsure 🔍
-4% - +4%
-1.20ms - +1.18ms
preact-main31.70ms - 33.45msunsure 🔍
-4% - +4%
-1.18ms - +1.20ms
-

usedJSHeapSize

VersionAvg timevs preact-localvs preact-main
preact-local2.94ms - 2.95ms-unsure 🔍
-0% - +0%
-0.01ms - +0.01ms
preact-main2.94ms - 2.95msunsure 🔍
-0% - +0%
-0.01ms - +0.01ms
-

tachometer-reporter-action v2 for CI

@coveralls
Copy link

coveralls commented Jun 25, 2025

Coverage Status

coverage: 94.727%. remained the same
when pulling a58faaf on 43081j:making-things-smaller
into 3b679af on preactjs:main.

@JoviDeCroock
Copy link
Member

JoviDeCroock commented Jun 25, 2025

This increases byte size as you can see in https://github.com/preactjs/preact/actions/runs/15876304094/job/44764641936?pr=4814 the bot sadly can't post messages for forks 😅 The action can be clicked and inspected though (compressed size)

@43081j
Copy link
Contributor Author

43081j commented Jun 25, 2025

I'll look into it as it's smaller in the bundle locally 🤔 so must be minification differences somehow

@43081j
Copy link
Contributor Author

43081j commented Jun 25, 2025

its actually the cloneElement change i think, because it was literally the same duplicated code before, it'd compress better!

but the actual JS build output is smaller 😬

@43081j
Copy link
Contributor Author

43081j commented Jun 25, 2025

@JoviDeCroock what i mean is the files on disk are smaller, and the logic should be faster (but micro optimisation i guess)

the compressed files are larger. presumably because cloneElement was a duplicate of createElement before. so it meant it compressed well but was bad for maintenance

ill see if there's any way i can reduce it

@JoviDeCroock
Copy link
Member

JoviDeCroock commented Jun 25, 2025

I reckon that reverting the cloneElement part is what fits our philosophy most, we want to reduce size of these utils as much as possible. We don't really care about the disk size, we are optimising for compressed size. A util that isn't used often should be as small as possible, a micro-optimisation in something like child reconciliation is much preferred

@43081j
Copy link
Contributor Author

43081j commented Jun 25, 2025

Filename Size Change
dist/preact.js 4.63 kB -13 B (-0.28%)
dist/preact.mjs 4.64 kB -19 B (-0.41%)
dist/preact.umd.js 4.71 kB -15 B (-0.32%)

Copy link
Member

@JoviDeCroock JoviDeCroock left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really clever, it basically flattens the loop

@JoviDeCroock JoviDeCroock merged commit 6ab3132 into preactjs:main Jun 25, 2025
13 checks passed
@43081j 43081j deleted the making-things-smaller branch June 25, 2025 16:47
JoviDeCroock added a commit that referenced this pull request Jun 28, 2025
* perf: use createElement when cloning

To avoid duplicating logic, we can use `createElement` with
pre-populated props.

* chore: reduce search logic

* perf: reuse matched flag

* chore: put the function inline again

* perf: simplify to a ternary

* perf: revert clone function

---------

Co-authored-by: Jovi De Croock <[email protected]>
JoviDeCroock added a commit that referenced this pull request Jun 28, 2025
* perf: use createElement when cloning

To avoid duplicating logic, we can use `createElement` with
pre-populated props.

* chore: reduce search logic

* perf: reuse matched flag

* chore: put the function inline again

* perf: simplify to a ternary

* perf: revert clone function

---------

Co-authored-by: James Garbutt <[email protected]>
@JoviDeCroock JoviDeCroock mentioned this pull request Jul 28, 2025
@JoviDeCroock JoviDeCroock mentioned this pull request Aug 19, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants