Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Tommy May III
Tommy May III

Posted on

     

Removing React from Gatsby

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 nowWHY WOULD YOU REMOVE REACT and I want to point you to anotherpost 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.

  1. Remove Javascript Plugin - Does what it says and removes the Javascript files that Gatsby generates but notall javascript.

  2. 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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
lightningspirit profile image
Vitor Carvalho
  • Joined
• Edited on• Edited

Is this something one could use to replace React with Preact?

CollapseExpand
 
itmayziii profile image
Tommy May III
I’m just a developer that loves to help others.
  • Location
    Cleveland, OH
  • Work
    Full Stack Developer at Budget Dumpster
  • Joined
• Edited on• Edited

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.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I’m just a developer that loves to help others.
  • Location
    Cleveland, OH
  • Work
    Full Stack Developer at Budget Dumpster
  • Joined

More fromTommy May III

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp