From 6cf984df83fa060093342d4a49d550950b78e173 Mon Sep 17 00:00:00 2001 From: Moritz Ruth Date: Wed, 26 Feb 2025 19:49:02 +0100 Subject: [PATCH] Add a plugin to pre-compress built assets --- package.json | 2 ++ pnpm-lock.yaml | 57 +++++++++++++++++++++++++++++++++++++------------- vite.config.ts | 16 +++++++++++++- 3 files changed, 60 insertions(+), 15 deletions(-) diff --git a/package.json b/package.json index 454cf19..c3d475e 100644 --- a/package.json +++ b/package.json @@ -8,8 +8,10 @@ "start": "vite preview" }, "devDependencies": { + "@types/node": "^22.13.5", "@vitejs/plugin-vue": "^5.2.1", "@vue/compiler-sfc": "^3.5.13", + "rollup-plugin-gzip": "^4.0.1", "typescript": "^5.7.3", "vite": "^6.1.0", "vite-plugin-pages": "^0.32.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5ede92b..098d684 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,7 +31,7 @@ importers: version: 22.0.0(@vue/compiler-sfc@3.5.13) vite-ssg: specifier: ^25.0.0 - version: 25.0.0(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)) + version: 25.0.0(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)) vue: specifier: ^3.5.13 version: 3.5.13(typescript@5.7.3) @@ -39,24 +39,30 @@ importers: specifier: ^4.5.0 version: 4.5.0(vue@3.5.13(typescript@5.7.3)) devDependencies: + '@types/node': + specifier: ^22.13.5 + version: 22.13.5 '@vitejs/plugin-vue': specifier: ^5.2.1 - version: 5.2.1(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) + version: 5.2.1(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) '@vue/compiler-sfc': specifier: ^3.5.13 version: 3.5.13 + rollup-plugin-gzip: + specifier: ^4.0.1 + version: 4.0.1(rollup@4.34.6) typescript: specifier: ^5.7.3 version: 5.7.3 vite: specifier: ^6.1.0 - version: 6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + version: 6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vite-plugin-pages: specifier: ^0.32.4 - version: 0.32.4(@vue/compiler-sfc@3.5.13)(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3))) + version: 0.32.4(@vue/compiler-sfc@3.5.13)(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3))) vite-plugin-windicss: specifier: ^1.9.4 - version: 1.9.4(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) + version: 1.9.4(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)) windicss: specifier: ^3.5.6 version: 3.5.6 @@ -428,6 +434,9 @@ packages: '@types/ms@2.1.0': resolution: {integrity: sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==} + '@types/node@22.13.5': + resolution: {integrity: sha512-+lTU0PxZXn0Dr1NBtC7Y8cR21AJr87dLLU953CWA6pMxxv/UDc7jYAY90upcrie1nRcD6XNG5HOYEDtgW5TxAg==} + '@types/web-bluetooth@0.0.20': resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} @@ -857,6 +866,12 @@ packages: resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + rollup-plugin-gzip@4.0.1: + resolution: {integrity: sha512-HVukJ5vwTxgzKaNeKCNEqFRQ+/T/j/3zqoUaCN3VGTt8/Mn7Wu2nMCE8VBIDubjM5U+QGgiWs6fYysn63JZY1g==} + engines: {node: '>=10.0.0'} + peerDependencies: + rollup: '>=2.0.0' + rollup@4.34.6: resolution: {integrity: sha512-wc2cBWqJgkU3Iz5oztRkQbfVkbxoz5EhnCGOrnJvnLnQ7O0WhQUYyv18qQI79O8L7DdHrrlJNeCHd4VGpnaXKQ==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} @@ -941,6 +956,9 @@ packages: ufo@1.5.4: resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} + undici-types@6.20.0: + resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==} + unhead@1.11.18: resolution: {integrity: sha512-TWgGUoZMpYe2yJwY6jZ0/9kpQT18ygr2h5lI6cUXdfD9UzDc0ytM9jGaleSYkj9guJWXkk7izYBnzJvxl8mRvQ==} @@ -1394,6 +1412,10 @@ snapshots: '@types/ms@2.1.0': {} + '@types/node@22.13.5': + dependencies: + undici-types: 6.20.0 + '@types/web-bluetooth@0.0.20': {} '@unhead/dom@1.11.18': @@ -1424,9 +1446,9 @@ snapshots: unhead: 1.11.18 vue: 3.5.13(typescript@5.7.3) - '@vitejs/plugin-vue@5.2.1(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': + '@vitejs/plugin-vue@5.2.1(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3))': dependencies: - vite: 6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vue: 3.5.13(typescript@5.7.3) '@vue/compiler-core@3.5.13': @@ -1891,6 +1913,10 @@ snapshots: reusify@1.0.4: {} + rollup-plugin-gzip@4.0.1(rollup@4.34.6): + dependencies: + rollup: 4.34.6 + rollup@4.34.6: dependencies: '@types/estree': 1.0.6 @@ -1986,6 +2012,8 @@ snapshots: ufo@1.5.4: {} + undici-types@6.20.0: {} + unhead@1.11.18: dependencies: '@unhead/dom': 1.11.18 @@ -2014,7 +2042,7 @@ snapshots: acorn: 8.14.0 webpack-virtual-modules: 0.6.2 - vite-plugin-pages@0.32.4(@vue/compiler-sfc@3.5.13)(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3))): + vite-plugin-pages@0.32.4(@vue/compiler-sfc@3.5.13)(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3))): dependencies: '@types/debug': 4.1.12 debug: 4.4.0 @@ -2024,7 +2052,7 @@ snapshots: json5: 2.2.3 local-pkg: 0.5.1 picocolors: 1.1.1 - vite: 6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) yaml: 2.7.0 optionalDependencies: '@vue/compiler-sfc': 3.5.13 @@ -2032,17 +2060,17 @@ snapshots: transitivePeerDependencies: - supports-color - vite-plugin-windicss@1.9.4(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): + vite-plugin-windicss@1.9.4(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0)): dependencies: '@windicss/plugin-utils': 1.9.4 debug: 4.4.0 kolorist: 1.8.0 - vite: 6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) windicss: 3.5.6 transitivePeerDependencies: - supports-color - vite-ssg@25.0.0(vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)): + vite-ssg@25.0.0(vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)): dependencies: '@unhead/dom': 1.11.18 '@unhead/vue': 1.11.18(vue@3.5.13(typescript@5.7.3)) @@ -2052,7 +2080,7 @@ snapshots: jsdom: 25.0.1 kolorist: 1.8.0 prettier: 3.5.1 - vite: 6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) + vite: 6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0) vue: 3.5.13(typescript@5.7.3) yargs: 17.7.2 optionalDependencies: @@ -2063,12 +2091,13 @@ snapshots: - supports-color - utf-8-validate - vite@6.1.0(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): + vite@6.1.0(@types/node@22.13.5)(jiti@1.21.7)(terser@5.39.0)(yaml@2.7.0): dependencies: esbuild: 0.24.2 postcss: 8.5.2 rollup: 4.34.6 optionalDependencies: + '@types/node': 22.13.5 fsevents: 2.3.3 jiti: 1.21.7 terser: 5.39.0 diff --git a/vite.config.ts b/vite.config.ts index 2f255bc..a4b1d0f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,14 +3,28 @@ import vuePlugin from "@vitejs/plugin-vue" import windicssPlugin from "vite-plugin-windicss" import pagesPlugin from "vite-plugin-pages" import iconsPlugin from "unplugin-icons/vite" +import gzipPlugin from "rollup-plugin-gzip" +import { promisify } from "node:util" +import { brotliCompress as brotliCompressCallback } from "node:zlib" + +const brotliCompress = promisify(brotliCompressCallback) export default defineConfig({ plugins: [ vuePlugin(), pagesPlugin(), windicssPlugin(), - iconsPlugin() + iconsPlugin(), + gzipPlugin({ + minSize: 1501 + }), + gzipPlugin({ + minSize: 1501, + fileName: ".br", + customCompression: content => brotliCompress(Buffer.from(content)) + }) ], + // @ts-expect-error ssgOptions: { formatting: "minify", dirStyle: "nested"