A more elegant file compression and self-decompression solution #1796

Caramel-Diode · 2025-09-06T04:26:04Z

Caramel-Diode
Sep 6, 2025

I think we can use the browser's native compression API to further reduce the file size. I know this might be more appropriate to raise as an issue in SingleFileZ.

Implementation

Compress the entire document content using the browser's `gzip` API

/**
 * @param {string} source ------ raw HTML
 * @return {Promis<string>} ---- Base64 Dataurl string
 */
const gzip = async source => {
    const reader = new FileReader();
    const cs = new CompressionStream("gzip");
    const writer = cs.writable.getWriter();
    writer.write(new TextEncoder().encode(source));
    writer.close();
    const blob = await new Response(cs.readable, { headers: { "Content-Type": "application/gzip" } }).blob();
    const { promise, resolve } = Promise.withResolvers();
    reader.addEventListener("load", resolve);
    reader.readAsDataURL(blob);
    await promise;
    return reader.result;
};

Use self-extracting code in the final saved file

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
    <script type="module">
        const base64 = "...";// Generated by the gizp function
        const ds = new DecompressionStream("gzip");
        const writer = ds.writable.getWriter();
        writer.write(await (await fetch(base64)).arrayBuffer());
        writer.close();
        const rawHTML = await new TextDecoder().decode(await new Response(ds.readable).arrayBuffer())
        
        const doc = new DOMParser().parseFromString(rawHTML, "text/html");
        // Replace all the content within <html></html>
        // Using ` doc.documentElement.innerHTML ` in order to remove `<!DOCTYPE html>` Document declaration node
        document.documentElement.innerHTML = doc.documentElement.innerHTML; 
        // We don't need to use JavaScript....
        // Function(doc.querySelector("script").textContent)();
        // dispatchEvent(new Event("DOMContentLoaded"));
    </script>
</head>
<body>
    <noscript>Enable JavaScript to display content properly</noscript>
</body>
</html>

The above operations can reduce the file size by about 40%, which is particularly effective for text content.

gildas-lormeau · 2025-10-22T14:22:33Z

gildas-lormeau
Oct 22, 2025
Maintainer

Thank you for the suggestion but I think I must have missed something. How is this more elegant? In SingleFile/SingleFileZ, the elegance of the self-extracting files produced is that they are compatible with the zip format. With your suggestion, the resulting file is not compatible with gzip AFAIK.

1 reply

Caramel-Diode Oct 24, 2025
Author

Thank you for the suggestion but I think I must have missed something. How is this more elegant? In SingleFile/SingleFileZ, the elegance of the self-extracting files produced is that they are compatible with the zip format. With your suggestion, the resulting file is not compatible with gzip AFAIK.

Thank you for your reply!

I think for ordinary users, changing the file extension to zip to extract resources from web pages is actually basically useless.

Strictly speaking, currently, it is not absolutely safe to directly concatenate zip data in binary form into a custom html tag. base64 strings are a more common practice for embedding data.

I think the elegance lies in the fact that this approach does not rely on additional decoding libraries but merely utilizes the decompression capabilities of the browser itself. Such decompression efficiency is often more efficient than that achieved through js code. (I don't remember if the current rendered content is obtained by decompressing zip data. If not, I think the practice of storing an additional copy of the same data is a bit bad.)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

A more elegant file compression and self-decompression solution #1796

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

A more elegant file compression and self-decompression solution #1796

Uh oh!

Caramel-Diode Sep 6, 2025

Implementation

Compress the entire document content using the browser's gzip API

Use self-extracting code in the final saved file

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

gildas-lormeau Oct 22, 2025 Maintainer

Uh oh!

Caramel-Diode Oct 24, 2025 Author

Caramel-Diode
Sep 6, 2025

Compress the entire document content using the browser's `gzip` API

Replies: 1 comment 1 reply

gildas-lormeau
Oct 22, 2025
Maintainer

Caramel-Diode Oct 24, 2025
Author