Rumah > Artikel > pembangunan bahagian belakang > Muatkan brotli dimampatkan WASM
Muatkan brotli dimampatkan WASM
- WBOYke hadapan
- 2024-02-13 16:21:08519semak imbas
Dalam beberapa tahun kebelakangan ini, perkembangan teknologi bahagian hadapan telah berubah setiap hari, dan kami sentiasa berinovasi. Antaranya, "Memuatkan WASM termampat brotli" adalah topik yang telah menarik perhatian ramai. Ia boleh membantu pembangun web memuatkan dan menghuraikan data yang dimampatkan dengan lebih cekap, meningkatkan prestasi halaman web dan pengalaman pengguna. Dalam artikel ini, editor PHP Zimo akan memperkenalkan prinsip dan penggunaan teknologi ini untuk membantu anda menguasai teknologi hadapan ini dengan lebih baik. Mari kita meneroka bidang yang menarik ini bersama-sama!
Kandungan soalan
Saya ada fail WASM termampat brotli main.wasm.br. Saya telah memampatkannya secara manual melalui CLI.
Pada masa ini dalam fail HTML saya, saya mempunyai yang berikut -
<!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>
Ini akan memuatkan fail WASM yang tidak dimampatkan. Jika saya menukarnya kepada WebAssembly.instantiateStreaming(fetch("main.wasm.br"), go.importObject) saya mendapat ralat berikut -
<code> Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm'. </code>
Bagaimana untuk memuatkannya ke dalam HTML?
Penyelesaian
Terima kasih kepada semua yang memberi komen dan membimbing saya kepada penyelesaian.
Jadi ia hanya perlu memahami asas permintaan/tindak balas HTTP -
Content-Type Mengawal jenis data sebenar kandungan respons.
Content-Encoding Kawal pengekodan/logik pemampatan yang kami gunakan untuk mengekod kandungan respons.
Dalam kes saya, saya memampatkan fail wasm secara manual menggunakan gzip dan mengkonfigurasi NginX seperti berikut -
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';
}
Anda boleh mengkonfigurasi fail make atau membina skrip anda untuk memampatkan wasm setiap kali anda membina projek anda.
Atas ialah kandungan terperinci Muatkan brotli dimampatkan WASM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!