Tree-shake Vuestic and chunking performance

2024-05-26 23:17:52 +02:00
parent 4fd8628f64
commit d436838a79
7 changed files with 199 additions and 15 deletions
@@ -0,0 +1,39 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
+    IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
+    IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
+    IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
+    IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']
+    VaAccordion: typeof import('vuestic-ui')['VaAccordion']
+    VaButton: typeof import('vuestic-ui')['VaButton']
+    VaCheckbox: typeof import('vuestic-ui')['VaCheckbox']
+    VaChip: typeof import('vuestic-ui')['VaChip']
+    VaCollapse: typeof import('vuestic-ui')['VaCollapse']
+    VaDivider: typeof import('vuestic-ui')['VaDivider']
+    VaForm: typeof import('vuestic-ui')['VaForm']
+    VaIcon: typeof import('vuestic-ui')['VaIcon']
+    VaLayout: typeof import('vuestic-ui')['VaLayout']
+    VaMenu: typeof import('vuestic-ui')['VaMenu']
+    VaMenuItem: typeof import('vuestic-ui')['VaMenuItem']
+    VaNavbar: typeof import('vuestic-ui')['VaNavbar']
+    VaNavbarItem: typeof import('vuestic-ui')['VaNavbarItem']
+    VaSelect: typeof import('vuestic-ui')['VaSelect']
+    VaSwitch: typeof import('vuestic-ui')['VaSwitch']
+    VaTab: typeof import('vuestic-ui')['VaTab']
+    VaTabs: typeof import('vuestic-ui')['VaTabs']
+    VaVirtualScroller: typeof import('vuestic-ui')['VaVirtualScroller']
+    WelcomeItem: typeof import('./src/components/WelcomeItem.vue')['default']
+  }
+}
@@ -11,6 +11,7 @@
        "@vuestic/tailwind": "^0.1.5",
        "pinia": "^2.1.7",
        "pinia-plugin-persistedstate": "^3.2.1",
+        "unplugin-vue-components": "^0.27.0",
        "vue": "^3.4.21",
        "vue-i18n": "^9.13.1",
        "vue-router": "^4.3.0",
@@ -51,6 +52,14 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.8",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.8.tgz",
+      "integrity": "sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
    "node_modules/@babel/parser": {
      "version": "7.24.4",
      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.4.tgz",
@@ -798,6 +807,27 @@
        "url": "https://opencollective.com/unts"
      }
    },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
+      "integrity": "sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@rollup/rollup-android-arm-eabi": {
      "version": "4.17.1",
      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz",
@@ -1021,8 +1051,7 @@
    "node_modules/@types/estree": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "dev": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
    },
    "node_modules/@types/geojson": {
      "version": "7946.0.14",
@@ -1502,7 +1531,6 @@
      "version": "8.11.3",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
      "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -1837,6 +1865,11 @@
      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
      "dev": true
    },
+    "node_modules/confbox": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.1.7.tgz",
+      "integrity": "sha512-uJcB/FKZtBMCJpK8MQji6bJHgu1tixKPxRLeGkNzBoOZzpnZUJm0jm2/sBDWcuBx1dYgxV4JU+g5hmNxCyAmdA=="
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1876,7 +1909,6 @@
      "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"
      },
@@ -2769,6 +2801,21 @@
      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
    },
+    "node_modules/local-pkg": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.0.tgz",
+      "integrity": "sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==",
+      "dependencies": {
+        "mlly": "^1.4.2",
+        "pkg-types": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -2866,11 +2913,21 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/mlly": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.0.tgz",
+      "integrity": "sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==",
+      "dependencies": {
+        "acorn": "^8.11.3",
+        "pathe": "^1.1.2",
+        "pkg-types": "^1.1.0",
+        "ufo": "^1.5.3"
+      }
+    },
    "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
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
    },
    "node_modules/muggle-string": {
      "version": "0.4.1",
@@ -3252,6 +3309,16 @@
        "node": ">= 6"
      }
    },
+    "node_modules/pkg-types": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.1.1.tgz",
+      "integrity": "sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==",
+      "dependencies": {
+        "confbox": "^0.1.7",
+        "mlly": "^1.7.0",
+        "pathe": "^1.1.2"
+      }
+    },
    "node_modules/postcss": {
      "version": "8.4.38",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -3616,7 +3683,7 @@
      "version": "4.17.1",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.1.tgz",
      "integrity": "sha512-0gG94inrUtg25sB2V/pApwiv1lUb0bQ25FPNuzO89Baa+B+c0ccaaBKM5zkZV/12pUUdH+lWCSm9wmHqyocuVQ==",
-      "dev": true,
+      "devOptional": true,
      "dependencies": {
        "@types/estree": "1.0.5"
      },
@@ -4048,12 +4115,67 @@
        "node": ">=14.17"
      }
    },
+    "node_modules/ufo": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.5.3.tgz",
+      "integrity": "sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw=="
+    },
    "node_modules/undici-types": {
      "version": "5.26.5",
      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
      "dev": true
    },
+    "node_modules/unplugin": {
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.10.1.tgz",
+      "integrity": "sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==",
+      "dependencies": {
+        "acorn": "^8.11.3",
+        "chokidar": "^3.6.0",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.6.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.27.0.tgz",
+      "integrity": "sha512-77eTEy23sQ0UpzGWnZ9I2mY3cnmXwklz4ITcn3JfxjCoX643ghImkiZ4nFm58sxbdVcc4Fo/o4LIoFnlqEqsSg==",
+      "dependencies": {
+        "@antfu/utils": "^0.7.7",
+        "@rollup/pluginutils": "^5.1.0",
+        "chokidar": "^3.6.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "local-pkg": "^0.5.0",
+        "magic-string": "^0.30.10",
+        "minimatch": "^9.0.4",
+        "resolve": "^1.22.8",
+        "unplugin": "^1.10.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/update-browserslist-db": {
      "version": "1.0.13",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
@@ -4272,6 +4394,19 @@
        "vue": "^3.0.4"
      }
    },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz",
+      "integrity": "sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg=="
+    },
    "node_modules/which": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -18,6 +18,7 @@
    "@vuestic/tailwind": "^0.1.5",
    "pinia": "^2.1.7",
    "pinia-plugin-persistedstate": "^3.2.1",
+    "unplugin-vue-components": "^0.27.0",
    "vue": "^3.4.21",
    "vue-i18n": "^9.13.1",
    "vue-router": "^4.3.0",
@@ -6,7 +6,7 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

 import App from './App.vue';
 import router from './router';
-import { createVuestic } from 'vuestic-ui';
+import { createVuesticEssential } from 'vuestic-ui';
 import { i18n } from '@/i18n';

 const app = createApp(App);
@@ -15,5 +15,5 @@ app
  .use(i18n)
  .use(createPinia().use(piniaPluginPersistedstate))
  .use(router)
-  .use(createVuestic())
+  .use(createVuesticEssential())
  .mount('#app');
@@ -1,5 +1,3 @@
-import _amenities from './data/amenities.json';
-
 export type OSMAmenity = {
  value: string;
  in_wiki: boolean;
@@ -8,7 +6,6 @@ export type OSMAmenity = {
    de?: string;
  };
 };
-export const amenities: OSMAmenity[] = _amenities;

 export interface APIElement {
  id: string;
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { amenities } from '@/osm';
+import amenities from '@/data/amenities.json';
 import { useMapStore } from '@/stores/map';
 import { useThemeStore } from '@/stores/theme';
 import { useI18n } from 'vue-i18n';
+import type { OSMAmenity } from '@/osm';

 const theme = useThemeStore();
 const mapStore = useMapStore();
@@ -40,7 +41,7 @@ const i18n = useI18n();
            >
            <VaVirtualScroller
              v-slot="{ item }"
-              :items="amenities"
+              :items="amenities as OSMAmenity[]"
              wrapper-size="30rem"
            >
              <VaCheckbox
@@ -1,12 +1,23 @@
 import { fileURLToPath, URL } from 'node:url';

 import { defineConfig } from 'vite';
+import Components from 'unplugin-vue-components/vite';
 import vue from '@vitejs/plugin-vue';

 // https://vitejs.dev/config/
 export default defineConfig({
  base: process.env.BASE || '/',
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    Components({
+      resolvers: [
+        (componentName) => {
+          if (componentName.startsWith('Va') || componentName.startsWith('va'))
+            return { name: componentName, from: 'vuestic-ui' };
+        }
+      ]
+    })
+  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))