So this is a React work, why the 💩 are we talking about Preact? Let me tell you why! Preact is amazing! Preact is an almost drop in replacement for React that is much smaller in file size while maintaing nearly all the features and actually being faster (or so my limited, flawed benchmarking leads me to believe.) One thing is for sure though, it's much smaller!
It sounds just better, right? Well, it's certainly something you and your company should discuss. Preact is just 3KB gzipped; that's really small! React for comparison's sake is around 45KB, give or take 5KB. That's a huge difference! The way Preact is able to achieve a lot of the size difference is by cutting out some of the legacy bits of React, letting the browser do more heavy lifting, and focusing on a smaller API.
Speaking of a smaller API, we can't switch to Preact wholesale as-is right now; we're using the React and ReactDOM package everywhere.
So instead we're going to drop in the preact-compat library which backfills those APIs at the cost of adding 5KB to your payload; still a win. preact-compat gets you started on your migration; eventually you want to drop it and just be on Preact.
So we're going to super quick migrate to Preact for the client side. In webpack.config.js, add:
// inside resolve
alias: {
react: 'preact-compat',
'react-dom': 'preact-compat'
},
// inside 'babel-loader' loader
include: [
path.resolve('js'),
path.resolve('node_modules/preact-compat/src')
]
The include parts is just telling babel-loader to only run on files that are in the js directory (our code) or in the preact-compat directory. We should have done this sooner since this will speed up your build by not running on every file in node_modules.
The alias bit is telling webpack that everytime in our app we ask for react or react-dom, to actually give it preact-compat (which itself encompasses Preact.) Now build your app for production and compare! In my local env, I'm seeing a difference of 51KB vs 105KB for production builds, gzipped. Not bad!!
Our server more-or-less works as is. It's not ideal; honestly you'd want Preact doing both server and client work, but this is good for now. If you want to make it work, you'll need to make Babel alias React to Preact instead of Webpack since that runs both client and server side whereas Webpack doesn't.
You can also do this for the Inferno library as well. Similarly small and blazing fast, both Preact and Inferno are amazing.