Preact is a "Fast 3kB alternative to React with the same modern API".
Of most interest to us, there is a compatibility layer, preact/compat, which aims to make code written to work against React (including third-party components) work without change, but benefit from smaller bundle size and some other differences.
How to swap to Preact
Swapping a SAFE Stack app to Preact is easy. All you need to do is replace the dependencies in package.json from "react" and "react-dom" to "preact":
- "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "preact": "^10.13.1"(You can also do this via the npm CLI: npm uninstall react; npm uninstall react-dom; npm install preact.)
Then alias from the replaced packages to "preact/compat" in webpack.config.js (ensuring that any JavaScript code uses 'react'/'react-dom' imports continues to work):
+ },
+ resolve: {
+ alias: {
+ "react": "preact/compat",
+ "react-dom": "preact/compat"
+ }I've made a GitHub repo with the changes applied; you can see the diff in the relevant commit.
After doing that, the SAFE Todo app still works as expected:
But the bundle size is smaller. Before:
After:
Conclusion
Swapping to Preact in a SAFE Stack app was remarkably easy. The code continues to work, but the vendors bundle size is significantly smaller. This could be a topic that's worth exploring further!
