From 36a36272ed2811c9cd2dc0f8f7561e1559e89f13 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sat, 17 Aug 2024 18:09:20 +0200
Subject: [PATCH 01/13] fix(image): optimize getImageSize

---
 build.config.js                               |   1 +
 package-lock.json                             | 135 ++++++++++
 package.json                                  |   2 +
 src/runtime/components/BoosterImage/Base.vue  | 242 ++++++++----------
 .../components/BoosterImage/utils/image.js    |   1 +
 .../components/BoosterPicture/Base.vue        | 169 ++++++------
 .../components/BoosterPicture/Source.vue      |  96 +++----
 src/runtime/utils/description.js              |   7 +-
 src/tmpl/plugin.tmpl.js                       |  51 ++--
 9 files changed, 397 insertions(+), 307 deletions(-)

diff --git a/build.config.js b/build.config.js
index 4b87aef1a0..2d905f89c0 100644
--- a/build.config.js
+++ b/build.config.js
@@ -7,6 +7,7 @@ export default {
     'hash-sum',
     'probe-image-size',
     'vue3-lazy-hydration',
+    'node-cache',
 
     // package
     '@nuxt/image',
diff --git a/package-lock.json b/package-lock.json
index 250bfece3e..918d7b2a2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
         "htmlparser2": "9.1.0",
         "image-meta": "0.2.1",
         "mime-types": "2.1.35",
+        "node-cache": "^5.1.2",
         "pathe": "1.1.2",
         "sort-css-media-queries": "2.3.0",
         "vue3-lazy-hydration": "1.2.1"
@@ -57,6 +58,7 @@
         "vite-svg-loader": "5.1.0",
         "vitepress": "1.3.2",
         "vitest": "2.0.5",
+        "vue-tsc": "^2.0.29",
         "wicg-inert": "3.1.3"
       }
     },
@@ -7759,6 +7761,35 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/@volar/language-core": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/source-map": "2.4.0-alpha.18"
+      }
+    },
+    "node_modules/@volar/source-map": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@volar/typescript": {
+      "version": "2.4.0-alpha.18",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.18.tgz",
+      "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "2.4.0-alpha.18",
+        "path-browserify": "^1.0.1",
+        "vscode-uri": "^3.0.8"
+      }
+    },
     "node_modules/@voxpelli/config-array-find-files": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@voxpelli/config-array-find-files/-/config-array-find-files-0.1.2.tgz",
@@ -7941,6 +7972,17 @@
         "@vue/shared": "3.4.35"
       }
     },
+    "node_modules/@vue/compiler-vue2": {
+      "version": "2.7.16",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-vue2/-/compiler-vue2-2.7.16.tgz",
+      "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "de-indent": "^1.0.2",
+        "he": "^1.2.0"
+      }
+    },
     "node_modules/@vue/devtools-api": {
       "version": "7.3.7",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-7.3.7.tgz",
@@ -8027,6 +8069,31 @@
         "rfdc": "^1.4.1"
       }
     },
+    "node_modules/@vue/language-core": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.29.tgz",
+      "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/language-core": "~2.4.0-alpha.18",
+        "@vue/compiler-dom": "^3.4.0",
+        "@vue/compiler-vue2": "^2.7.16",
+        "@vue/shared": "^3.4.0",
+        "computeds": "^0.0.1",
+        "minimatch": "^9.0.3",
+        "muggle-string": "^0.4.1",
+        "path-browserify": "^1.0.1"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.4.35",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.35.tgz",
@@ -10073,6 +10140,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/computeds": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
+      "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -10826,6 +10900,13 @@
         }
       }
     },
+    "node_modules/de-indent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/debounce": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
@@ -13763,6 +13844,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/he": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "he": "bin/he"
+      }
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",
@@ -16389,6 +16480,13 @@
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
       "license": "MIT"
     },
+    "node_modules/muggle-string": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
+      "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "5.0.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.7.tgz",
@@ -17020,6 +17118,18 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/node-cache": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/node-cache/-/node-cache-5.1.2.tgz",
+      "integrity": "sha512-t1QzWwnk4sjLWaQAS8CHgOJ+RAfmHpxFWmc36IWTiWHQfs0w5JDMBS1b1ZxQteo0vVVuWJvIUKHDkkeK7vIGCg==",
+      "license": "MIT",
+      "dependencies": {
+        "clone": "2.x"
+      },
+      "engines": {
+        "node": ">= 8.0.0"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -18106,6 +18216,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/path-browserify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
+      "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/path-exists": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
@@ -25143,6 +25260,24 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vue-tsc": {
+      "version": "2.0.29",
+      "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.29.tgz",
+      "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@volar/typescript": "~2.4.0-alpha.18",
+        "@vue/language-core": "2.0.29",
+        "semver": "^7.5.4"
+      },
+      "bin": {
+        "vue-tsc": "bin/vue-tsc.js"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/vue3-lazy-hydration": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/vue3-lazy-hydration/-/vue3-lazy-hydration-1.2.1.tgz",
diff --git a/package.json b/package.json
index 5187e6a6b3..bf2e1dce02 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,7 @@
     "htmlparser2": "9.1.0",
     "image-meta": "0.2.1",
     "mime-types": "2.1.35",
+    "node-cache": "^5.1.2",
     "pathe": "1.1.2",
     "sort-css-media-queries": "2.3.0",
     "vue3-lazy-hydration": "1.2.1"
@@ -99,6 +100,7 @@
     "vite-svg-loader": "5.1.0",
     "vitepress": "1.3.2",
     "vitest": "2.0.5",
+    "vue-tsc": "^2.0.29",
     "wicg-inert": "3.1.3"
   }
 }
diff --git a/src/runtime/components/BoosterImage/Base.vue b/src/runtime/components/BoosterImage/Base.vue
index 752564215c..10786d1cdf 100644
--- a/src/runtime/components/BoosterImage/Base.vue
+++ b/src/runtime/components/BoosterImage/Base.vue
@@ -16,7 +16,7 @@
   />
 </template>
 
-<script>
+<script setup>
 import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import { getImageStyleDescription } from '#booster/utils/description';
 import { getCrossorigin } from '#booster/utils/browser';
@@ -30,160 +30,130 @@ import {
   computed
 } from '#imports';
 
-export default {
-  inheritAttrs: false,
+defineOptions({
+  inheritAttrs: false
+});
 
-  props: {
-    source: {
-      type: [Source, Object],
-      default: null
-    },
-
-    title: {
-      type: String,
-      required: true
-    },
+const $attrs = useAttrs();
 
-    alt: {
-      type: String,
-      default: null
-    },
-
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: validatorCrossorigin
-    }
+const $props = defineProps({
+  source: {
+    type: [Source, Object],
+    default: null
   },
 
-  emits: ['load'],
-
-  async setup(props) {
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-    const { isCritical } = useBoosterCritical();
-
-    const resolvedCrossorigin = computed(() => {
-      return getCrossorigin(props.crossorigin || $booster.crossorigin);
-    });
-
-    if (props.source) {
-      const source = new Source(props.source);
-      const config = $img.getSizes(source.src, {
-        sizes: source.sizes,
-        modifiers: source.getModifiers(),
-        ...source.getOptions($booster)
-      });
-
-      const meta = ref(null);
-
-      useHead(() => {
-        if (meta.value) {
-          return {
-            style: [
-              meta.value && getImageStyleDescription(meta, meta.value.className)
-            ].filter(Boolean),
-            link: [
-              !(!config || !isCritical.value) &&
-                (import.meta.server || process.env.prerender) &&
-                new Source(source).getPreload(
-                  config.srcset,
-                  config.sizes,
-                  resolvedCrossorigin.value
-                )
-            ].filter(Boolean),
-            noscript: [
-              (import.meta.server || process.env.prerender) && {
-                key: 'img-nojs',
-                children: `<style>img { content-visibility: unset !important; }</style>`
-              }
-            ].filter(Boolean)
-          };
-        }
-        return {};
-      });
-
-      try {
-        meta.value = await source.getMeta(config.src, $booster);
-      } catch (error) {
-        console.error(error);
-      }
-
-      return {
-        isCritical,
-        config,
-        meta,
-        className: meta.value.className,
-        resolvedCrossorigin
-      };
-    }
-    return {
-      isCritical,
-      resolvedCrossorigin
-    };
+  title: {
+    type: String,
+    required: true
   },
 
-  data() {
-    return {
-      className: null,
-      loading: true,
-      config: null,
-      meta: null
-    };
+  alt: {
+    type: String,
+    default: null
   },
 
-  computed: {
-    classNames() {
-      return [{ loading: this.loading }].concat(this.className);
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
+    validator: validatorCrossorigin
+  }
+});
 
-    srcset() {
-      return this.config?.srcset || this.config?.src;
-    },
+const $emit = defineEmits(['load']);
 
-    sizes() {
-      return this.config?.sizes;
-    },
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
+const { isCritical } = useBoosterCritical();
 
-    width() {
-      return this.$attrs.width || this.meta?.width;
-    },
+const loading = ref(true);
+const meta = ref(null);
+const config = ref(null);
+const resolvedSource = ref(null);
+const srcset = ref(null);
+const sizes = ref(null);
 
-    height() {
-      return this.$attrs.height || this.meta?.height;
-    },
+const resolvedCrossorigin = computed(() => {
+  return getCrossorigin($props.crossorigin || $booster.crossorigin);
+});
 
-    loadingMode() {
-      if (this.isCritical) {
-        return 'eager';
-      }
-      return 'lazy';
-    },
+const classNames = computed(() => {
+  return [{ loading: loading.value }].concat(resolvedSource.value?.className);
+});
 
-    decodingMode() {
-      if (!this.source || new Source(this.source).format !== 'svg') {
-        return 'async';
-      }
-      return 'sync';
-    }
-  },
+const width = computed(() => {
+  return $attrs.width || meta.value?.width;
+});
 
-  mounted() {
-    this.loading = !this.$el.complete;
-    if (!this.loading) {
-      this.onLoad({ target: this.$el });
-    }
-  },
+const height = computed(() => {
+  return $attrs.height || meta.value?.height;
+});
+
+const loadingMode = computed(() => {
+  if (isCritical.value) {
+    return 'eager';
+  }
+  return 'lazy';
+});
 
-  methods: {
-    onLoad(e) {
-      this.loading = false;
-      this.$emit('load', e.target);
-    }
+const decodingMode = computed(() => {
+  if (!$props.source || new Source($props.source).format !== 'svg') {
+    return 'async';
   }
+  return 'sync';
+});
+
+const onLoad = e => {
+  loading.value = false;
+  $emit('load', e.target);
 };
+
+if ($props.source) {
+  resolvedSource.value = markRaw(new Source($props.source));
+  config.value = $img.getSizes(resolvedSource.value.src, {
+    sizes: resolvedSource.value.sizes,
+    modifiers: resolvedSource.value.getModifiers(),
+    ...resolvedSource.value.getOptions($booster)
+  });
+
+  srcset.value = config.value.srcset || config.value.src;
+  sizes.value = config.value.sizes;
+
+  const headData = ref({});
+
+  useHead(() => {
+    return headData.value;
+  });
+
+  try {
+    meta.value = markRaw(
+      await resolvedSource.value.getMeta(config.value.src, $booster)
+    );
+  } catch (error) {
+    console.error(error);
+  }
+  headData.value = {
+    style: [
+      meta.value && getImageStyleDescription(resolvedSource.value)
+    ].filter(Boolean),
+    link: [
+      !(!config.value || !isCritical.value) &&
+        (import.meta.server || process.env.prerender) &&
+        resolvedSource.value.getPreload(
+          config.value.srcset,
+          config.value.sizes,
+          resolvedCrossorigin.value
+        )
+    ].filter(Boolean),
+    noscript: [
+      (import.meta.server || process.env.prerender) && {
+        key: 'img-nojs',
+        children: `<style>img { content-visibility: unset !important; }</style>`
+      }
+    ].filter(Boolean)
+  };
+}
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterImage/utils/image.js b/src/runtime/components/BoosterImage/utils/image.js
index 1743e3eb2b..9a55270eb9 100644
--- a/src/runtime/components/BoosterImage/utils/image.js
+++ b/src/runtime/components/BoosterImage/utils/image.js
@@ -53,5 +53,6 @@ export async function getMeta(source, compiledSrc, $booster) {
   }
 
   const { width, height } = await $booster.getImageSize(source.src);
+
   return source.modify({ width, height });
 }
diff --git a/src/runtime/components/BoosterPicture/Base.vue b/src/runtime/components/BoosterPicture/Base.vue
index ceb0be4938..7f492ac16d 100644
--- a/src/runtime/components/BoosterPicture/Base.vue
+++ b/src/runtime/components/BoosterPicture/Base.vue
@@ -18,7 +18,7 @@
   </picture>
 </template>
 
-<script>
+<script setup>
 import { getPictureStyleDescription } from '../../utils/description';
 import { crossorigin as validatorCrossorigin } from '../../utils/validators';
 import {
@@ -34,111 +34,92 @@ import PictureSource from '#booster/components/BoosterPicture/Source';
 
 const TARGET_FORMAT_PRIORITY = ['avif', 'webp', 'png', 'jpg', 'gif'];
 
-export default {
-  components: {
-    PictureSource,
-    BaseImage
+const $props = defineProps({
+  sources: {
+    type: [Array, SourceList],
+    required: true
   },
 
-  props: {
-    sources: {
-      type: [Array, SourceList],
-      required: true
-    },
+  formats: {
+    type: Array,
+    default() {
+      return null;
+    }
+  },
 
-    formats: {
-      type: Array,
-      default() {
-        return null;
-      }
-    },
+  title: {
+    type: String,
+    default: null
+  },
 
-    title: {
-      type: String,
-      default: null
-    },
+  alt: {
+    type: String,
+    default: null
+  },
 
-    alt: {
-      type: String,
-      default: null
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
+    validator: validatorCrossorigin
+  },
 
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: validatorCrossorigin
-    },
+  sortSources: {
+    type: Boolean,
+    default: true
+  }
+});
 
-    sortSources: {
-      type: Boolean,
-      default: true
-    }
-  },
+const $emit = defineEmits(['load']);
 
-  emits: ['load'],
-
-  async setup(props) {
-    const { isCritical } = useBoosterCritical();
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-
-    const sourceList = SourceList.create(props.sources, {
-      sort: props.sortSources
-    });
-
-    const metaSources = ref(null);
-
-    useHead(() => {
-      if (metaSources.value && metaSources.value.length) {
-        const classNames = metaSources.value.classNames;
-        return {
-          style: [getPictureStyleDescription(metaSources.value, classNames)]
-        };
-      }
-      return {};
-    });
-    try {
-      metaSources.value = await sourceList.getMeta($img, $booster);
-    } catch (error) {
-      console.error(error);
-    }
-    return {
-      isCritical,
-      resolvedFormats: props.formats || $booster.targetFormats,
-      sourceList,
-      metaSources,
-      classNames: metaSources.value.classNames
-    };
-  },
+const { isCritical } = useBoosterCritical();
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
 
-  computed: {
-    formatSources() {
-      const sortedFormatsByPriority = Array.from(
-        new Set(
-          TARGET_FORMAT_PRIORITY.map(v =>
-            this.resolvedFormats.find(format => format.includes(v))
-          )
-        )
-      ).filter(Boolean);
-      const preloadFormat = TARGET_FORMAT_PRIORITY.find(v =>
-        this.resolvedFormats.find(format => format.includes(v))
-      );
-      return this.sourceList.getFormats(
-        sortedFormatsByPriority,
-        preloadFormat,
-        this.isCritical
-      );
-    }
-  },
+const sourceList = SourceList.create($props.sources, {
+  sort: $props.sortSources
+});
 
-  methods: {
-    onLoad(e) {
-      this.$emit('load', e);
-    }
-  }
+const metaSources = ref(null);
+
+const resolvedFormats = $props.formats || $booster.targetFormats;
+const sortedFormatsByPriority = Array.from(
+  new Set(
+    TARGET_FORMAT_PRIORITY.map(v =>
+      resolvedFormats.find(format => format.includes(v))
+    )
+  )
+).filter(Boolean);
+const preloadFormat = TARGET_FORMAT_PRIORITY.find(v =>
+  resolvedFormats.find(format => format.includes(v))
+);
+
+const formatSources = ref(
+  sourceList.getFormats(sortedFormatsByPriority, preloadFormat, isCritical)
+);
+
+const classNames = computed(() => metaSources.value?.classNames || {});
+
+const onLoad = e => {
+  $emit('load', e);
 };
+
+useHead(() => {
+  if (metaSources.value && metaSources.value.length) {
+    const classNames = metaSources.value.classNames;
+    return {
+      style: [getPictureStyleDescription(metaSources.value, classNames)]
+    };
+  }
+  return {};
+});
+
+try {
+  metaSources.value = await sourceList.getMeta($img, $booster);
+} catch (error) {
+  console.error(error);
+}
 </script>
 
 <style lang="postcss" scoped>
diff --git a/src/runtime/components/BoosterPicture/Source.vue b/src/runtime/components/BoosterPicture/Source.vue
index 02ad36d1c9..54e0b88d41 100644
--- a/src/runtime/components/BoosterPicture/Source.vue
+++ b/src/runtime/components/BoosterPicture/Source.vue
@@ -7,68 +7,54 @@
   />
 </template>
 
-<script>
-import { useNuxtApp, useHead, useImage, computed } from '#imports';
+<script setup>
+import { useNuxtApp, useHead, useImage } from '#imports';
 import { getCrossorigin } from '#booster/utils/browser';
 import Source from '#booster/components/BoosterImage/classes/Source';
 
 const types = new Map([['jpg', 'jpeg']]);
 
-export default {
-  props: {
-    source: {
-      type: Source,
-      required: true
-    },
-
-    crossorigin: {
-      type: [Boolean, String],
-      default() {
-        return null;
-      },
-      validator: val =>
-        ['anonymous', 'use-credentials', '', true, false].includes(val)
-    }
-  },
-
-  setup(props) {
-    const $img = useImage();
-    const $booster = useNuxtApp().$booster;
-    const config = $img.getSizes(props.source.src, {
-      sizes: props.source.sizes,
-      modifiers: props.source.getModifiers(),
-      ...props.source.getOptions($booster)
-    });
-
-    const resolvedCrossorigin = computed(() => {
-      return getCrossorigin(props.crossorigin || $booster.crossorigin);
-    });
-
-    const imageSource = new Source(props.source);
-    useHead({
-      link: [
-        config &&
-          imageSource.preload &&
-          (import.meta.server || process.env.prerender) &&
-          imageSource.getPreload(
-            config.srcset,
-            config.sizes,
-            resolvedCrossorigin
-          )
-      ].filter(Boolean)
-    });
-
-    return { config, resolvedCrossorigin };
+const $props = defineProps({
+  source: {
+    type: Source,
+    required: true
   },
 
-  computed: {
-    srcset() {
-      return this.config.srcset || this.config.src;
+  crossorigin: {
+    type: [Boolean, String],
+    default() {
+      return null;
     },
-
-    type() {
-      return `image/${types.get(this.source.format) || this.source.format}`;
-    }
+    validator: val =>
+      ['anonymous', 'use-credentials', '', true, false].includes(val)
   }
-};
+});
+
+const $img = useImage();
+const $booster = useNuxtApp().$booster;
+const config = $img.getSizes($props.source.src, {
+  sizes: $props.source.sizes,
+  modifiers: $props.source.getModifiers(),
+  ...$props.source.getOptions($booster)
+});
+
+const srcset = ref(config.srcset || config.src);
+const type = ref(
+  `image/${types.get($props.source.format) || $props.source.format}`
+);
+
+const resolvedCrossorigin = ref(
+  getCrossorigin($props.crossorigin || $booster.crossorigin)
+);
+
+const imageSource = new Source($props.source);
+
+useHead({
+  link: [
+    config &&
+      imageSource.preload &&
+      (import.meta.server || process.env.prerender) &&
+      imageSource.getPreload(srcset, config.sizes, resolvedCrossorigin)
+  ].filter(Boolean)
+});
 </script>
diff --git a/src/runtime/utils/description.js b/src/runtime/utils/description.js
index 87b6309f5a..26bff2ec28 100644
--- a/src/runtime/utils/description.js
+++ b/src/runtime/utils/description.js
@@ -1,12 +1,11 @@
 import { minify } from './string';
 import { toHashHex } from '#booster/utils/string';
-import Source from '#booster/components/BoosterImage/classes/Source';
 
-export function getImageStyleDescription(meta, className) {
+export function getImageStyleDescription(source) {
   return {
-    key: className,
+    key: source.className,
     type: 'text/css',
-    children: minify(new Source(meta.value).style)
+    children: minify(source.style)
   };
 }
 
diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index d2c1a084a9..e9b2966ea9 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -4,7 +4,15 @@ import vFont from '#booster/directives/vFont';
 import { isSupportedBrowser } from '#booster/utils/browser';
 import FontList from '#booster/classes/FontList';
 import { useNuxtApp, useBoosterHead, useRequestHeaders, useRequestURL, useRequestFetch } from '#imports';
-import './fonts.css';
+import './fonts.css';`;
+
+  if (options.mode !== 'client') {
+    code += `
+import NodeCache from 'node-cache';
+`;
+  }
+
+  code += `
 
 export default defineNuxtPlugin({
   name: 'booster-plugin',
@@ -44,7 +52,13 @@ export default defineNuxtPlugin({
   }
 });
 
+`;
 
+  if (options.mode === 'client') {
+    code += `
+const dimensionCache = new Map();`;
+  } else {
+    code += `
 function fetchRetry(url, options, retries = 3, delay = 300) {
   return fetch(url, options).catch(function (error) {
     if (retries <= 0) throw error;
@@ -52,30 +66,36 @@ function fetchRetry(url, options, retries = 3, delay = 300) {
   });
 }
 
-const dimensionCache = {};
-async function getImageSize (src) {
+const dimensionCache = new NodeCache({ stdTTL: 60 * 60 * 24, checkperiod: 60 * 60 * 1, useClones: false });`;
+  }
 
+  code += `
+async function getImageSize (src) {
 `;
 
   if (options.mode === 'client') {
-    code += `  const { width, height } = await new Promise((resolve) => {
-    const img = new global.Image();
-    img.onload = () => resolve({width: img.naturalWidth, height: img.naturalHeight});
-    img.src = src;
-  });
-  return {width, height};`;
+    code += `
+
+  if (!dimensionCache.has(src)) {
+    const { width, height } = await new Promise((resolve) => {
+      const img = new global.Image();
+      img.onload = () => resolve({width: img.naturalWidth, height: img.naturalHeight});
+      img.src = src;
+    });
+    dimensionCache.set(src, { width, height });
+  }
+  return dimensionCache.get(src)`;
   } else {
     code += `
   const isNitroPrerender = 'x-nitro-prerender' in useRequestHeaders()
 
   try {
-    // Nur im Generate!
     let url = src;
     if (isNitroPrerender) {
       url = url.replace(useRequestURL().origin, '');
     }
 
-    if (!isNitroPrerender || !(url in dimensionCache)) {
+    if (!dimensionCache.has(url)) {
       const blob = await useRequestFetch()(url);
       const { imageMeta } = await import('image-meta').then(
         module => module.default || module
@@ -85,15 +105,10 @@ async function getImageSize (src) {
         Buffer.from(await res.arrayBuffer())
       );
       const dimension = await imageMeta(data);
-
-      if (isNitroPrerender) {
-        dimensionCache[url] = dimension;
-      } else {
-        return dimension;
-      }
+      dimensionCache.set(url, dimension);
     }
 
-    return dimensionCache[url];
+    return dimensionCache.get(url);
   } catch (error) {
     console.error('getImageSize: ' + src, error);
     return { width: 0, height: 0 };

From 6a3dcece3c6c5ba41e2544fa68a135a00d018902 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sat, 17 Aug 2024 18:11:04 +0200
Subject: [PATCH 02/13] chore(package): remove vue-tsc

---
 package-lock.json | 33 +++++++++++++++++++++++++++------
 package.json      |  1 -
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 918d7b2a2a..87c9a981e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -58,7 +58,6 @@
         "vite-svg-loader": "5.1.0",
         "vitepress": "1.3.2",
         "vitest": "2.0.5",
-        "vue-tsc": "^2.0.29",
         "wicg-inert": "3.1.3"
       }
     },
@@ -7767,6 +7766,8 @@
       "integrity": "sha512-JAYeJvYQQROmVRtSBIczaPjP3DX4QW1fOqW1Ebs0d3Y3EwSNRglz03dSv0Dm61dzd0Yx3WgTW3hndDnTQqgmyg==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/source-map": "2.4.0-alpha.18"
       }
@@ -7776,7 +7777,9 @@
       "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.18.tgz",
       "integrity": "sha512-MTeCV9MUwwsH0sNFiZwKtFrrVZUK6p8ioZs3xFzHc2cvDXHWlYN3bChdQtwKX+FY2HG6H3CfAu1pKijolzIQ8g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/@volar/typescript": {
       "version": "2.4.0-alpha.18",
@@ -7784,6 +7787,8 @@
       "integrity": "sha512-sXh5Y8sqGUkgxpMWUGvRXggxYHAVxg0Pa1C42lQZuPDrW6vHJPR0VCK8Sr7WJsAW530HuNQT/ZIskmXtxjybMQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/language-core": "2.4.0-alpha.18",
         "path-browserify": "^1.0.1",
@@ -7978,6 +7983,8 @@
       "integrity": "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -8075,6 +8082,8 @@
       "integrity": "sha512-o2qz9JPjhdoVj8D2+9bDXbaI4q2uZTHQA/dbyZT4Bj1FR9viZxDJnLcKVHfxdn6wsOzRgpqIzJEEmSSvgMvDTQ==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/language-core": "~2.4.0-alpha.18",
         "@vue/compiler-dom": "^3.4.0",
@@ -10145,7 +10154,9 @@
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
       "integrity": "sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/concat-map": {
       "version": "0.0.1",
@@ -10905,7 +10916,9 @@
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/debounce": {
       "version": "1.2.1",
@@ -13850,6 +13863,8 @@
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "bin": {
         "he": "bin/he"
       }
@@ -16485,7 +16500,9 @@
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
       "integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/nanoid": {
       "version": "5.0.7",
@@ -18221,7 +18238,9 @@
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz",
       "integrity": "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "optional": true,
+      "peer": true
     },
     "node_modules/path-exists": {
       "version": "5.0.0",
@@ -25266,6 +25285,8 @@
       "integrity": "sha512-MHhsfyxO3mYShZCGYNziSbc63x7cQ5g9kvijV7dRe1TTXBRLxXyL0FnXWpUF1xII2mJ86mwYpYsUmMwkmerq7Q==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "dependencies": {
         "@volar/typescript": "~2.4.0-alpha.18",
         "@vue/language-core": "2.0.29",
diff --git a/package.json b/package.json
index bf2e1dce02..8e4e16de49 100644
--- a/package.json
+++ b/package.json
@@ -100,7 +100,6 @@
     "vite-svg-loader": "5.1.0",
     "vitepress": "1.3.2",
     "vitest": "2.0.5",
-    "vue-tsc": "^2.0.29",
     "wicg-inert": "3.1.3"
   }
 }

From c7f37cb9aa1f9165d2b377c046ec1e24fa0e2e68 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 17 Aug 2024 16:16:17 +0000
Subject: [PATCH 03/13] chore(release): 3.1.4-next.1 [skip ci]

## [3.1.4-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.3...v3.1.4-next.1) (2024-08-17)

### Bug Fixes

* **image:** optimize getImageSize ([36a3627](https://github.com/basics/nuxt-booster/commit/36a36272ed2811c9cd2dc0f8f7561e1559e89f13))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 046ff8a7b5..931539941b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Project Changelog
 
+## [3.1.4-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.3...v3.1.4-next.1) (2024-08-17)
+
+
+### Bug Fixes
+
+* **image:** optimize getImageSize ([36a3627](https://github.com/basics/nuxt-booster/commit/36a36272ed2811c9cd2dc0f8f7561e1559e89f13))
+
 ## [3.1.3](https://github.com/basics/nuxt-booster/compare/v3.1.2...v3.1.3) (2024-08-13)
 
 
diff --git a/package-lock.json b/package-lock.json
index 87c9a981e8..7975f9847c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.3",
+  "version": "3.1.4-next.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-booster",
-      "version": "3.1.3",
+      "version": "3.1.4-next.1",
       "license": "MIT",
       "dependencies": {
         "@nuxt/image": "1.7.0",
diff --git a/package.json b/package.json
index 8e4e16de49..96ad30af31 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.3",
+  "version": "3.1.4-next.1",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",

From 2d4d589a036f74d9a90966d1b81b76c3130e293c Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 00:16:37 +0200
Subject: [PATCH 04/13] fix(imports): imrpove imports

---
 package-lock.json                                    | 12 ++++++++++++
 package.json                                         |  1 +
 playground/components/InfoLayer.vue                  |  1 +
 playground/components/PreviewContainer.vue           |  1 +
 playground/components/WeakHardwareOverlay.vue        |  2 +-
 playground/components/base/Button.vue                |  3 +++
 playground/components/base/Headline.vue              |  3 +++
 playground/components/base/LinkList.vue              |  2 ++
 playground/components/elements/LoaderTest.vue        |  3 +++
 playground/components/elements/ScrollItem.vue        |  1 +
 playground/components/fragments/PageHeaderMenu.vue   |  2 ++
 playground/components/modules/ImageText.vue          |  1 +
 playground/components/modules/Stage.vue              |  2 ++
 playground/components/modules/TextFontA.vue          |  3 +++
 playground/components/modules/TextFontB.vue          |  3 +++
 playground/components/modules/VideoVimeo.vue         |  1 +
 playground/components/modules/VideoYoutube.vue       |  1 +
 playground/layouts/default.vue                       |  3 ++-
 playground/nuxt.config.js                            |  4 ++++
 playground/pages/tests/booster-layer/index.vue       |  4 +++-
 .../pages/tests/iframe/components/Critical.vue       |  4 +++-
 playground/pages/tests/iframe/components/Lazy.vue    |  3 ++-
 playground/pages/tests/image/components/Critical.vue |  6 ++++--
 playground/pages/tests/image/components/Lazy.vue     |  6 ++++--
 .../pages/tests/picture/components/Critical.vue      |  6 ++++--
 playground/pages/tests/picture/components/Lazy.vue   |  6 ++++--
 playground/pages/tests/useBoosterHead.vue            |  3 +++
 playground/pages/tests/useBoosterHead/empty-1.vue    |  2 ++
 playground/pages/tests/useBoosterHead/empty-2.vue    |  2 ++
 playground/pages/tests/useBoosterHead/index.vue      |  1 +
 .../pages/tests/v-font-media/components/Critical.vue |  1 +
 .../pages/tests/v-font-media/components/Lazy.vue     |  1 +
 .../pages/tests/v-font/components/Critical.vue       |  1 +
 playground/pages/tests/v-font/components/Lazy.vue    |  1 +
 playground/pages/tests/vimeo/components/Default.vue  |  3 +++
 .../pages/tests/weak-hardware-overlay/index.vue      |  2 ++
 .../pages/tests/youtube/components/Default.vue       |  3 +++
 src/runtime/components/BoosterIframe.vue             |  3 ++-
 src/runtime/components/BoosterImage.vue              |  3 ++-
 src/runtime/components/BoosterImage/Base.vue         |  4 ++--
 src/runtime/components/BoosterLayer.vue              |  3 ++-
 src/runtime/components/BoosterPicture.vue            |  3 ++-
 src/runtime/components/BoosterPicture/Base.vue       | 10 +++-------
 src/runtime/components/BoosterPicture/Source.vue     |  4 +++-
 src/runtime/components/BoosterVimeo/Base.vue         |  3 ++-
 src/runtime/components/BoosterYoutube/Base.vue       |  3 ++-
 src/runtime/components/WeakHardwareOverlay.vue       |  2 +-
 .../composables/useBoosterComponentObserver.js       |  3 ++-
 src/runtime/composables/useBoosterCritical.js        |  9 ++++++++-
 src/runtime/composables/useBoosterFonts.js           | 11 ++---------
 src/runtime/composables/useBoosterHead.js            | 10 ++--------
 src/runtime/composables/useBoosterHydrate.js         |  3 ++-
 52 files changed, 128 insertions(+), 50 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 87c9a981e8..9ca690ec6a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@nuxt/module-builder": "0.8.3",
         "@nuxt/webpack-builder": "3.12.4",
         "@types/node": "20.15.0",
+        "@types/vue": "^2.0.0",
         "commitlint": "19.4.0",
         "eslint": "9.9.0",
         "eslint-config-prettier": "9.1.0",
@@ -7131,6 +7132,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/vue": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/vue/-/vue-2.0.0.tgz",
+      "integrity": "sha512-WDElkBv/o4lVwu6wYHB06AXs4Xo2fwDjJUpvPRc1QQdzkUSiGFjrYuSCy8raxLE5FObgKq8ND7R5gSZTFLK60w==",
+      "deprecated": "This is a stub types definition for vuejs (https://github.com/vuejs/vue). vuejs provides its own type definitions, so you don't need @types/vue installed!",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "vue": "*"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
diff --git a/package.json b/package.json
index 8e4e16de49..daf14c215d 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "@nuxt/module-builder": "0.8.3",
     "@nuxt/webpack-builder": "3.12.4",
     "@types/node": "20.15.0",
+    "@types/vue": "^2.0.0",
     "commitlint": "19.4.0",
     "eslint": "9.9.0",
     "eslint-config-prettier": "9.1.0",
diff --git a/playground/components/InfoLayer.vue b/playground/components/InfoLayer.vue
index edd98ffcfa..b63a4d5651 100644
--- a/playground/components/InfoLayer.vue
+++ b/playground/components/InfoLayer.vue
@@ -33,6 +33,7 @@
 import { getStyleDescription } from '#booster/utils/description';
 import BoosterLayer from '#booster/components/BoosterLayer';
 import BaseButton from '@/components/base/Button';
+import { useBoosterFonts, useHead } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 
diff --git a/playground/components/PreviewContainer.vue b/playground/components/PreviewContainer.vue
index 0ddca0329b..793b477060 100644
--- a/playground/components/PreviewContainer.vue
+++ b/playground/components/PreviewContainer.vue
@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
 </script>
 
diff --git a/playground/components/WeakHardwareOverlay.vue b/playground/components/WeakHardwareOverlay.vue
index 17687d5879..37f81ac26d 100644
--- a/playground/components/WeakHardwareOverlay.vue
+++ b/playground/components/WeakHardwareOverlay.vue
@@ -11,8 +11,8 @@
 
 <script setup>
 import BoosterWeakHardwareOverlay from '#booster/components/WeakHardwareOverlay';
-
 import BaseButton from '@/components/base/Button';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({
diff --git a/playground/components/base/Button.vue b/playground/components/base/Button.vue
index ace5152fa0..f4975a5b03 100644
--- a/playground/components/base/Button.vue
+++ b/playground/components/base/Button.vue
@@ -10,6 +10,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { computed, useAttrs } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 defineEmits(['click']);
 
diff --git a/playground/components/base/Headline.vue b/playground/components/base/Headline.vue
index 571184604e..fbafa36857 100644
--- a/playground/components/base/Headline.vue
+++ b/playground/components/base/Headline.vue
@@ -5,6 +5,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { computed } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 
 const $props = defineProps({
diff --git a/playground/components/base/LinkList.vue b/playground/components/base/LinkList.vue
index 4e9b4d37fa..407680a0d7 100644
--- a/playground/components/base/LinkList.vue
+++ b/playground/components/base/LinkList.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+
 const { $getFont } = useBoosterFonts();
 
 defineProps({
diff --git a/playground/components/elements/LoaderTest.vue b/playground/components/elements/LoaderTest.vue
index e6562bb9a2..23841d73ba 100644
--- a/playground/components/elements/LoaderTest.vue
+++ b/playground/components/elements/LoaderTest.vue
@@ -5,6 +5,9 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+import { useBoosterCritical } from '#imports';
+
 const { isCritical } = useBoosterCritical();
 const active = ref(false);
 
diff --git a/playground/components/elements/ScrollItem.vue b/playground/components/elements/ScrollItem.vue
index fa9e430057..75bb6cfcde 100644
--- a/playground/components/elements/ScrollItem.vue
+++ b/playground/components/elements/ScrollItem.vue
@@ -5,6 +5,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
 defineProps({
   font: {
diff --git a/playground/components/fragments/PageHeaderMenu.vue b/playground/components/fragments/PageHeaderMenu.vue
index ca1192d369..093a563b6d 100644
--- a/playground/components/fragments/PageHeaderMenu.vue
+++ b/playground/components/fragments/PageHeaderMenu.vue
@@ -50,6 +50,8 @@
 <script setup>
 import Headline from '@/components/base/Headline';
 import LinkList from '@/components/base/LinkList';
+import { useRoute } from 'vue-router';
+import { ref, computed, watch, onMounted } from 'vue';
 
 const props = defineProps({
   modelValue: {
diff --git a/playground/components/modules/ImageText.vue b/playground/components/modules/ImageText.vue
index 6613e9fbb9..bc7f5332b3 100644
--- a/playground/components/modules/ImageText.vue
+++ b/playground/components/modules/ImageText.vue
@@ -26,6 +26,7 @@
 
 <script setup>
 import BoosterPicture from '#booster/components/BoosterPicture';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({
diff --git a/playground/components/modules/Stage.vue b/playground/components/modules/Stage.vue
index f4d586aaf7..fc99796830 100644
--- a/playground/components/modules/Stage.vue
+++ b/playground/components/modules/Stage.vue
@@ -32,6 +32,8 @@
 import BoosterPicture from '#booster/components/BoosterPicture';
 import BoosterImage from '#booster/components/BoosterImage';
 import SvgChevronDown from '@/assets/svg/chevron-down.svg';
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
 
 const { $getFont } = useBoosterFonts();
 
diff --git a/playground/components/modules/TextFontA.vue b/playground/components/modules/TextFontA.vue
index 2480464f53..37c0f95dc2 100644
--- a/playground/components/modules/TextFontA.vue
+++ b/playground/components/modules/TextFontA.vue
@@ -20,6 +20,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
 
diff --git a/playground/components/modules/TextFontB.vue b/playground/components/modules/TextFontB.vue
index 3a0a335df9..95fb0943c4 100644
--- a/playground/components/modules/TextFontB.vue
+++ b/playground/components/modules/TextFontB.vue
@@ -20,6 +20,9 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
+import { ref, onMounted } from 'vue';
+
 const { $getFont } = useBoosterFonts();
 const ready = ref(false);
 defineProps({
diff --git a/playground/components/modules/VideoVimeo.vue b/playground/components/modules/VideoVimeo.vue
index af43519818..1e4365516e 100644
--- a/playground/components/modules/VideoVimeo.vue
+++ b/playground/components/modules/VideoVimeo.vue
@@ -14,6 +14,7 @@
 <script setup>
 import BoosterVimeo from '#booster/components/BoosterVimeo';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({
diff --git a/playground/components/modules/VideoYoutube.vue b/playground/components/modules/VideoYoutube.vue
index e1b34c0316..78f534c9bb 100644
--- a/playground/components/modules/VideoYoutube.vue
+++ b/playground/components/modules/VideoYoutube.vue
@@ -12,6 +12,7 @@
 <script setup>
 import BoosterYoutube from '#booster/components/BoosterYoutube';
 import WeakHardwareOverlay from '@/components/WeakHardwareOverlay';
+import { useBoosterFonts } from '#imports';
 
 const { $getFont } = useBoosterFonts();
 defineProps({
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index eafb84f474..2772822df8 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -11,7 +11,8 @@
 
 <script setup>
 import 'wicg-inert';
-import { useBoosterHydrate } from '#imports';
+import { useBoosterHydrate, useRoute, useHead } from '#imports';
+import { defineAsyncComponent, ref, computed } from 'vue';
 const hydrate = useBoosterHydrate();
 
 const InfoLayer = defineAsyncComponent(() => import('@/components/InfoLayer'));
diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
index b6be340c1d..5d7e244ddf 100644
--- a/playground/nuxt.config.js
+++ b/playground/nuxt.config.js
@@ -23,6 +23,10 @@ export default defineNuxtConfig(async () => {
 
     ssr: true,
 
+    imports: {
+      autoImport: false
+    },
+
     runtimeConfig: {
       public: {
         githubRepoUrl: repository.url.replace(/^git\+(.*)\.git$/, '$1'),
diff --git a/playground/pages/tests/booster-layer/index.vue b/playground/pages/tests/booster-layer/index.vue
index 21a04420cc..dfe9bd0fe5 100644
--- a/playground/pages/tests/booster-layer/index.vue
+++ b/playground/pages/tests/booster-layer/index.vue
@@ -6,9 +6,11 @@
 </template>
 
 <script setup>
-import BoosterLayer from '#booster/components/BoosterLayer';
+import { ref, onMounted } from 'vue';
 import { useBoosterHydrate } from '#imports';
 
+import BoosterLayer from '#booster/components/BoosterLayer';
+
 const hydrate = useBoosterHydrate();
 
 const ready = ref(false);
diff --git a/playground/pages/tests/iframe/components/Critical.vue b/playground/pages/tests/iframe/components/Critical.vue
index 8de761c1af..663b4149ef 100644
--- a/playground/pages/tests/iframe/components/Critical.vue
+++ b/playground/pages/tests/iframe/components/Critical.vue
@@ -10,8 +10,10 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import DefaultIframe from '#booster/components/BoosterIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const iframeSrc = 'https://basics.github.io/nuxt-booster/playground/';
+const iframeSrc = ref('https://basics.github.io/nuxt-booster/playground/');
 </script>
diff --git a/playground/pages/tests/iframe/components/Lazy.vue b/playground/pages/tests/iframe/components/Lazy.vue
index 5f2fd56b5a..fa63e7e67e 100644
--- a/playground/pages/tests/iframe/components/Lazy.vue
+++ b/playground/pages/tests/iframe/components/Lazy.vue
@@ -10,8 +10,9 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import DefaultIframe from '#booster/components/BoosterIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const iframeSrc = 'https://basics.github.io/nuxt-booster/playground/';
+const iframeSrc = ref('https://basics.github.io/nuxt-booster/playground/');
 </script>
diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
index 1dff2838a5..9496c95164 100644
--- a/playground/pages/tests/image/components/Critical.vue
+++ b/playground/pages/tests/image/components/Critical.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterImage from '#booster/components/BoosterImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const image = {
+const image = ref({
   title: 'Critical - Image',
   source: {
     format: 'jpg',
@@ -29,5 +31,5 @@ const image = {
       xxl: '100vw'
     }
   }
-};
+});
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
index c5b8f1a6c7..a6ce50c9fb 100644
--- a/playground/pages/tests/image/components/Lazy.vue
+++ b/playground/pages/tests/image/components/Lazy.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterImage from '#booster/components/BoosterImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const image = {
+const image = ref({
   title: 'Lazy - Image',
   source: {
     src: '/img/lazy.jpg',
@@ -28,5 +30,5 @@ const image = {
       xxl: '100vw'
     }
   }
-};
+});
 </script>
diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue
index 94c48304f7..a38c4f5020 100644
--- a/playground/pages/tests/picture/components/Critical.vue
+++ b/playground/pages/tests/picture/components/Critical.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterPicture from '#booster/components/BoosterPicture';
 import PreviewContainer from '@/components/PreviewContainer';
 
-const picture = {
+const picture = ref({
   title: 'Critical',
   sources: [
     {
@@ -30,5 +32,5 @@ const picture = {
       }
     }
   ]
-};
+});
 </script>
diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue
index c96fedd2d7..17fc7ce476 100644
--- a/playground/pages/tests/picture/components/Lazy.vue
+++ b/playground/pages/tests/picture/components/Lazy.vue
@@ -10,10 +10,12 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
+
 import BoosterPicture from '#booster/components/BoosterPicture';
 import OrganismPreviewContainer from '@/components/PreviewContainer';
 
-const picture = {
+const picture = ref({
   title: 'Lazy',
   sources: [
     {
@@ -30,5 +32,5 @@ const picture = {
       }
     }
   ]
-};
+});
 </script>
diff --git a/playground/pages/tests/useBoosterHead.vue b/playground/pages/tests/useBoosterHead.vue
index 6fc2e8a3b5..fc9330826f 100644
--- a/playground/pages/tests/useBoosterHead.vue
+++ b/playground/pages/tests/useBoosterHead.vue
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { definePageMeta, useRuntimeConfig } from '#imports';
+import { ref } from 'vue';
+
 const {
   public: { isTest }
 } = useRuntimeConfig();
diff --git a/playground/pages/tests/useBoosterHead/empty-1.vue b/playground/pages/tests/useBoosterHead/empty-1.vue
index cd9f5b7029..11ef4925a4 100644
--- a/playground/pages/tests/useBoosterHead/empty-1.vue
+++ b/playground/pages/tests/useBoosterHead/empty-1.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 const ready = ref(false);
 onMounted(() => {
   ready.value = true;
diff --git a/playground/pages/tests/useBoosterHead/empty-2.vue b/playground/pages/tests/useBoosterHead/empty-2.vue
index 8e1be5fdb6..53c290d334 100644
--- a/playground/pages/tests/useBoosterHead/empty-2.vue
+++ b/playground/pages/tests/useBoosterHead/empty-2.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 const ready = ref(false);
 onMounted(() => {
   ready.value = true;
diff --git a/playground/pages/tests/useBoosterHead/index.vue b/playground/pages/tests/useBoosterHead/index.vue
index 52bff61401..0fe1b41d50 100644
--- a/playground/pages/tests/useBoosterHead/index.vue
+++ b/playground/pages/tests/useBoosterHead/index.vue
@@ -34,6 +34,7 @@
 </template>
 
 <script setup>
+import { ref } from 'vue';
 import BaseHeadline from '@/components/base/Headline';
 
 const show = ref(false);
diff --git a/playground/pages/tests/v-font-media/components/Critical.vue b/playground/pages/tests/v-font-media/components/Critical.vue
index 16bd5bf3bb..50f0fb065b 100644
--- a/playground/pages/tests/v-font-media/components/Critical.vue
+++ b/playground/pages/tests/v-font-media/components/Critical.vue
@@ -96,6 +96,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/pages/tests/v-font-media/components/Lazy.vue b/playground/pages/tests/v-font-media/components/Lazy.vue
index 15b1b8cbef..2f4c90b8e0 100644
--- a/playground/pages/tests/v-font-media/components/Lazy.vue
+++ b/playground/pages/tests/v-font-media/components/Lazy.vue
@@ -103,6 +103,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/pages/tests/v-font/components/Critical.vue b/playground/pages/tests/v-font/components/Critical.vue
index c3e8d6faab..465d79dd54 100644
--- a/playground/pages/tests/v-font/components/Critical.vue
+++ b/playground/pages/tests/v-font/components/Critical.vue
@@ -74,6 +74,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/pages/tests/v-font/components/Lazy.vue b/playground/pages/tests/v-font/components/Lazy.vue
index 0589462cd2..b6c77af838 100644
--- a/playground/pages/tests/v-font/components/Lazy.vue
+++ b/playground/pages/tests/v-font/components/Lazy.vue
@@ -84,6 +84,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 import PreviewContainer from '@/components/PreviewContainer';
 
 const { $getFont } = useBoosterFonts();
diff --git a/playground/pages/tests/vimeo/components/Default.vue b/playground/pages/tests/vimeo/components/Default.vue
index 79f4530b49..907ba6f28b 100644
--- a/playground/pages/tests/vimeo/components/Default.vue
+++ b/playground/pages/tests/vimeo/components/Default.vue
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { useBoosterCritical } from '#imports';
+
 import DefaultVimeo from '#booster/components/BoosterVimeo';
 import PreviewContainer from '@/components/PreviewContainer';
 
diff --git a/playground/pages/tests/weak-hardware-overlay/index.vue b/playground/pages/tests/weak-hardware-overlay/index.vue
index 99b1b7e41c..2deb75499b 100644
--- a/playground/pages/tests/weak-hardware-overlay/index.vue
+++ b/playground/pages/tests/weak-hardware-overlay/index.vue
@@ -9,6 +9,8 @@
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue';
+
 import BoosterLayer from '#booster/components/BoosterLayer';
 import BoosterWeakHardwareOverlay from '#booster/components/WeakHardwareOverlay';
 
diff --git a/playground/pages/tests/youtube/components/Default.vue b/playground/pages/tests/youtube/components/Default.vue
index 17a8fbe10d..c95a3db615 100644
--- a/playground/pages/tests/youtube/components/Default.vue
+++ b/playground/pages/tests/youtube/components/Default.vue
@@ -12,6 +12,9 @@
 </template>
 
 <script setup>
+import { computed } from 'vue';
+import { useBoosterCritical } from '#imports';
+
 import DefaultYoutube from '#booster/components/BoosterYoutube';
 import PreviewContainer from '@/components/PreviewContainer';
 
diff --git a/src/runtime/components/BoosterIframe.vue b/src/runtime/components/BoosterIframe.vue
index ee536aaacc..24d43eaf3b 100644
--- a/src/runtime/components/BoosterIframe.vue
+++ b/src/runtime/components/BoosterIframe.vue
@@ -10,7 +10,8 @@
 </template>
 
 <script setup>
-import { ref, watch, useBoosterComponentObserver } from '#imports';
+import { useBoosterComponentObserver } from '#imports';
+import { ref, watch } from 'vue';
 
 const props = defineProps({
   src: {
diff --git a/src/runtime/components/BoosterImage.vue b/src/runtime/components/BoosterImage.vue
index 496465d257..79df1bdb8d 100644
--- a/src/runtime/components/BoosterImage.vue
+++ b/src/runtime/components/BoosterImage.vue
@@ -1,5 +1,6 @@
 <script>
-import { useBoosterCritical, h } from '#imports';
+import { useBoosterCritical } from '#imports';
+import { h } from 'vue';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterImage from '#booster/components/BoosterImage/Base';
diff --git a/src/runtime/components/BoosterImage/Base.vue b/src/runtime/components/BoosterImage/Base.vue
index 10786d1cdf..37894f6bad 100644
--- a/src/runtime/components/BoosterImage/Base.vue
+++ b/src/runtime/components/BoosterImage/Base.vue
@@ -23,12 +23,12 @@ import { getCrossorigin } from '#booster/utils/browser';
 import Source from '#booster/components/BoosterImage/classes/Source';
 import {
   useBoosterCritical,
-  ref,
   useImage,
   useNuxtApp,
   useHead,
-  computed
+  useAttrs
 } from '#imports';
+import { ref, computed, markRaw } from 'vue';
 
 defineOptions({
   inheritAttrs: false
diff --git a/src/runtime/components/BoosterLayer.vue b/src/runtime/components/BoosterLayer.vue
index 987aae3c30..79fc44c740 100644
--- a/src/runtime/components/BoosterLayer.vue
+++ b/src/runtime/components/BoosterLayer.vue
@@ -45,7 +45,8 @@
 
 <script setup>
 import { getStyleDescription } from '#booster/utils/description';
-import { useHead, ref, onMounted } from '#imports';
+import { useHead } from '#imports';
+import { ref, onMounted } from 'vue';
 
 const isServer = ref(true);
 
diff --git a/src/runtime/components/BoosterPicture.vue b/src/runtime/components/BoosterPicture.vue
index febc83e9aa..ac06acf8b9 100644
--- a/src/runtime/components/BoosterPicture.vue
+++ b/src/runtime/components/BoosterPicture.vue
@@ -1,5 +1,6 @@
 <script>
-import { useBoosterCritical, h } from '#imports';
+import { useBoosterCritical } from '#imports';
+import { h } from 'vue';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterPicture from '#booster/components/BoosterPicture/Base';
diff --git a/src/runtime/components/BoosterPicture/Base.vue b/src/runtime/components/BoosterPicture/Base.vue
index 7f492ac16d..5f6e1742b0 100644
--- a/src/runtime/components/BoosterPicture/Base.vue
+++ b/src/runtime/components/BoosterPicture/Base.vue
@@ -21,13 +21,9 @@
 <script setup>
 import { getPictureStyleDescription } from '../../utils/description';
 import { crossorigin as validatorCrossorigin } from '../../utils/validators';
-import {
-  useBoosterCritical,
-  ref,
-  useImage,
-  useHead,
-  useNuxtApp
-} from '#imports';
+import { useBoosterCritical, useImage, useHead, useNuxtApp } from '#imports';
+import { ref, computed } from 'vue';
+
 import BaseImage from '#booster/components/BoosterImage/Base';
 import SourceList from '#booster/components/BoosterPicture/classes/SourceList';
 import PictureSource from '#booster/components/BoosterPicture/Source';
diff --git a/src/runtime/components/BoosterPicture/Source.vue b/src/runtime/components/BoosterPicture/Source.vue
index 54e0b88d41..fbfe9e819e 100644
--- a/src/runtime/components/BoosterPicture/Source.vue
+++ b/src/runtime/components/BoosterPicture/Source.vue
@@ -8,8 +8,10 @@
 </template>
 
 <script setup>
-import { useNuxtApp, useHead, useImage } from '#imports';
 import { getCrossorigin } from '#booster/utils/browser';
+import { useNuxtApp, useHead, useImage } from '#imports';
+import { ref } from 'vue';
+
 import Source from '#booster/components/BoosterImage/classes/Source';
 
 const types = new Map([['jpg', 'jpeg']]);
diff --git a/src/runtime/components/BoosterVimeo/Base.vue b/src/runtime/components/BoosterVimeo/Base.vue
index 4abbb4bcb4..878f5eee29 100644
--- a/src/runtime/components/BoosterVimeo/Base.vue
+++ b/src/runtime/components/BoosterVimeo/Base.vue
@@ -28,7 +28,8 @@
 </template>
 
 <script>
-import { useHead, markRaw, computed, ref, useBoosterCritical } from '#imports';
+import { useHead, useBoosterCritical } from '#imports';
+import { ref, computed, markRaw } from 'vue';
 
 import DefaultButton from '../Button';
 import { load, ready } from './utils/loader';
diff --git a/src/runtime/components/BoosterYoutube/Base.vue b/src/runtime/components/BoosterYoutube/Base.vue
index 7967ff01d6..6b695bf76a 100644
--- a/src/runtime/components/BoosterYoutube/Base.vue
+++ b/src/runtime/components/BoosterYoutube/Base.vue
@@ -20,7 +20,8 @@
 </template>
 
 <script>
-import { useHead, ref, computed, markRaw, useBoosterCritical } from '#imports';
+import { useHead, useBoosterCritical } from '#imports';
+import { ref, computed, markRaw } from 'vue';
 
 import DefaultButton from '../Button';
 import { load } from './utils/loader';
diff --git a/src/runtime/components/WeakHardwareOverlay.vue b/src/runtime/components/WeakHardwareOverlay.vue
index 0e5bed3e4b..1554eb624a 100644
--- a/src/runtime/components/WeakHardwareOverlay.vue
+++ b/src/runtime/components/WeakHardwareOverlay.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from '#imports';
+import { ref, onMounted } from 'vue';
 
 const isServer = ref(true);
 
diff --git a/src/runtime/composables/useBoosterComponentObserver.js b/src/runtime/composables/useBoosterComponentObserver.js
index dd69b2340c..3a5feae011 100644
--- a/src/runtime/composables/useBoosterComponentObserver.js
+++ b/src/runtime/composables/useBoosterComponentObserver.js
@@ -1,5 +1,6 @@
 import { getElementObserver } from '#booster/classes/intersection';
-import { useBoosterCritical, ref, onMounted } from '#imports';
+import { useBoosterCritical } from '#imports';
+import { onMounted, ref } from 'vue';
 
 export default function (options) {
   const el = ref(null);
diff --git a/src/runtime/composables/useBoosterCritical.js b/src/runtime/composables/useBoosterCritical.js
index 1e0c9e9129..bd63067ae2 100644
--- a/src/runtime/composables/useBoosterCritical.js
+++ b/src/runtime/composables/useBoosterCritical.js
@@ -1,7 +1,14 @@
-import { useAttrs, provide, inject, ref, computed } from '#imports';
+import { useAttrs, provide, inject, ref, computed } from 'vue';
 
 const criticalContextKey = Symbol('criticalContext');
 
+/**
+ *
+ * @param {*} param0
+ * @returns {
+ * isCritical: import('vue').ComputedRef<boolean>,}
+ *
+ */
 export default function ({ critical } = {}) {
   const attrs = useAttrs();
 
diff --git a/src/runtime/composables/useBoosterFonts.js b/src/runtime/composables/useBoosterFonts.js
index 2fffa16bec..ae27ac0be3 100644
--- a/src/runtime/composables/useBoosterFonts.js
+++ b/src/runtime/composables/useBoosterFonts.js
@@ -1,13 +1,6 @@
 import FontCollection from '#booster/classes/FontCollection';
-
-import {
-  useBoosterCritical,
-  useBoosterConfig,
-  useNuxtApp,
-  nextTick,
-  onBeforeUnmount,
-  reactive
-} from '#imports';
+import { useBoosterCritical, useBoosterConfig, useNuxtApp } from '#imports';
+import { reactive, nextTick, onBeforeUnmount } from 'vue';
 
 export default function (context) {
   const { isCritical, critical } = useBoosterCritical(context);
diff --git a/src/runtime/composables/useBoosterHead.js b/src/runtime/composables/useBoosterHead.js
index f1fb58594d..b34c92d9b9 100644
--- a/src/runtime/composables/useBoosterHead.js
+++ b/src/runtime/composables/useBoosterHead.js
@@ -1,12 +1,6 @@
 import { logDebug } from '../utils/log';
-import {
-  nextTick,
-  injectHead,
-  useNuxtApp,
-  useRuntimeConfig,
-  ref,
-  watch
-} from '#imports';
+import { injectHead, useNuxtApp, useRuntimeConfig } from '#imports';
+import { ref, watch, nextTick } from 'vue';
 
 export default function () {
   const head = injectHead();
diff --git a/src/runtime/composables/useBoosterHydrate.js b/src/runtime/composables/useBoosterHydrate.js
index 11424dd6bc..f8c4ef190e 100644
--- a/src/runtime/composables/useBoosterHydrate.js
+++ b/src/runtime/composables/useBoosterHydrate.js
@@ -1,5 +1,6 @@
 import { hydrateWhenVisible } from 'vue3-lazy-hydration';
-import { defineAsyncComponent, useRuntimeConfig } from '#imports';
+import { useRuntimeConfig } from '#imports';
+import { defineAsyncComponent } from 'vue';
 
 export default function () {
   return hydrate;

From e5c263e74bf78f62590ab7dc44d13e4d8ffd8dcc Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sat, 17 Aug 2024 22:22:43 +0000
Subject: [PATCH 05/13] chore(release): 3.1.4-next.2 [skip ci]

## [3.1.4-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.1...v3.1.4-next.2) (2024-08-17)

### Bug Fixes

* **imports:** imrpove imports ([2d4d589](https://github.com/basics/nuxt-booster/commit/2d4d589a036f74d9a90966d1b81b76c3130e293c))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 931539941b..a0bceadd55 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Project Changelog
 
+## [3.1.4-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.1...v3.1.4-next.2) (2024-08-17)
+
+
+### Bug Fixes
+
+* **imports:** imrpove imports ([2d4d589](https://github.com/basics/nuxt-booster/commit/2d4d589a036f74d9a90966d1b81b76c3130e293c))
+
 ## [3.1.4-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.3...v3.1.4-next.1) (2024-08-17)
 
 
diff --git a/package-lock.json b/package-lock.json
index b370ad24e3..50522b0414 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.1",
+  "version": "3.1.4-next.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-booster",
-      "version": "3.1.4-next.1",
+      "version": "3.1.4-next.2",
       "license": "MIT",
       "dependencies": {
         "@nuxt/image": "1.7.0",
diff --git a/package.json b/package.json
index ada3a8279c..3b88a9f61d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.1",
+  "version": "3.1.4-next.2",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",

From 389b23e55aa35163b68ccb1e649bea1dbf081719 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 13:23:26 +0200
Subject: [PATCH 06/13] fix(plugin): added revokeObjectURL

---
 src/tmpl/plugin.tmpl.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index e9b2966ea9..4cac4ffae6 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -105,6 +105,7 @@ async function getImageSize (src) {
         Buffer.from(await res.arrayBuffer())
       );
       const dimension = await imageMeta(data);
+      URL.revokeObjectURL(blob)
       dimensionCache.set(url, dimension);
     }
 

From 88d62aa88af60a26d7c1d1e72fd0a00b0455e8a5 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sun, 18 Aug 2024 11:27:17 +0000
Subject: [PATCH 07/13] chore(release): 3.1.4-next.3 [skip ci]

## [3.1.4-next.3](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.2...v3.1.4-next.3) (2024-08-18)

### Bug Fixes

* **plugin:** added revokeObjectURL ([389b23e](https://github.com/basics/nuxt-booster/commit/389b23e55aa35163b68ccb1e649bea1dbf081719))
---
 CHANGELOG.md      | 7 +++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a0bceadd55..2e8788b8d2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Project Changelog
 
+## [3.1.4-next.3](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.2...v3.1.4-next.3) (2024-08-18)
+
+
+### Bug Fixes
+
+* **plugin:** added revokeObjectURL ([389b23e](https://github.com/basics/nuxt-booster/commit/389b23e55aa35163b68ccb1e649bea1dbf081719))
+
 ## [3.1.4-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.1...v3.1.4-next.2) (2024-08-17)
 
 
diff --git a/package-lock.json b/package-lock.json
index 50522b0414..6dbff79dad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.2",
+  "version": "3.1.4-next.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-booster",
-      "version": "3.1.4-next.2",
+      "version": "3.1.4-next.3",
       "license": "MIT",
       "dependencies": {
         "@nuxt/image": "1.7.0",
diff --git a/package.json b/package.json
index 3b88a9f61d..4dd2f258a4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.2",
+  "version": "3.1.4-next.3",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",

From dfe4c5ad5674ac4796dbdc6fab8612b6a9f2ece7 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 13:28:46 +0200
Subject: [PATCH 08/13] fix(plugin): fix invalid object url

---
 src/tmpl/plugin.tmpl.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index 4cac4ffae6..4f4a710441 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -101,11 +101,14 @@ async function getImageSize (src) {
         module => module.default || module
       );
 
-      const data = await fetchRetry(URL.createObjectURL(blob), undefined, 3).then(async res =>
+      const objectUrl = URL.createObjectURL(blob);
+      const data = await fetchRetry(objectUrl, undefined, 3).then(async res =>
         Buffer.from(await res.arrayBuffer())
       );
       const dimension = await imageMeta(data);
-      URL.revokeObjectURL(blob)
+
+      URL.revokeObjectURL(objectUrl);
+
       dimensionCache.set(url, dimension);
     }
 

From 667223ccd00551095cc64e1ef86de107a12bac7e Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 13:31:08 +0200
Subject: [PATCH 09/13] fix(plugin): remove fetch retry, not necessary for
 object url

---
 src/tmpl/plugin.tmpl.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index 4f4a710441..dd4d6218b5 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -59,13 +59,6 @@ export default defineNuxtPlugin({
 const dimensionCache = new Map();`;
   } else {
     code += `
-function fetchRetry(url, options, retries = 3, delay = 300) {
-  return fetch(url, options).catch(function (error) {
-    if (retries <= 0) throw error;
-    return new Promise(resolve => setTimeout(resolve, delay)).then(() => fetchRetry(url, options, retries - 1, delay));
-  });
-}
-
 const dimensionCache = new NodeCache({ stdTTL: 60 * 60 * 24, checkperiod: 60 * 60 * 1, useClones: false });`;
   }
 
@@ -102,7 +95,7 @@ async function getImageSize (src) {
       );
 
       const objectUrl = URL.createObjectURL(blob);
-      const data = await fetchRetry(objectUrl, undefined, 3).then(async res =>
+      const data = await fetch(objectUrl).then(async res =>
         Buffer.from(await res.arrayBuffer())
       );
       const dimension = await imageMeta(data);

From c8eb13cb5203b0e63991621722c57905b0b2e021 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sun, 18 Aug 2024 11:33:45 +0000
Subject: [PATCH 10/13] chore(release): 3.1.4-next.4 [skip ci]

## [3.1.4-next.4](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.3...v3.1.4-next.4) (2024-08-18)

### Bug Fixes

* **plugin:** fix invalid object url ([dfe4c5a](https://github.com/basics/nuxt-booster/commit/dfe4c5ad5674ac4796dbdc6fab8612b6a9f2ece7))
* **plugin:** remove fetch retry, not necessary for object url ([667223c](https://github.com/basics/nuxt-booster/commit/667223ccd00551095cc64e1ef86de107a12bac7e))
---
 CHANGELOG.md      | 8 ++++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2e8788b8d2..820a8271e9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Project Changelog
 
+## [3.1.4-next.4](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.3...v3.1.4-next.4) (2024-08-18)
+
+
+### Bug Fixes
+
+* **plugin:** fix invalid object url ([dfe4c5a](https://github.com/basics/nuxt-booster/commit/dfe4c5ad5674ac4796dbdc6fab8612b6a9f2ece7))
+* **plugin:** remove fetch retry, not necessary for object url ([667223c](https://github.com/basics/nuxt-booster/commit/667223ccd00551095cc64e1ef86de107a12bac7e))
+
 ## [3.1.4-next.3](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.2...v3.1.4-next.3) (2024-08-18)
 
 
diff --git a/package-lock.json b/package-lock.json
index 6dbff79dad..4995f91b69 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.3",
+  "version": "3.1.4-next.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-booster",
-      "version": "3.1.4-next.3",
+      "version": "3.1.4-next.4",
       "license": "MIT",
       "dependencies": {
         "@nuxt/image": "1.7.0",
diff --git a/package.json b/package.json
index 4dd2f258a4..ef443c2aa0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.3",
+  "version": "3.1.4-next.4",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",

From a6255cc36969c236a097b394a2446085c1cd6802 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 23:18:39 +0200
Subject: [PATCH 11/13] fix(image-size): added option

---
 docs/src/guide/options.md | 16 ++++++++++++++++
 src/module.js             |  3 ++-
 src/tmpl/plugin.tmpl.js   | 10 +++++-----
 src/utils/options.js      |  4 +++-
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/docs/src/guide/options.md b/docs/src/guide/options.md
index ad6018b3ed..a41682f842 100644
--- a/docs/src/guide/options.md
+++ b/docs/src/guide/options.md
@@ -274,6 +274,22 @@ Global option for the [`IntersectionObserver`](https://developer.mozilla.org/en-
  | `component` | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for [`BoosterHydrate`](/guide/usage#import-components).                  | `0%`    |
  | `asset`     | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for all static ressources (`v-font`, `BoosterPicture` & `BoosterImage`). | `0%`    |
 
+## `imageSizeCache`
+
+- Type: `Object`
+  - Default: `{ stdTTL: 3600, checkperiod: 1800 }`
+
+The `imageSizeCache` option is used to cache the image sizes of the `BoosterImage` and `BoosterPicture` components. This reduces the number of requests to the server and speeds up the loading process.
+
+Learn more about the options in the [node-cache documentation](https://www.npmjs.com/package/node-cache#options).
+
+````js
+{
+  stdTTL: 3600,
+  checkperiod: 1800
+}
+````
+
 ## `disableNuxtFontaine`
 
 - Type: `Boolean`
diff --git a/src/module.js b/src/module.js
index dba31e641d..6058cb8d9f 100644
--- a/src/module.js
+++ b/src/module.js
@@ -120,7 +120,8 @@ async function addBuildTemplates(nuxt, options) {
           targetFormats: options.targetFormats,
           crossorigin: getCrossorigin(options.crossorigin),
           supportedBrowserDetector,
-          loader: options.loader
+          loader: options.loader,
+          imageSizeCache: options.imageSizeCache
         });
       },
       filename: MODULE_NAME + `/plugin.${mode}.js`,
diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js
index dd4d6218b5..791a639bfc 100644
--- a/src/tmpl/plugin.tmpl.js
+++ b/src/tmpl/plugin.tmpl.js
@@ -59,7 +59,7 @@ export default defineNuxtPlugin({
 const dimensionCache = new Map();`;
   } else {
     code += `
-const dimensionCache = new NodeCache({ stdTTL: 60 * 60 * 24, checkperiod: 60 * 60 * 1, useClones: false });`;
+const dimensionCache = new NodeCache({  useClones: false, ...${JSON.stringify(options.imageSizeCache)} });`;
   }
 
   code += `
@@ -95,10 +95,10 @@ async function getImageSize (src) {
       );
 
       const objectUrl = URL.createObjectURL(blob);
-      const data = await fetch(objectUrl).then(async res =>
-        Buffer.from(await res.arrayBuffer())
-      );
-      const dimension = await imageMeta(data);
+      const dimension = await fetch(objectUrl)
+      .then(res => res.arrayBuffer())
+      .then(Buffer.from)
+      .then(imageMeta);
 
       URL.revokeObjectURL(objectUrl);
 
diff --git a/src/utils/options.js b/src/utils/options.js
index 843427a1c2..93c1b3eb88 100644
--- a/src/utils/options.js
+++ b/src/utils/options.js
@@ -39,7 +39,9 @@ export function getDefaultOptions() {
     lazyOffset: {
       component: '0%',
       asset: '0%'
-    }
+    },
+
+    imageSizeCache: { stdTTL: 3600, checkperiod: 1800 }
   };
 }
 

From 38a4a99a91c2409ac750b518d851746a709c04a9 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Sun, 18 Aug 2024 23:19:02 +0200
Subject: [PATCH 12/13] fix(components): remove skeleton

---
 src/runtime/components/BoosterImage.vue      | 50 ++++++++---------
 src/runtime/components/BoosterImage/Base.vue |  2 +
 src/runtime/components/BoosterPicture.vue    | 59 ++++++++++----------
 3 files changed, 57 insertions(+), 54 deletions(-)

diff --git a/src/runtime/components/BoosterImage.vue b/src/runtime/components/BoosterImage.vue
index 79df1bdb8d..e2d4e79472 100644
--- a/src/runtime/components/BoosterImage.vue
+++ b/src/runtime/components/BoosterImage.vue
@@ -1,36 +1,36 @@
-<script>
-import { useBoosterCritical } from '#imports';
+<template>
+  <render />
+</template>
+
+<script setup>
+import { useBoosterCritical, useAttrs } from '#imports';
 import { h } from 'vue';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterImage from '#booster/components/BoosterImage/Base';
 
-export default {
-  inheritAttrs: false,
+defineOptions({
+  inheritAttrs: false
+});
 
-  props: {
-    hydrate: {
-      type: Boolean,
-      default: true
-    }
-  },
+const $attrs = useAttrs();
 
-  setup() {
-    const { isCritical } = useBoosterCritical();
-    return {
-      isCritical
-    };
-  },
+const $props = defineProps({
+  hydrate: {
+    type: Boolean,
+    default: true
+  }
+});
 
-  render() {
-    if (!this.hydrate) {
-      return h(LazyHydrationWrapper, { props: { never: true } }, [
-        h('noscript', {}, [
-          h(BoosterImage, { ...this.$attrs, critical: this.hydrate })
-        ])
-      ]);
-    }
-    return h(BoosterImage, { ...this.$attrs, critical: this.isCritical });
+const { isCritical } = useBoosterCritical();
+const render = () => {
+  if (!$props.hydrate) {
+    return h(LazyHydrationWrapper, { props: { never: true } }, [
+      h('noscript', {}, [
+        h(BoosterImage, { ...$attrs, critical: $props.hydrate })
+      ])
+    ]);
   }
+  return h(BoosterImage, { ...$attrs, critical: isCritical.value });
 };
 </script>
diff --git a/src/runtime/components/BoosterImage/Base.vue b/src/runtime/components/BoosterImage/Base.vue
index 37894f6bad..ac8b5fe736 100644
--- a/src/runtime/components/BoosterImage/Base.vue
+++ b/src/runtime/components/BoosterImage/Base.vue
@@ -153,6 +153,8 @@ if ($props.source) {
       }
     ].filter(Boolean)
   };
+} else {
+  loading.value = false;
 }
 </script>
 
diff --git a/src/runtime/components/BoosterPicture.vue b/src/runtime/components/BoosterPicture.vue
index ac06acf8b9..fc3944748a 100644
--- a/src/runtime/components/BoosterPicture.vue
+++ b/src/runtime/components/BoosterPicture.vue
@@ -1,39 +1,40 @@
-<script>
-import { useBoosterCritical } from '#imports';
+<template>
+  <render />
+</template>
+
+<script setup>
+import { useBoosterCritical, useAttrs } from '#imports';
 import { h } from 'vue';
 
 import { LazyHydrationWrapper } from 'vue3-lazy-hydration';
 import BoosterPicture from '#booster/components/BoosterPicture/Base';
 
-export default {
-  inheritAttrs: false,
+defineOptions({
+  inheritAttrs: false
+});
+
+const $props = defineProps({
+  hydrate: {
+    type: Boolean,
+    default: true
+  }
+});
 
-  props: {
-    hydrate: {
-      type: Boolean,
-      default: true
-    }
-  },
-  setup() {
-    const { isCritical } = useBoosterCritical();
-    return {
-      isCritical
-    };
-  },
+const $attrs = useAttrs();
+const { isCritical } = useBoosterCritical();
 
-  render() {
-    if (!this.hydrate) {
-      return h(LazyHydrationWrapper, { never: true }, [
-        h(
-          'noscript',
-          {
-            class: 'nuxt-booster-picture-noscript'
-          },
-          [h(BoosterPicture, { ...this.$attrs, critical: this.hydrate })]
-        )
-      ]);
-    }
-    return h(BoosterPicture, { ...this.$attrs, critical: this.isCritical });
+const render = () => {
+  if (!$props.hydrate) {
+    return h(LazyHydrationWrapper, { never: true }, [
+      h(
+        'noscript',
+        {
+          class: 'nuxt-booster-picture-noscript'
+        },
+        [h(BoosterPicture, { ...$attrs, critical: $props.hydrate })]
+      )
+    ]);
   }
+  return h(BoosterPicture, { ...$attrs, critical: isCritical.value });
 };
 </script>

From 20e6001aa3cf7a5f17838b4ed849c2c0339d7be2 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Sun, 18 Aug 2024 21:21:46 +0000
Subject: [PATCH 13/13] chore(release): 3.1.4-next.5 [skip ci]

## [3.1.4-next.5](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.4...v3.1.4-next.5) (2024-08-18)

### Bug Fixes

* **components:** remove skeleton ([38a4a99](https://github.com/basics/nuxt-booster/commit/38a4a99a91c2409ac750b518d851746a709c04a9))
* **image-size:** added option ([a6255cc](https://github.com/basics/nuxt-booster/commit/a6255cc36969c236a097b394a2446085c1cd6802))
---
 CHANGELOG.md      | 8 ++++++++
 package-lock.json | 4 ++--
 package.json      | 2 +-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 820a8271e9..100547d254 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Project Changelog
 
+## [3.1.4-next.5](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.4...v3.1.4-next.5) (2024-08-18)
+
+
+### Bug Fixes
+
+* **components:** remove skeleton ([38a4a99](https://github.com/basics/nuxt-booster/commit/38a4a99a91c2409ac750b518d851746a709c04a9))
+* **image-size:** added option ([a6255cc](https://github.com/basics/nuxt-booster/commit/a6255cc36969c236a097b394a2446085c1cd6802))
+
 ## [3.1.4-next.4](https://github.com/basics/nuxt-booster/compare/v3.1.4-next.3...v3.1.4-next.4) (2024-08-18)
 
 
diff --git a/package-lock.json b/package-lock.json
index 4995f91b69..eea59e3e0f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.4",
+  "version": "3.1.4-next.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nuxt-booster",
-      "version": "3.1.4-next.4",
+      "version": "3.1.4-next.5",
       "license": "MIT",
       "dependencies": {
         "@nuxt/image": "1.7.0",
diff --git a/package.json b/package.json
index ef443c2aa0..17b2604ef0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.4-next.4",
+  "version": "3.1.4-next.5",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",