Wasm splitting in yew

[WorldSEnder]

Description

Add a way to split the wasm bundle in multiple components. This modifies the build process, and uses relocation information emitted by llvm to identify where to "split". There's a bit of glue code in yew to ensure that messages sent to the lazy component are processed and properties are passed along without additional cloning.

The main part of the solution lives in https://github.com/WorldSEnder/wasm-split-prototype as of now. This was implemented in collaboration with the maintainer of leptos.

Checklist

• I have reviewed my own code
• I have added examples

[WorldSEnder]

The review pings are mostly because I think both of you will find this interesting, not necessarily as an invite to dig into the code and give meaningful suggestions for improvements (but feel free to if you have the time).

[github-actions]

Benchmark - core

Yew Master

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.433 ns      │ 2.548 ns      │ 2.436 ns      │ 2.439 ns      │ 100     │ 1000000000

Pull Request

vnode           fastest       │ slowest       │ median        │ mean          │ samples │ iters
╰─ vnode_clone  2.482 ns      │ 2.645 ns      │ 2.484 ns      │ 2.489 ns      │ 100     │ 1000000000

[github-actions]

Benchmark - SSR

Yew Master

Details

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	291.043	291.476	291.200	0.137
Hello World	10	493.135	503.324	496.541	3.407
Function Router	10	1623.159	1640.431	1628.389	5.161
Concurrent Task	10	1005.632	1006.962	1006.313	0.447
Many Providers	10	1121.940	1150.005	1131.421	8.492

Pull Request

Details

Benchmark	Round	Min (ms)	Max (ms)	Mean (ms)	Standard Deviation
Baseline	10	310.426	310.973	310.812	0.184
Hello World	10	480.828	495.118	485.216	4.636
Function Router	10	1603.860	1627.602	1614.185	8.289
Concurrent Task	10	1005.786	1007.013	1006.487	0.420
Many Providers	10	1082.972	1143.054	1108.569	18.418

[github-actions]

Visit the preview URL for this PR (updated for commit 3cf0e6e):

https://yew-rs-api--pr3932-split-wasm-8cld9gqn.web.app

_{(expires Wed, 29 Oct 2025 11:11:55 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

[Madoshakalaka]

This creates the underlying component with creation_ctx, whose link() returns inner_scope. But inner_scope is never mounted — its state is permanently None.

This makes function component hooks permanently broken after load.

When a function component is created, FunctionComponent::new() captures ctx.link().clone() into a re_render closure:

  let re_render = {
      let link = ctx.link().clone(); // this is inner_scope
      Rc::new(move || link.send_message(()))
  };

Every hook (use_state, use_reducer, etc.) shares this closure. When a state setter fires, it calls inner_scope.send_message(()), which schedules an UpdateRunner. But UpdateRunner::run() checks inner_scope.state, finds None, and silently returns. The component renders once correctly and then becomes completely unresponsive to all state changes. I've confirmed this — a simple use_state counter wrapped in declare_lazy_component! renders 0 and clicking the increment button does nothing.

I created a minimal reproducing repo https://github.com/Madoshakalaka/yew-lazy-hook-bug