Request *.wasm.gz files from Blazor WASM Bootstrapper

[SerratedSharp]

I noticed *.wasm.gz versions of files is generated during compile/publish.

Is there a way to configure Blazor WASM bootstrapper to request *.wasm.gz version of files directly during loading? I.e. such that the URL of the request would include the *.gz

This would be useful where a static file host limits the size of files if the .*.wasm file is too large. I encountered this with the cloudflare plan in one instance.

I could not determine a way to host only the .wasm.gz file but have the CDN respond to /.wasm URL's and implicitly serve the *.gz with compression header.

I know this is kind of a host specific issue, but if the runtime loader can just be configured to request *.wasm.gz directly then the host's limitation becomes a non-issue. Maybe this isn't feasible of the bootstrapper doesn't have a way to un-gzip the file without the browser handling it implicitly?

[colgecen]

yeah you re right - the default bootstrapper doesn t ask for .gz files on its own. but it s easy to fix. you just override the loadBootResource function in your index.html

basically you intercept how the files load and add .gz to the end of the URL. that way the browser requests the compressed file directly and cloudflare s size limit won t be a problem anymore

here s a quick example:

<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
  Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
      if (type === 'dotnetjs' || type === 'dotnetwasm' || type === 'assembly') {
        return `${defaultUri}.gz`;
      }
    }
  });
</script>

one thing though -your server needs to serve those .gz files with the right headers:
content-type: application/wasm and Content-Encoding: gzip

and don t worry about decompression. the browser handles that automatically as long as the Content-Encoding: gzip header is there. it unzips the file before passing it to Blazor so no extra code needed

if my answer was helpful please mark it as such so that others can benefit from it as well. i hope this helps you resolve your cloudflare issue....

[SerratedSharp]

I finally got back to implementing this, but could not figure out how to get cloudflair to attach the header without double compressing the file. So I implemented a handler locally to ungzip the file. Thank you.

window.mckLoadGzipBootResource = function (type, name, defaultUri, integrity) {
    if (type !== 'dotnetwasm') {
        return;
    }

    function fetchUncompressed() {
        return fetch(defaultUri, { cache: 'no-cache', integrity: integrity });
    }

    return fetch(defaultUri + '.gz', { cache: 'no-cache' }).then(async function (response) {
        if (!response.ok) {
            return fetchUncompressed();
        }

        const payload = await response.arrayBuffer();
        const bytes = new Uint8Array(payload);
        const isGzip = bytes.length >= 2 && bytes[0] === 0x1f && bytes[1] === 0x8b;
        const isWasm = bytes.length >= 4
            && bytes[0] === 0x00 && bytes[1] === 0x61 && bytes[2] === 0x73 && bytes[3] === 0x6d;

        let wasmBuffer = payload;
        if (isGzip) {
            wasmBuffer = await new Response(
                new Blob([payload]).stream().pipeThrough(new DecompressionStream('gzip'))
            ).arrayBuffer();
        } else if (!isWasm) {
            return fetchUncompressed();
        }

        if (integrity && integrity.indexOf('sha256-') === 0 && crypto.subtle) {
            const digest = await crypto.subtle.digest('SHA-256', wasmBuffer);
            const actual = 'sha256-' + btoa(String.fromCharCode.apply(null, Array.from(new Uint8Array(digest))));
            if (actual !== integrity) {
                throw new Error('Integrity check failed for ' + defaultUri + '.gz');
            }
        }

        return new Response(wasmBuffer, {
            headers: { 'content-type': 'application/wasm' }
        });
    });
};