Load brotli compressed WASM-Golang-php.cn

Load brotli compressed WASM

WBOY

Release： 2024-02-13 16:21:08

forward

598 people have browsed it

加载 brotli 压缩的 WASM

In recent years, the development of front-end technology has been changing with each passing day, and we are constantly innovating. Among them, "Loading brotli-compressed WASM" is a topic that has attracted much attention. It can help web developers load and parse compressed data more efficiently, improving web page performance and user experience. In this article, PHP editor Zimo will introduce the principles and usage of this technology to help you better master this front-end technology. Let’s explore this exciting field together!

Question content

I have a brotli compressed WASM file main.wasm.br. I've compressed it manually via CLI.

Currently in my HTML file I have the following -

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Go WASM</title>
    <script src="wasm_exec.js"></script>
    <script>
        const go = new Go();
        WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
            go.run(result.instance);
        });
    </script>
</head>

<body></body>

</html>

Copy after login

This will load the uncompressed WASM file. If I change it to WebAssembly.instantiateStreaming(fetch("main.wasm.br"), go.importObject) I get the following error -

<code>
Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'.
</code>

Copy after login

How to load it into HTML?

SOLUTION

Thanks to everyone who commented and guided me to a solution.

So it just comes down to understanding the basics of HTTP requests/responses -

Content-Type Controls the actual data type of the response content.

Content-Encoding Controls what encoding/compression logic we use to encode response content.

In my case, I manually compressed the wasm file using gzip and configured NginX as follows -

location ~ \.wasm {
    default_type 'application/wasm';
    add_header 'Content-Encoding' 'gzip';
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
}

Copy after login

You can configure your makefile or build script to compress wasm every time you build your project.

The above is the detailed content of Load brotli compressed WASM. For more information, please follow other related articles on the PHP Chinese website!