Open Closed

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


User avatar
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

12 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    HI,

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

  • User Avatar
    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

  • User Avatar
    0
    Sturla created

    As you can see here this still isn´t working. I then saw this CLI issue and am wondering if its somehow connected?

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    I have answered you, please check it

  • User Avatar
    0
    Sturla created

    Hi, I answered back since I´m not getting this to work, see here.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    https://github.com/abpframework/abp/pull/13772#issuecomment-1321023913

    Seems this is not a problem with ABP.

  • User Avatar
    0
    Sturla created

    I asked this question at aspnetcore. Please add more details to it if you feel I´m missing something so we can get the proper help from them to fix this.

  • User Avatar
    0
    Sturla created

    Did you see the answer Liangshiwei? https://github.com/abpframework/abp/pull/13772

    If I add the .br statement to the web .config file for my abp.io project I just get the error you can see in my answer https://github.com/abpframework/abp/pull/13772#issuecomment-1324630884.

    Can you get this to work on your side? I´m VERY apprehensious to get this into next 6.0 patch if there is any change needed on your side.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I create a new project with version 6.0.1 and could not reproduce the problem.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    @Sturla

    What's your email, I will share the project with you.

  • User Avatar
    0
    Sturla created

    Thank you, its Sturla@ibeinni.is

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    1

    2

    3

    • Use dotnet publish to publish Blazor project
    • Use local IIS server to create a website
    • Use ngrok to expose your localhost to the public network.
    • Update DbMigrator's and HttpApi.Host's appsettings.json file.
    • Create database and run the HttpApi.Host project

    PS: You can find a webconfig in the root folder, please use it for IIS.

Made with ❤️ on ABP v9.1.0-preview. Updated on November 11, 2024, 11:11