vite plugin singlefile compression

Compress all assets and embeds them into dist/index.html, making it convenient to share as a single HTML file.

The recipient can open it directly in the browser without manually unzipping the file.

Using DecompressionStream + base128-ascii.

Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/

Setup

npm i vite-plugin-singlefile-compression@latest -D

Then modify vite.config.ts, like test/vite.config.ts

+ import singleFileCompression from 'vite-plugin-singlefile-compression'

  export default defineConfig({
    plugins: [
      vue(),
      vueDevTools(),
+     singleFileCompression(),
    ],

Then use hash history, like test/src/router/index.ts

  const router = createRouter({
-   history: createWebHistory(),
+   history: createWebHashHistory(),

Options

Example:

singleFileCompression({
  rename: 'example.html'
}),

More options see src/options.ts

export interface Options {
    /**
     * Enable compress.
     * @default true
     */
    enableCompress?: boolean

    /**
     * Use Base128 to encode compressed script.
     * If false, use Base64.
     * https://www.npmjs.com/package/base128-ascii
     * @default true
     */
    useBase128?: boolean

    /**
     * Compress format.
     * 
     * https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream/DecompressionStream
     * 
     * @type {"deflate-raw" | "deflate" | "gzip" | "brotli" | "zstd" | "deflateRaw" | "gz" | "br" | "brotliCompress" | "zstandard" | "zst"}
     * 
     * @default "deflate-raw"
     */
    compressFormat?: CompressFormat | CompressFormatAlias

    /**
     * Custom compressor.
     */
    compressor?: Compressor

    /**
     * Rename index.html
     */
    rename?: string

    /**
     * https://github.com/terser/html-minifier-terser?tab=readme-ov-file#options-quick-reference
     * @default defaultHtmlMinifierTerserOptions
     */
    htmlMinifierTerser?: HtmlMinifierOptions | boolean

    /**
     * Try inline html used assets, if inlined or not used in JS.
     * @default true
     */
    tryInlineHtmlAssets?: boolean

    /**
     * Remove inlined asset files.
     * @default true
     */
    removeInlinedAssetFiles?: boolean

    /**
     * Try inline html icon, if icon is in public dir.
     * @default true
     */
    tryInlineHtmlPublicIcon?: boolean

    /**
     * Remove inlined html icon files.
     * @default true
     */
    removeInlinedPublicIconFiles?: boolean

    /**
     * Use import.meta polyfill.
     * @default true
     */
    useImportMetaPolyfill?: boolean
}

Effect

Preview: https://bddjr.github.io/vite-plugin-singlefile-compression/

vite v8.0.1 building client environment for production...
✓ 42 modules transformed.
rendering chunks (1)...

vite-plugin-singlefile-compression 2.1.2 deflate-raw base128-ascii

  file:///D:/code/js/vite-plugin-singlefile-compression/test/dist/index.html
  123.867 kB -> 50.297 kB

Finish.

computing gzip size...
dist/index.html  50.29 kB │ gzip: 43.81 kB

✓ built in 318ms

Clone

git clone https://github.com/bddjr/vite-plugin-singlefile-compression
cd vite-plugin-singlefile-compression
npm i
cd test
npm i
cd ..
node --run build