Charger brotli compressé WASM-Golang-php.cn

Charger brotli compressé WASM

WBOY

Libérer： 2024-02-13 16:21:08

avant

517 Les gens l'ont consulté

加载 brotli 压缩的 WASM

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>

Copier après la connexion

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>

Copier après la connexion

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';
}

Copier après la connexion

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!