Merge pull request #29 from IT4Change/optimization

fix(frontend): optimization

README.md

@@ -18,6 +18,8 @@
 
 The IT4C Boilerplate for frontends
 
+![](src/assets/it4c-logo2-clean-bg_alpha-128x128.png)
+
 ## Requirements & Technology
 
 To be able to build this project you need `nodejs`, `npm` and optional `docker` and `jq`.

package-lock.json

@@ -81,6 +81,8 @@
         "stylelint-config-standard": "^34.0.0",
         "stylelint-config-standard-scss": "^11.1.0",
         "vite-plugin-checker": "^0.6.2",
+        "vite-plugin-compression": "^0.5.1",
+        "vite-plugin-vuetify": "^1.0.2",
         "vitest": "^0.34.6",
         "vue-tsc": "^1.8.25",
         "vuepress": "^2.0.0-rc.0"
@@ -10042,6 +10044,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@vuetify/loader-shared": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.1.tgz",
+      "integrity": "sha512-kLUvuAed6RCvkeeTNJzuy14pqnkur8lTuner7v7pNE/kVhPR97TuyXwBSBMR1cJeiLiOfu6SF5XlCYbXByEx1g==",
+      "devOptional": true,
+      "dependencies": {
+        "find-cache-dir": "^3.3.2",
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
     "node_modules/@vueuse/core": {
       "version": "10.6.1",
       "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.6.1.tgz",
@@ -11819,7 +11835,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -14835,7 +14851,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
       "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "commondir": "^1.0.1",
         "make-dir": "^3.0.2",
@@ -14852,7 +14868,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
       "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "locate-path": "^5.0.0",
         "path-exists": "^4.0.0"
@@ -14865,7 +14881,7 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
       "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-locate": "^4.1.0"
       },
@@ -14877,7 +14893,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
       "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-try": "^2.0.0"
       },
@@ -14892,7 +14908,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
       "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "p-limit": "^2.2.0"
       },
@@ -14904,7 +14920,7 @@
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
       "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "find-up": "^4.0.0"
       },
@@ -19168,7 +19184,7 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
       "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "semver": "^6.0.0"
       },
@@ -22052,7 +22068,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -22147,7 +22163,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=8"
       }
@@ -31060,7 +31076,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -34039,7 +34055,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
       "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=4",
         "yarn": "*"
@@ -34707,6 +34723,98 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/vite-plugin-compression": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz",
+      "integrity": "sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "debug": "^4.3.3",
+        "fs-extra": "^10.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.0.0"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite-plugin-compression/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
+    "node_modules/vite-plugin-vuetify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.2.tgz",
+      "integrity": "sha512-MubIcKD33O8wtgQXlbEXE7ccTEpHZ8nPpe77y9Wy3my2MWw/PgehP9VqTp92BLqr0R1dSL970Lynvisx3UxBFw==",
+      "devOptional": true,
+      "dependencies": {
+        "@vuetify/loader-shared": "^1.7.1",
+        "debug": "^4.3.3",
+        "upath": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "vite": "^2.7.0 || ^3.0.0 || ^4.0.0",
+        "vuetify": "^3.0.0-beta.4"
+      }
+    },
+    "node_modules/vite-plugin-vuetify/node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "devOptional": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite-plugin-vuetify/node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "devOptional": true
+    },
     "node_modules/vite/node_modules/@esbuild/android-arm": {
       "version": "0.19.7",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.7.tgz",

package.json

@@ -55,7 +55,7 @@
     "docs:dev": "vuepress dev .",
     "docs:build": "vuepress build .",
     "chromatic": "npx chromatic --build-script-name storybook:build",
-    "update": "npx npm-check-update"
+    "update": "npx npm-check-updates"
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^1.5.0",
@@ -130,6 +130,8 @@
     "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^11.1.0",
     "vite-plugin-checker": "^0.6.2",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-vuetify": "^1.0.2",
     "vitest": "^0.34.6",
     "vue-tsc": "^1.8.25",
     "vuepress": "^2.0.0-rc.0"
@@ -145,5 +147,10 @@
     "#context/*": "./renderer/context/*",
     "#types/*": "./types/*",
     "#root/*": "./*"
+  },
+  "overrides": {
+    "vite-plugin-vuetify": {
+      "vite": "$vite"
+    }
   }
 }

server/index.ts

@@ -24,14 +24,28 @@ void startServer()
 async function startServer() {
   const app = express()
 
-  app.use(compression())
-
   // Vite integration
   if (isProduction) {
     // In production, we need to serve our static assets ourselves.
     // (In dev, Vite's middleware serves our static assets.)
     const sirv = (await import('sirv')).default
-    app.use(sirv(`${root}/build/client`))
+    // assets 1y caching
+    app.use(
+      '/assets',
+      sirv(`${root}/build/client/assets`, {
+        maxAge: 31536000, // 1Y
+        immutable: true,
+        gzip: true,
+      }),
+    )
+    // cache things for 10min
+    app.use(
+      sirv(`${root}/build/client`, {
+        maxAge: 600,
+        immutable: true,
+        gzip: true,
+      }),
+    )
   } else {
     // We instantiate Vite's development server and integrate its middleware to our server.
     // ⚠️ We instantiate it only in development. (It isn't needed in production and it
@@ -44,6 +58,9 @@ async function startServer() {
       })
     ).middlewares
     app.use(viteDevMiddleware)
+
+    // on the fly compression
+    app.use(compression())
   }
 
   // ...

src/assets/sass/style.scss

@@ -0,0 +1 @@
+/* stylelint-disable no-empty-source */

src/env.test.ts

@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest'
+
+import { META } from './env'
+
+describe('env', () => {
+  it('has correct default values', () => {
+    expect(META).toEqual({
+      DEFAULT_TITLE: 'IT4C',
+      DEFAULT_DESCRIPTION: 'IT4C Frontend Boilerplate',
+    })
+  })
+})

vite.config.ts

@@ -5,6 +5,8 @@ import vue from '@vitejs/plugin-vue'
 import vike from 'vike/plugin'
 import { UserConfig } from 'vite'
 import { checker } from 'vite-plugin-checker'
+import viteCompression from 'vite-plugin-compression'
+import vuetify from 'vite-plugin-vuetify'
 
 const isStorybook = () =>
   ['storybook', 'storybook:build'].includes(process.env.npm_lifecycle_event as string)
@@ -12,7 +14,7 @@ const isStorybook = () =>
 const config: UserConfig = {
   plugins: [
     vue(),
-    !isStorybook() && vike(), // SSR only when storybook is not running
+    !isStorybook() && vike({ prerender: true }), // SSR only when storybook is not running
     vueI18n({
       ssr: true,
       include: path.resolve(__dirname, './src/locales/**'),
@@ -21,6 +23,8 @@ const config: UserConfig = {
       typescript: true,
       vueTsc: true,
     }),
+    vuetify({ styles: { configFile: './src/assets/sass/style.scss' } }),
+    viteCompression({ filter: /\.*$/i }),
   ],
   build: {
     outDir: './build',

vitest.config.ts

@@ -18,11 +18,10 @@ export default mergeConfig(
           '**/*{.,-}stories.?(c|m)[jt]s?(x)',
           'src/stories/**/*',
         ],
-        lines: 14,
+        lines: 17,
-        functions: 20,
+        // functions: 20, // has problems see https://github.com/vitest-dev/vitest/issues/3607
-        branches: 40,
+        branches: 44,
-        statements: 14,
+        statements: 17,
-        // 100: true,
       },
     },
   }),