Maison > Article > développement back-end > Charger brotli compressé WASM
Charger brotli compressé WASM
- WBOYavant
- 2024-02-13 16:21:08518parcourir
Ces dernières années, le développement de la technologie front-end évolue chaque jour et nous innovons constamment. Parmi eux, "Chargement de WASM compressé brotli" est un sujet qui a beaucoup retenu l'attention. Il peut aider les développeurs Web à charger et à analyser les données compressées plus efficacement, améliorant ainsi les performances des pages Web et l'expérience utilisateur. Dans cet article, l'éditeur PHP Zimo vous présentera les principes et l'utilisation de cette technologie pour vous aider à mieux maîtriser cette technologie front-end. Explorons ensemble ce domaine passionnant !
Contenu de la question
J'ai un fichier WASM compressé brotli main.wasm.br. Je l'ai compressé manuellement via CLI.
Actuellement dans mon fichier HTML, j'ai ce qui suit -
<!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>
Cela chargera le fichier WASM non compressé. Si je le change en WebAssembly.instantiateStreaming(fetch("main.wasm.br"), go.importObject), j'obtiens l'erreur suivante -
<code> Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. </code>
Comment le charger en HTML ?
Solution
Merci à tous ceux qui ont commenté et m'ont guidé vers la solution.
Il s'agit donc simplement de comprendre les bases des requêtes/réponses HTTP -
Content-Type Contrôle le type de données réel du contenu de la réponse.
Content-Encoding Contrôlez la logique d'encodage/compression que nous utilisons pour encoder le contenu de la réponse.
Dans mon cas, j'ai compressé manuellement le fichier wasm à l'aide de gzip et configuré NginX comme suit -
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';
}
Vous pouvez configurer votre makefile ou votre script de construction pour compresser wasm à chaque fois que vous construisez votre projet.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!