https://github.com/bddjr/vite-plugin-singlefile-compression
📦 Compress all assets and embeds them into dist/index.html, making it convenient to share as a single HTML file.
https://github.com/bddjr/vite-plugin-singlefile-compression
compress compression css frontend gzip inline js plugin sfa singlefile vite
Last synced: 3 months ago
JSON representation
📦 Compress all assets and embeds them into dist/index.html, making it convenient to share as a single HTML file.
- Host: GitHub
- URL: https://github.com/bddjr/vite-plugin-singlefile-compression
- Owner: bddjr
- License: mit
- Created: 2024-11-25T09:38:15.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-06-12T11:52:55.000Z (5 months ago)
- Last Synced: 2025-07-13T15:50:24.000Z (4 months ago)
- Topics: compress, compression, css, frontend, gzip, inline, js, plugin, sfa, singlefile, vite
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/vite-plugin-singlefile-compression
- Size: 1.32 MB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-singlefile-compression - Compress all assets and embeds them into `dist/index.html`, making it convenient to share as a single HTML file. (Plugins / Framework-agnostic Plugins)
- awesome-vite - vite-plugin-singlefile-compression - Compress all assets and embeds them into `dist/index.html`, making it convenient to share as a single HTML file. (Plugins / Framework-agnostic Plugins)
README
# 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](https://developer.mozilla.org/docs/Web/API/DecompressionStream) + [base128-ascii](https://www.npmjs.com/package/base128-ascii).
## Setup
```
npm i vite-plugin-singlefile-compression
```
Then modify `vite.config.ts`, see [test/vite.config.ts](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](test/src/router/index.ts#L5)
```ts
const router = createRouter({
// Use Hash History
history: createWebHashHistory(),
```
## Options
Example:
```ts
singleFileCompression({
rename: 'example.html'
}),
```
More info see [src/options.ts](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.
* @default "deflate-raw"
*/
compressFormat?: compressFormat;
}
```
## Effect
https://bddjr.github.io/vite-plugin-singlefile-compression/
```
vite v6.2.6 building for production...
✓ 45 modules transformed.
rendering chunks (1)...
vite-plugin-singlefile-compression 2.0.5 building...
file:///D:/code/js/vite-plugin-singlefile-compression/test/dist/index.html
101.63 KiB -> 46.42 KiB
Finish.
dist/index.html 47.53 kB
✓ built in 770ms
```
## Clone
```
git clone https://github.com/bddjr/vite-plugin-singlefile-compression
cd vite-plugin-singlefile-compression
npm i
cd test
npm i
cd ..
npm run build
```