React ❤ Preact

Love React? Don’t change! Just do what you did and ‘alias’ React as Preact to get smaller and faster!

Faster?

Yeah I know some clever dude said this result is not accurate due to async process can mess the results already. In that case I suggest you to see with your own eyes instead because user will judge from what they saw, they just don’t care which framework you use and/or it’s async or not.

Demo : https://rabbots.github.io/todomvc-perf
Source : https://github.com/rabbots/todomvc-perf

You can get vary results there, I’m bias enough to capture when Preact get best results there. And also order of the test is somehow affect the results so do try checked only 2 or 3 samples there and you should get more accurate results.

Even Faster

1 test shouldn’t be enough, so here we go another repaint test

Demo : http://mathieuancelin.github.io/js-repaint-perfs/
Source : https://github.com/rabbots/js-repaint-perfs

Smaller

Preact vs React bundled file size

Preact : 139kb
React : 245 kb

I’ll let the results said itself, see below for source :)

Source : https://github.com/katopz/redux-undo/tree/preact-compat/examples/todos-with-undo

Pro tips : You case use https://github.com/robertknight/webpack-bundle-size-analyzer for sneak in detail.
$ webpack --json | webpack-bundle-size-analyzer
core-js: 198.71 KB (46.5%)
html-entities: 57.38 KB (13.4%)
preact: 25.11 KB (5.88%)
redux: 22.02 KB (5.15%)
babel-regenerator-runtime: 20.95 KB (4.90%)
react-redux: 19.37 KB (4.53%)
redux-undo: 16 KB (3.74%)
proptypes: 11.17 KB (2.62%)
webpack-hot-middleware: 9.56 KB (2.24%)
preact-compat: 9.19 KB (2.15%)
preact-svg: 5.71 KB (1.34%)
timers-browserify: 4.81 KB (1.13%)
process: 2.76 KB (57.3%)
<self>: 2.06 KB (42.7%)
ansi-html: 3.92 KB (0.918%)
lodash: 3.34 KB (0.782%)
webpack: 3 KB (0.703%)
process: 2.76 KB (91.8%)
<self>: 251 B (8.17%)
invariant: 1.48 KB (0.347%)
hoist-non-react-statics: 1.03 KB (0.241%)
babel-polyfill: 1001 B (0.229%)
symbol-observable: 451 B (0.103%)
strip-ansi: 161 B (0.0368%)
ansi-regex: 135 B (0.0309%)
<self>: 12.73 KB (2.98%)

Or print to file for later use.

echo "$(webpack --json | webpack-bundle-size-analyzer)" >> size.log

Simple

Just add this to your existing webpack config.

resolve: {
alias: {
'react': 'preact-compat',
'react-dom': 'preact-compat'
}
}

Then add npm package like usual.

$ npm i -S preact@beta
$ npm i -S preact-compat

Source : webpack.config.js, package.json

And that is! You can see the different here

Hint : You can see other different there, no worry! it’s just an extra trick to reduce file size.

And it’s just beginning, Just so you know those file size can be smaller (and maybe faster?) if you use pure Preact instead of alias” it from React ;)

And if you hungry for more try explore more here

Happy Preact!

Like what you read? Give katopz a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.