花椒前端用WebAssembly提升前端应用解压缩性能的尝试

#include <stdio.h>#include <stdlib.h>#include <emscripten.h>#include "zip/src/zip.h"
EMSCRIPTEN_KEEPALIVEint load_zip_data(void (*callback)(void *buf, int, const char*, int, int)) {    struct zip_t *zip = zip_open("archive.zip", 0, 'r');    int i, n = zip_total_entries(zip);    void *buf = NULL;    size_t bufSize;    for (i = 0; i < n; i++) {        zip_entry_openbyindex(zip, i);        {            const char *name = zip_entry_name(zip);            zip_entry_open(zip, name);            {                zip_entry_read(zip, &buf, &bufSize);            }            callback(buf, bufSize, name, i, n);        }        zip_entry_close(zip);        free(buf);    }    zip_close(zip);    return n;}

typedef void(*callback)(void *buf, int size, const char* name, int i, int n);

emcc c/unzip.c c/zip/src/zip.c \	     -o unzip/unzip.js \	     -O3 \	     -s WASM=1 \	     -s FORCE_FILESYSTEM=1 \	     -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap', 'addFunction', 'UTF8ToString', 'FS']" \	     -s RESERVED_FUNCTION_POINTERS=1 \	     -s MODULARIZE=1 \	     -s ENVIRONMENT='worker' \	     -s ASSERTIONS=1 \	     -s EXPORT_ES6=1

import getModule from '../unzip/unzip';
let wasmResolve;let wasmReady = new Promise((resolve) => {    wasmResolve = resolve;});
const Module = getModule({    onRuntimeInitialized() {        onWasmLoaded();    },    instantiateWasm(importObject, successCallback) {        self.fetch('unzip.wasm', {            mode: 'cors',        }).then((response) => {            if (response.ok) {                return response.arrayBuffer();            }            throw Error(response.status);        }).then((wasmBinary) => {            WebAssembly.instantiate(new Uint8Array(wasmBinary), importObject)                .then((output) => {                    wasmResolve(output.instance);                    successCallback(output.instance);                })                .catch((e) => {                    console.warn(`[js] wasm instantiation failed! ${e}`);                });        });        return {};    },    print(text) {        console.log(text);    },    printErr(err) {        console.error(err);    },});

function onWasmLoaded() {    self._loadZipEntryData = Module.cwrap('load_zip_data', 'number', ['number']);    self._addZipEntryDataPtr = Module.addFunction(addZipEntryData.bind(this));    postMessage({        type: 'inited'    });}

-s EXTRA_EXPORTED_RUNTIME_METHODS="['addFunction','removeFunction']"

fetch(url).then((res) => {    res.arrayBuffer().then((buffer) => {        loadZipEntryData(buffer);    });});
...
function loadZipEntryData(zipBuffer) {    Module.FS.writeFile('archive.zip', new Uint8Array(zipBuffer));    self._loadZipEntryData(self._addZipEntryDataPtr);}

callback(buf, bufSize, name, i, n);

let obj = {};function addZipEntryData(buff, size, namePtr, i, n) {    const outArray = Module.HEAPU8.subarray(buff, buff + size);    const fileName = Module.UTF8ToString(namePtr);    if(fileName.indexOf('__') === -1) {        const blob = new Blob([outArray]);        obj[fileName] = URL.createObjectURL(blob);    }    if(i === (n -1)) {        const o = {};        Object.assign(o, obj);        postMessage({            url: zipUrl,            files: o,        });        obj = {};    }}