Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why I don't see DLLs and dotnet.wasm being loaded on a Blazor WebAssembly app in Browser > Dev Tools > Network?

I am fiddling with the default VS2019 (16.6.5) Blazor WebAssembly project. However when I look at Chrome (or Firefox or Edge) > Developer Tools [F12] > network, with Disable Cache enabled, I don't see much being loaded?

Blazor wasm

In the Dev Tool > Sources I can see that dotnet.wasm has been loaded somehow.

dotnet.wasm in sources

And by reading some articles like this one I see screenshots that show DLL and wasm being loaded.

Devb Tool Network on Blazor wasm

Why don't I see that?


Edit: Ok I succeed to see DLLs loaded like I want only when starting debugging the Blazor WebAssembly project from VS2019. When I start the project without debugging, I still get the same lightweight load as in the first screenshot. Why?

like image 898
Patrick from NDepend team Avatar asked Sep 02 '20 08:09

Patrick from NDepend team


People also ask

How do you run Blazor Wasm app?

Open Visual Studio and select Create a new project. Select the Blazor WebAssembly App project type, enter a name for your project, and then click Next. Select the ASP.NET Core hosted checkbox and the desired framework, and then click Create.

Should I use Blazor server or Blazor Wasm?

The Blazor Server hosting model offers several benefits: Download size is significantly smaller than a Blazor WebAssembly app, and the app loads much faster. The app takes full advantage of server capabilities, including the use of . NET Core APIs.

Does Blazor use Wasm?

Blazor can run your client-side C# code directly in the browser, using WebAssembly. Because it's real .NET running on WebAssembly, you can re-use code and libraries from server-side parts of your application.


1 Answers

Blazor WASM changed the loading behaviour just before RTM version 3.2 was released (May 2020) so the examples prior to this demonstrate the old behaviour.

When a Blazor WASM application loads, it creates a manifest and checksum for each DLL, this is loaded in blazor.boot.json

WASM network trace

The Blazor code will check for these files (and the checksum) in the Browser's Cache storage. Note this is not the same cache the browser uses for normal content, e.g. HTML, CSS etc.

If they're not present (the first run) they are loaded. You can see the files that were loaded here:

enter image description here

These files are loaded on the first run. In future page views, if the filename and checksum matches, it won't be reloaded even if you select the browser's "Empty Cache and Hard Reload"

Why? This makes sense because files like mscorlib.dll won't have changed due to an app recompiling. This isn't JavaScript, it's a binary. The SHA256 checksum verifies it's the same file.

However your Blazor app DLLs will change if you edit and recompile. If they do they get reloaded:

app change results in BlazorApp1.dll reloading

If you want to force a full reload, you can navigate to the Browsers Cache (under Application in Chrome developer tools), and select Delete for your site.

like image 195
Quango Avatar answered Oct 13 '22 11:10

Quango