Merge pull request #1096 from basics/next

Next

CHANGELOG.md

@@ -1,5 +1,42 @@
 # 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)
+
+
+### 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)
+
+
+### 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)
+
+
+### 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)
+
+
+### 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)
 
 

build.config.js

@@ -7,6 +7,7 @@ export default {
     'hash-sum',
     'probe-image-size',
     'vue3-lazy-hydration',
+    'node-cache',
 
     // package
     '@nuxt/image',

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`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-booster",
-  "version": "3.1.3",
+  "version": "3.1.4-next.5",
   "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.",
   "license": "MIT",
   "author": "Stephan Gerbeth",
@@ -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"
@@ -73,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",

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();
 

playground/components/PreviewContainer.vue

@@ -16,6 +16,7 @@
 </template>
 
 <script setup>
+import { useBoosterFonts } from '#imports';
 const { $getFont } = useBoosterFonts();
 </script>
 

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({