1.2.5 optimize, upgrade vite@6.0.7 base128-ascii@2.0.2

bddjr · Jan 9, 2025 · dfc6c39 · dfc6c39
1 parent 146a655
commit dfc6c39
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -4,92 +4,96 @@ Compress all assets and embeds them into `dist/index.html`, making it convenient
 
 The recipient can open it directly in the browser without manually unzipping the file.
 
-Adapted from [vite-plugin-singlefile](https://www.npmjs.com/package/vite-plugin-singlefile)
+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](test/vite.config.ts#L14)
+Then modify `vite.config.ts`, see [test/vite.config.ts](test/vite.config.ts)
 
 ```ts
 // Import singleFileCompression
 import singleFileCompression from 'vite-plugin-singlefile-compression'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
     vueDevTools(),
     // Add singleFileCompression
     singleFileCompression(),
   ],
+
+  // Not required options:
   esbuild: {
-    // Remove license comments
+    // Remove license comments, make file smaller.
     legalComments: "none"
   },
   build: {
     terserOptions: {
       format: {
-        // Remove license comments
+        // Remove license comments, make file smaller.
         comments: false
       }
     },
+    // Not use old syntax, make file smaller.
     target: 'esnext',
+    // Disable reporting compressed chunk sizes, slightly improve build speed.
     reportCompressedSize: false
   },
 ```
 
-Then modify [src/router/index.ts](test/src/router/index.ts#L5) , change `createWebHistory` to `createWebHashHistory`
+Then modify [src/router/index.ts](test/src/router/index.ts#L5)
 
 ```ts
 const router = createRouter({
+  // Use Hash History
   history: createWebHashHistory(),
 ```
 
 ## Options
 
 ```ts
 export interface Options {
-    /**
-     * 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
+	/**
+	 * 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;
 }
 ```
 
@@ -98,19 +102,19 @@ export interface Options {
 https://bddjr.github.io/vite-plugin-singlefile-compression/
 
 ```
-vite v6.0.6 building for production...
+vite v6.0.7 building for production...
 ✓ 45 modules transformed.
 rendering chunks (1)...
 
-vite-plugin-singlefile-compression 1.2.4 building...
+vite-plugin-singlefile-compression 1.2.5 building...
 
   file:///D:/bddjr/Desktop/code/js/vite-plugin-singlefile-compression/test/dist/index.html
   101.02 KiB -> 46.52 KiB
 
 Finish.
 
 dist/index.html  47.64 kB
-✓ built in 690ms
+✓ built in 716ms
 ```
 
 ## Clone
@@ -128,3 +132,5 @@ npm run build
 ## License
 
 [MIT](LICENSE.txt)
+
+Adapted from [vite-plugin-singlefile](https://www.npmjs.com/package/vite-plugin-singlefile).
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-singlefile-compression",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
@@ -42,14 +42,14 @@
   "dependencies": {
     "@types/html-minifier-terser": "^7.0.2",
     "@types/node": "^22.9.3",
-    "base128-ascii": "^2.0.1",
+    "base128-ascii": "^2.0.2",
     "esbuild": "^0.24.0",
     "html-minifier-terser": "^7.2.0",
     "mime": "^4.0.4",
     "mini-svg-data-uri": "^1.4.4",
     "picocolors": "^1.1.1",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.2",
-    "vite": "^6.0.6"
+    "vite": "^6.0.7"
   }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
 import { UserConfig, PluginOption, ResolvedBuildOptions, ResolvedConfig } from "vite"
-import { OutputChunk, OutputAsset, OutputBundle } from "rollup"
+import { OutputChunk, OutputAsset, OutputBundle, RollupOptions } from "rollup"
 import mime from 'mime'
 import pc from "picocolors"
 import svgToTinyDataUri from "mini-svg-data-uri"
@@ -151,19 +151,22 @@ function KiB(size: number) {
 function setConfig(config: UserConfig) {
     config.base = './'
 
-    if (!config.build)
-        config.build = {}
-
+    config.build ??= {}
     config.build.assetsInlineLimit = () => true
     config.build.chunkSizeWarningLimit = Infinity
     config.build.cssCodeSplit = false
     config.build.assetsDir = 'assets'
     config.build.modulePreload = { polyfill: false }
 
-    if (!config.build.rollupOptions)
-        config.build.rollupOptions = {}
-
-    config.build.rollupOptions.output = { inlineDynamicImports: true }
+    config.build.rollupOptions ??= {}
+    config.build.rollupOptions.output ??= {}
+    if (Array.isArray(config.build.rollupOptions.output)) {
+        for (const output of config.build.rollupOptions.output) {
+            output.inlineDynamicImports = true
+        }
+    } else {
+        config.build.rollupOptions.output.inlineDynamicImports = true
+    }
 }
 
 async function generateBundle(bundle: OutputBundle, config: ResolvedConfig, options: innerOptions) {
@@ -174,9 +177,7 @@ async function generateBundle(bundle: OutputBundle, config: ResolvedConfig, opti
     if (config.build.assetsDir !== 'assets')
         return console.error("error: config.build.assetsDir has been changed!")
 
-    const distURL = (u =>
-        u.endsWith('/') ? u : u + '/'
-    )(pathToFileURL(path.resolve(config.build.outDir)).href)
+    const distURL = pathToFileURL(path.resolve(config.build.outDir)).href + '/'
 
     const globalDelete = new Set<string>()
     const globalDoNotDelete = new Set<string>()
@@ -212,7 +213,9 @@ async function generateBundle(bundle: OutputBundle, config: ResolvedConfig, opti
 
         // Fix async import
         const newJSCode = ["self.__VITE_PRELOAD__=void 0"]
-        newJSCode.toString = () => newJSCode.join(';')
+        newJSCode.toString = function () {
+            return this.join(';')
+        }
 
         // remove html comments
         newHtml = newHtml.replaceAll(/<!--[\d\D]*?-->/g, '')

diff --git a/test/src/router/index.ts b/test/src/router/index.ts
@@ -2,6 +2,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
 
 const router = createRouter({
+  // Use Hash History
   history: createWebHashHistory(),
   routes: [
     {

diff --git a/test/vite.config.ts b/test/vite.config.ts
@@ -16,17 +16,19 @@ export default defineConfig({
     singleFileCompression(),
   ],
   esbuild: {
-    // Remove license comments
+    // Remove license comments, make file smaller.
     legalComments: "none"
   },
   build: {
     terserOptions: {
       format: {
-        // Remove license comments
+        // Remove license comments, make file smaller.
         comments: false
       }
     },
+    // Not use old syntax, make file smaller.
     target: 'esnext',
+    // Disable reporting compressed chunk sizes, slightly improve build speed.
     reportCompressedSize: false
   },
   resolve: {