esp8266-react icon indicating copy to clipboard operation
esp8266-react copied to clipboard

Using PreactJS instead of ReactJS to reduce bundle size

Open rjjrbatarao opened this issue 1 year ago • 8 comments

Hi this is a great library for most of projects but for more complex dashboard it would require larger spiffs storage, it would be nice to use PreactJS instead of ReactJS using Preact Compat to reduce bundle size.

rjjrbatarao avatar Jul 11 '23 13:07 rjjrbatarao

I did start on the preact port a years ago (https://github.com/rjwats/esp8266-react/issues/57) but gave up as there were too many constraints. In the end I found other optimizations to fit all the code in a 2MB ESP32, plus added many more features needed for my project.

proddy avatar Jul 11 '23 14:07 proddy

After fiddling with all the answers from stackoverflow all not working and just by a chance found a solution using the ff. cd to interface and type this command npm install react@npm:@preact/compat react-dom@npm:@preact/compat thats it :) please close if this works I was able to shave 200Kb from the www_progmem.h from 1200kb down to 1000kb

rjjrbatarao avatar Jul 12 '23 08:07 rjjrbatarao

Hi @proddy ! Could you make a PR for this repository? I would like to know how to make all changes. Thanks in advance. Best regards.

FernandoGarcia avatar Jul 13 '23 19:07 FernandoGarcia

Hi @proddy ! Could you make a PR for this repository? I would like to know how to make all changes. Thanks in advance. Best regards.

I use a variation of this project which is deeply embedded into my own project and probably every file has changed in the last 2 years or so. What changes are you after?

proddy avatar Jul 13 '23 19:07 proddy

I would like to know what are the changes needed to use Preact in this script.

https://github.com/rjwats/esp8266-react/blob/master/scripts/build_interface.py#L25

FernandoGarcia avatar Jul 13 '23 20:07 FernandoGarcia

I wouldn't know, I use a different way to build (using vite). But I think @rjjrbatarao gave the answer above

proddy avatar Jul 13 '23 20:07 proddy

I did a try but did not see any reduction in resources consumption.

FernandoGarcia avatar Jul 13 '23 22:07 FernandoGarcia

npm install react@npm:@preact/compat react-dom@npm:@preact/compat works with vite or cra, I tested it on different computer, theres a reduction in total WWWData.h size

rjjrbatarao avatar Aug 11 '23 00:08 rjjrbatarao