I'm thinking of transitioning my project to Preact to slim down my bundle size. I wanted to see whether Preact indeed created a smaller bundle. After comparison, though, the differences were smaller than I expected.
Preact, 39kb:
React 45kb:
Am I doing something wrong in my implementation?
I analyzed the Preact bundle using preact build --analyze and used webpack-bundle-analyzer for the React app.
Just as Benjamin stated, Preact-CLI doesn't just output your bundle, but a number of items.
Firstly, it by default outputs both CJS and ESM. ESM is better and newer browsers will use it while older fallback to CJS. This essentially is an automatic duplication of your bundle size (10kb x2 = 20kb total). This is a good thing though, and only 1 will be sent to your users.
In addition, we automatically provide any polyfills your users may need. Again, these are only shipped to the browsers that need them. If someone loads up your site in IE they'll get the polyfills that allow that to work. Modern Chrome wouldn't even request it.
There's also your service worker in there. Minimal, but is included.
These items all add up to be less than your single React bundle. If you want, disable all the extras in the left-hand pane to better compare. Hopefully that's more inline with your expectations.