React ❤ Preact
Love React? Don’t change! Just do what you did and ‘alias’ React as Preact to get smaller and 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.
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.
1 test shouldn’t be enough, so here we go another repaint test
Preact : 139kb
React : 245 kb
I’ll let the results said itself, see below for source :)
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
Just add this to your existing webpack config.
Then add npm package like usual.
$ npm i -S preact@beta
$ npm i -S preact-compat
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