Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support compressed dlls #13772

Merged
merged 3 commits into from
Aug 22, 2022
Merged

Support compressed dlls #13772

merged 3 commits into from
Aug 22, 2022

Conversation

realLiangshiwei
Copy link
Member

Resolves: #13771

public class MyProjectNameBundleContributor : IBundleContributor
{
    public void AddScripts(BundleContext context)
    {
        context.Add("_framework/blazor.webassembly.js",
            additionalProperties: new Dictionary<string, string>() { { "autostart", "false" } });
    }
}

@realLiangshiwei realLiangshiwei changed the title Liangshiwei/blazor Support compressed dlls Aug 22, 2022
@realLiangshiwei realLiangshiwei added this to the 6.0-final milestone Aug 22, 2022
@maliming maliming merged commit 86157b8 into rel-6.0 Aug 22, 2022
@maliming maliming deleted the liangshiwei/blazor branch August 22, 2022 08:45
@sturlath
Copy link
Contributor

sturlath commented Nov 18, 2022

Can you explain this to me @realLiangshiwei? Are you saying that if I add these two lines I can add the following code to the index.html (just like shown here) I should get the Brotli files and not the huge DLL´s?

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

Did this work for you? Because it doesn´t for me. I tried to point it out #13114 (comment) without any response.

p.s
@omer-repo @rhuanbarros I see that you added interactions to my querying of this issue not being solved and I was wondering if you also had problems getting this to work?

@realLiangshiwei
Copy link
Member Author

The behavior of the CLI has changed after this PR, but it's still working. your code needs some changes.

Steps:

1

public class MyProjectNameBundleContributor : IBundleContributor
{
    public void AddScripts(BundleContext context)
    {
        context.BundleDefinitions.RemoveAll(x => x.Source.Contains("blazor.webassembly.js"));

        context.Add("_framework/blazor.webassembly.js",
            additionalProperties: new Dictionary<string, string>() { { "autostart", "false" } }, excludeFromBundle: true);
    }
}

2
run abp bundle command.

<script src="_framework/blazor.webassembly.js" autostart=false ></script> will add to your index.html

image

if I add these two lines I can add the following code to the index.html (just like shown here) I should get the Brotli files and not the huge DLL´s?

It's not handled by ABP when you use dotnet publish to publish, you will get the Brotli files.

image

@sturlath
Copy link
Contributor

sturlath commented Nov 19, 2022

Thank you for the details but for some reason I can´t get it to work.

I get this error
image

These are my changes (just like yours)
image

and
image

the blazor.boot.json.br gets created on the server allright
image

It just stops here
image

OK there is just one file in the _framework folder and that is blazor.webassembly.js

image

I see that there are no .br files in the service-worker-assets.js file on the server
image

but I also see that it´s not getting served either...
image

everything looks good with the service-worker
image

Any ideas @realLiangshiwei why they are not being served? Something I´m missing?

@sturlath
Copy link
Contributor

I think this has something to do with the web.config @realLiangshiwei?

If I update my web.config (straight in the Azure Portal) with this web.config example from the docs

I seem to be getting the .br files served.

image

and lots more in the service worker it seems
image

But I also get an error I´m guessing is because I just drop this into the web.config and is not built with it
image

So now my questions are

  • what needs to go into the web.config
  • how do I change it since there isn´t any in my project?

Can I just add the file and it overrides your default implementation? Pinging @EngincanV since this is Blazor stuff you might know.

@realLiangshiwei
Copy link
Member Author

Hi,

I think this is not a problem with ABP, even if you create an empty Blazor wasm project(without ABP), you will have this problem. so I think you need to get help from aspnetcore

image

@sturlath
Copy link
Contributor

@realLiangshiwei we got an answer, the web.config needs to be tweaked to contain the following lines

 <remove fileExtension=".br" />
 <mimeMap fileExtension=".br" mimeType="application/brotli" />

So, you should ship a web.config file with the project or add this information to the documentation.

BUT I did this to my project (with your suggested updates) and when I finally see one .br file being used. In Edge browser it the browser stops with an error, but Firefox actually downloads all the .dll´s

image

I now get this error in the console and the page doesn´t load

 System.AggregateException: One or more errors occurred. (blazorExports._internal.invokeJSFromDotNet is not a function
TypeError: blazorExports._internal.invokeJSFromDotNet is not a function
    at _mono_wasm_invoke_js_blazor (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:195300)
    at wasm://wasm/00971e46:wasm-function[219]:0x1a490
    at wasm://wasm/00971e46:wasm-function[167]:0xce5e
    at wasm://wasm/00971e46:wasm-function[166]:0xbd71
    at wasm://wasm/00971e46:wasm-function[2812]:0xabf01
    at wasm://wasm/00971e46:wasm-function[1616]:0x6fcc2
    at wasm://wasm/00971e46:wasm-function[1620]:0x7032f
    at wasm://wasm/00971e46:wasm-function[118]:0x969d
    at Module._mono_wasm_invoke_method [as invoke_method] (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:219002)
    at Object._call_method_with_converted_args (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:183515))
 ---> Microsoft.JSInterop.JSException: blazorExports._internal.invokeJSFromDotNet is not a function
TypeError: blazorExports._internal.invokeJSFromDotNet is not a function
    at _mono_wasm_invoke_js_blazor (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:195300)
    at wasm://wasm/00971e46:wasm-function[219]:0x1a490
    at wasm://wasm/00971e46:wasm-function[167]:0xce5e
    at wasm://wasm/00971e46:wasm-function[166]:0xbd71
    at wasm://wasm/00971e46:wasm-function[2812]:0xabf01
    at wasm://wasm/00971e46:wasm-function[1616]:0x6fcc2
    at wasm://wasm/00971e46:wasm-function[1620]:0x7032f
    at wasm://wasm/00971e46:wasm-function[118]:0x969d
    at Module._mono_wasm_invoke_method [as invoke_method] (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:219002)
    at Object._call_method_with_converted_args (https://eventstreamingappdev.azurewebsites.net/_framework/dotnet.6.0.7.0cvvz72jnn.js:1:183515)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[Object,Object,Object,String](String identifier, Object arg0, Object arg1, Object arg2, Int64 targetInstanceId)
   at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[String](String identifier)
   at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.InitializeNavigationManager(IJSUnmarshalledRuntime jsRuntime)
   at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder..ctor(IJSUnmarshalledRuntime jsRuntime, JsonSerializerOptions jsonOptions)
   at Microsoft.AspNetCore.Components.WebAssembly.Hosting.WebAssemblyHostBuilder.CreateDefault(String[] args)
   at BSR.Beinni.Blazor.Program.Main(String[] args)
   --- End of inner exception stack trace ---

Do you get the same error if you update your abp sites web.config?

@sturlath
Copy link
Contributor

@realLiangshiwei ok so you managed to get this working? And just with your previous steps here above? Didn´t you need to add anything to the web.config file?

So, this isn´t related to Microsoft at all? Did you manage to get it to work with your none-abp.io Blazor project and could you share that code with me?

@aliatstorm
Copy link

what was end result of this thread, @sturlath did you manage to run non abp/ abp blazor webassembly project with brotli compression ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants