Home >Backend Development >Golang >Load brotli compressed WASM
Load brotli compressed WASM
- WBOYforward
- 2024-02-13 16:21:08599browse
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>
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>
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';
}
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!