1

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: enter image description here

React 45kb: enter image description here

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.

mmz
  • 1,011
  • 1
  • 8
  • 21
  • Looks pretty good to me! your bundle.fc417.js is only 7.11kb – Benjamin Mar 05 '21 at 00:31
  • @Benjamin could you clarify? In that case, I don't understand why there's the repetition of 'preact-router' in the other bundles. And in that case, shouldn't the entire app be ~7kb? (again, I'm using the simplest implementation possible). Perhaps I'm not understanding the code splitting... – mmz Mar 05 '21 at 01:50
  • I'm not sure which bundler you are using (webpack or rollup?) but in your React screenshot, you've only created one bundle. But in the Preact screenshot, you've created two. One using ESM modules, and the other I assume is commonjs. Notice how each filename is repeated twice? But the file that contains your code, is named bundle. The other files are added by the bundler: polyfill, sw, etc. So you can compare the size of bundle to the size of your react version. – Benjamin Mar 05 '21 at 17:15

1 Answers1

2

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.

rschristian
  • 1,730
  • 1
  • 6
  • 15