Recently with help from my coworkers I released 2 new Gatsby plugins that make removing React from Gatsby a lot easier. Your probably screaming through your monitor right now WHY WOULD YOU REMOVE REACT and I want to point you to another post of mine. This article explains a lot of trouble we went through to make the bundle sizes smaller for our App but at the end of the day these optimizations were not enough for our requirements. The company that I work for demands a very fast website that performs well on older mobile devices and React is simply too much Javascript for our needs.
Anyways here is the 2 plugins.
Remove Javascript Plugin - Does what it says and removes the Javascript files that Gatsby generates but not all javascript.
Add Webpack Entry - Adds a webpack entry point so that you can still include some javascript on your page that is not React. This entry point goes through the Gatsby webpack configuration as normal and will be auto hashed and added to your HTML.
I would encourage anyone who wants to try these plugins out to first read the NPM page. With the combination of these 2 plugins we were able to reduce our Javascript footprint on our pages from 190KB to around 20KB which resulted in a huge performance boost.
Sidenote
One nice benefit of removing React is that your React code simply becomes your view layer that runs only on the server and all your components become simple functions with no state, lifecycle, or event management. I do not recommend using these plugins unless your javascript bundle size is super important to you These plugins go against how Gatsby wants you to use Gatsby (although these plugins are not hacks and simply implement Gatsby's APIs).
Top comments (2)
Is this something one could use to replace React with Preact?
I do not believe so, the removal of react happens at build time so the site you make is still made with react components, but the output HTML + JS will not have React included. This is mostly for the developer ergonomics of using React but without sacrificing on performance by not shipping React to your end users.