Suboptimal initial load of web app

[ochrons]

Problem

When a Dioxus web app is initially loaded by the browser it's loaded slower than necessary.

Steps To Reproduce

Steps to reproduce the behavior:

Expected behavior

Resources needed by the Dioxus app should be loaded with minimal amount of requests and utilize browser preloading capabilities.

How to improve

Here is a screenshot of a typical page load in Chrome using a slow network to make the problem more visible

(don't mind about CSS being loaded twice with different names)

First issue is that web.js is downloaded twice, because the preload attribute is not respected by the browser due to missing crossorigin attribute, which is also visible as a warning in console

101:17 A preload for 'http://127.0.0.1:8080/wasm/web.js' is found, but is not used because 
the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Second problem is the number of JS files loaded in a cascading manner. These should all be bundled into a single JS file and served at once. There is also the issue of max 6 TCP connections with HTTP/1.1 that causes stalling, but that's not a real issue in production environment with HTTP/2 or HTTP/3. Even if the connection has high bandwidth but there is a long latency (server on the other side of the globe), these JS file loads will be the bottleneck.

Finally, application assets like CSS should be compressed with Brotli, which is already done to the Dioxus WASM and JS files.

Environment:

• Dioxus version: 0.6.0-rc.0
• Rust version: 1.83
• OS info: WSL
• App platform: fullstack web

Questionnaire