Too much JS downloaded with simple starter app

[agnar-nomad]

Hello team, so happy to find Waku and start experimenting with it!!

When I build and start up the simple starter example, I am surprised to see almost 0.5 MB of JS downloaded to the client. One of the compelling features of RSC for devs is smaller app client bundle size.

I wanted to ask about and index.js file of 170kb (first line) being downloaded on page start/refresh.
But even more surprising is the last line, 234kb of testing-library.js being shipped to the browser.

I ran yarn build > yarn start > open localhost:8080

I am still working on my machine only, I guess its different when deployed on a server...?
I might certainly be off track completely, but could you please explain the above points?

[dai-shi]

Hi, thanks for trying it out! Feedback is very appriciated.

What's contentScript.js? It doesn't seem related to Waku.

I guess 170kb is mostly due to react libraries. Even with RSC, we still load the full react library. (We really wish react library becomes code splittable...)

[agnar-nomad]

Apologies, that second weird thing comes from a browser extension.

A Next.js template app costs only about 70kB on the client. I will be eager to see if Waku can be compressed a bit more.

[dai-shi]

is it because of compression on transfer? or do you compare the content size?
On our discord server, someone compared the minimal apps similarly.

[rmarscher]

I just published a npm create waku@latest project to cloudflare to test the nuqs library. Looking at the network tab, it's loading 85KB of compressed javascript - and yeah, it looks like most of that is React. Cloudflare is handling automatically compressing assets. For my Chrome browser, it looks like the assets were delivered using https://en.wikipedia.org/wiki/Zstd compression.

Running the same build locally with npm run start, I can see it's serving 228KB of uncompressed javascript.

The Waku CLI node server actually added an experimental-compress option a few months ago that adds the Hono compress middleware. I tried running with that enabled - npm run start -- --experimental-compress - and it brings the javascript down to 78.4KB using gzip compression. It's interesting that gzip seems to be compressing slightly better than zstd.

You can code split assets using React.lazy. I've been finding that very helpful to keep bundles from getting really large.

With RSC, you can avoid shipping javascript needed to load and parse data and render html, but if the javascript is also needed on the client, then it's going to get shipped. If you were doing something like loading a markdown parser in the client, then moving that to RSC and avoiding shipping the markdown parser, that's a big bundle savings with RSC. But you may find that RSC doesn't actually shave a ton of client javascript unless you go way in with things like form actions and don't load additional client-side libs.