Compress all assets and embeds them into dist/index.html, making it convenient to share as a single HTML file.
npm install vite-plugin-singlefile-compressionCompress 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.
``
npm i vite-plugin-singlefile-compression -D
Then modify vite.config.ts, see test/vite.config.ts
`ts
// Import singleFileCompression
import singleFileCompression from 'vite-plugin-singlefile-compression'
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
// Add singleFileCompression
singleFileCompression(),
],
`
Then modify src/router/index.ts
`ts`
const router = createRouter({
// Use Hash History
history: createWebHashHistory(),
Example:
`ts`
singleFileCompression({
rename: 'example.html'
}),
More info see src/options.ts
`ts
export interface Options {
/**
* 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 Base128 to encode gzipped 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"
* @default "deflate-raw"
*/
compressFormat?: compressFormat
/**
* Custom compressor.
*/
compressor?: compressor
/**
* Use import.meta polyfill.
* @default true
*/
useImportMetaPolyfill?: boolean
}
`
https://bddjr.github.io/vite-plugin-singlefile-compression/
`
vite v7.3.1 building client environment for production...
ā 46 modules transformed.
rendering chunks (1)...
vite-plugin-singlefile-compression 2.0.10 building...
file:///D:/code/js/vite-plugin-singlefile-compression/test/dist/index.html
107.149 kB -> 48.323 kB
Finish.
dist/index.html 48.32 kB
ā built in 829ms
`
`
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