Open Closed

Blazor WASM creating compressed dll´s but not serving them to the browser (causing login times of 40-50 sek) #3577


0
Sturla created

Hi

I have the problem that loading up my Blazor WASM back end is super slow (20-50 sec). I thought that it might be because there is an issue trimming some abp.io dll´s but that is just to get rid of unused dll´s and not the compression I was looking for.

When logging into my app it takes around 40-50 seconds if its done for the first time but maybe half that the second time when dll´s are cached.

It also seems to be fetching the dll´s 2x for some reason.

If you look at Steves Sanderson's example you can for example see that he has dotnet.wasm.br file that is 358kb but mine is 1.4 Mb and seems to be served 2x

So I thought that abp wasn´t compressing anything but it is creating the .br files but not serving them it seems.

So after looking at compression we saw this documentation where it says

When hosting a Blazor WebAssembly standalone app, additional work might be required to ensure that statically-compressed files are served

So you need to add <script src="_framework/blazor.webassembly.js" autostart="false"></script> to wwwroot/index.html and add the brotli script module code.

<script type="module">
  import { BrotliDecode } from './decode.min.js';
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type !== 'dotnetjs' && location.hostname !== 'localhost') {
        return (async function () {
          const response = await fetch(defaultUri + '.br', { cache: 'no-cache' });
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          const originalResponseBuffer = await response.arrayBuffer();
          const originalResponseArray = new Int8Array(originalResponseBuffer);
          const decompressedResponseArray = BrotliDecode(originalResponseArray);
          const contentType = type === 
            'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
          return new Response(decompressedResponseArray, 
            { headers: { 'content-type': contentType } });
        })();
      }
    }
  });
</script>

But how do you do that?

If I try to add the code I get all kinds of errors because you are already adding it here in the BundlingService.cs. The brotli script isn´t run except having autostart="false"

So how can I get the brotli compression served to my browser?

  • ABP Framework version: v5.3.3.
  • UI type: Blazor WASM
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): yes

2 Answer(s)
  • 0
    liangshiwei created
    Support Team

    HI,

    You can refer this: https://github.com/abpframework/abp/issues/12549#issuecomment-1125547055

  • 0
    amansharma created

    I followed the step. I am not sure how we can achieve this in blazor webassembly

    I have run the debugger but not getting _framework/blazor.webassembly.js this part

    how should i remove that script