diff --git a/CHANGELOG.md b/CHANGELOG.md index e1eb0b4e55..de257e7e71 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,20 @@ # Project Changelog +## [3.1.7-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.7-next.1...v3.1.7-next.2) (2024-12-16) + + +### Bug Fixes + +* **entry:** added timeout for video check ([8ae386a](https://github.com/basics/nuxt-booster/commit/8ae386a2992ab94f3dd2a840ae6b9223ea70bd4a)) +* **entry:** update visiblity check ([962bf07](https://github.com/basics/nuxt-booster/commit/962bf073be5162cbade22e7eb5f9e5734ed17889)) + +## [3.1.7-next.1](https://github.com/basics/nuxt-booster/compare/v3.1.6...v3.1.7-next.1) (2024-11-01) + + +### Bug Fixes + +* **node-cache:** removed `node-cache` ([a3afce2](https://github.com/basics/nuxt-booster/commit/a3afce206b74d278a785a757b773b2644e0147e4)) + ## [3.1.6](https://github.com/basics/nuxt-booster/compare/v3.1.5...v3.1.6) (2024-09-17) diff --git a/build.config.js b/build.config.js index a5d6395ed9..fb09ffda3d 100644 --- a/build.config.js +++ b/build.config.js @@ -6,7 +6,6 @@ export default { 'change-case', 'hash-sum', 'probe-image-size', - 'node-cache', // package '@nuxt/image', diff --git a/docs/src/guide/options.md b/docs/src/guide/options.md index a41682f842..ad6018b3ed 100644 --- a/docs/src/guide/options.md +++ b/docs/src/guide/options.md @@ -274,22 +274,6 @@ 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/package-lock.json b/package-lock.json index 360161cd9b..2db60b8685 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "nuxt-booster", - "version": "3.1.6", + "version": "3.1.7-next.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "nuxt-booster", - "version": "3.1.6", + "version": "3.1.7-next.2", "license": "MIT", "dependencies": { "@nuxt/image": "1.8.1", @@ -19,7 +19,6 @@ "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.4.0" }, @@ -17036,18 +17035,6 @@ "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", diff --git a/package.json b/package.json index 565f06bce0..3a7a121edb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nuxt-booster", - "version": "3.1.6", + "version": "3.1.7-next.2", "description": "Nuxt Booster takes over the Lighthouse performance optimization of your generated website.", "license": "MIT", "author": "Stephan Gerbeth", @@ -61,7 +61,6 @@ "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.4.0" }, diff --git a/src/module.js b/src/module.js index c36750d24a..918f3e204a 100644 --- a/src/module.js +++ b/src/module.js @@ -120,8 +120,7 @@ async function addBuildTemplates(nuxt, options) { targetFormats: options.targetFormats, crossorigin: getCrossorigin(options.crossorigin), supportedBrowserDetector, - loader: options.loader, - imageSizeCache: options.imageSizeCache + loader: options.loader }); }, filename: MODULE_NAME + `/plugin.${mode}.js`, diff --git a/src/runtime/utils/entry.js b/src/runtime/utils/entry.js index afb868bc67..1bf5ac1ebc 100644 --- a/src/runtime/utils/entry.js +++ b/src/runtime/utils/entry.js @@ -72,6 +72,18 @@ export const hasBatteryPerformanceIssue = async videoBlob => { } }; +export const waitForVisibilty = () => { + const { promise, resolve } = Promise.withResolvers(); + if (document.visibilityState === 'hidden') { + document.addEventListener('visibilitychange', resolve, { + once: true + }); + } else { + resolve(); + } + return promise; +}; + /** * Checks if battery still has enough energy. * This check is for Chrome and all other browsers that support this setting. @@ -99,7 +111,13 @@ export const canVideoPlay = async blob => { video.muted = true; video.playsinline = true; video.src = objectUrl; - await video.play(); + + const { resolve, promise } = Promise.withResolvers(); + const timeout = window.setTimeout(resolve, 500); + + await Promise.race([video.play(), promise]); + window.clearTimeout(timeout); + URL.revokeObjectURL(objectUrl); } catch (error) { URL.revokeObjectURL(objectUrl); diff --git a/src/runtime/utils/performance.js b/src/runtime/utils/performance.js index f0ac2f87d9..175c80524e 100644 --- a/src/runtime/utils/performance.js +++ b/src/runtime/utils/performance.js @@ -72,22 +72,8 @@ export const getDefaultRunOptions = () => { return { maxTime: 1000, threshold: 0.65 }; }; -export const waitForVisibleDocument = () => { - return new Promise(resolve => { - if (document.visibilityState === 'hidden') { - document.addEventListener('visibilitychange', () => resolve(), { - once: true - }); - } else { - resolve(); - } - }); -}; - export const run = async (options = {}) => { if (window.requestIdleCallback) { - await waitForVisibleDocument(); - const { maxTime, threshold } = { ...getDefaultRunOptions(), ...options }; const fpsObserver = new CallbackObserver(rafTime); const idleObserver = new CallbackObserver(idleTime); diff --git a/src/tmpl/entry.tmpl.js b/src/tmpl/entry.tmpl.js index 972f796630..846f77b626 100644 --- a/src/tmpl/entry.tmpl.js +++ b/src/tmpl/entry.tmpl.js @@ -2,7 +2,7 @@ export default options => { let code = `import { ${ options.performanceCheck ? `run, ` : `` }hasSufficientPerformance, setup } from '#booster/utils/performance'; -import { triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry'; +import { waitForVisibilty, triggerRunCallback, observeBoosterButton, setupBoosterLayer, updateBoosterLayerMessage, initReducedView, hasBatteryPerformanceIssue, deprecationWarningButtonSelector } from '#booster/utils/entry'; import Deferred from '#booster/classes/Deferred'; import { isSupportedBrowser } from '#booster/utils/browser'; import {video as videoBlob} from './blobs.mjs'; @@ -52,6 +52,8 @@ function client () { deferred.resolve(); } + await waitForVisibilty(); + document.documentElement.classList.remove('nuxt-booster-reduced-view'); `; diff --git a/src/tmpl/plugin.tmpl.js b/src/tmpl/plugin.tmpl.js index 0974851551..c6e6915ae7 100644 --- a/src/tmpl/plugin.tmpl.js +++ b/src/tmpl/plugin.tmpl.js @@ -6,12 +6,6 @@ import FontList from '#booster/classes/FontList'; import { useNuxtApp, useBoosterHead, useRequestHeaders, useRequestURL, useRequestFetch } from '#imports'; import './fonts.css';`; - if (options.mode !== 'client') { - code += ` -import NodeCache from 'node-cache'; -`; - } - code += ` export default defineNuxtPlugin({ @@ -54,15 +48,9 @@ export default defineNuxtPlugin({ `; - if (options.mode === 'client') { - code += ` -const dimensionCache = new Map();`; - } else { - code += ` -const dimensionCache = new NodeCache({ useClones: false, ...${JSON.stringify(options.imageSizeCache)} });`; - } - code += ` +const dimensionCache = new Map(); + async function getImageSize (src) { `; diff --git a/src/utils/options.js b/src/utils/options.js index 93c1b3eb88..31655f0720 100644 --- a/src/utils/options.js +++ b/src/utils/options.js @@ -39,13 +39,17 @@ export function getDefaultOptions() { lazyOffset: { component: '0%', asset: '0%' - }, - - imageSizeCache: { stdTTL: 3600, checkperiod: 1800 } + } }; } export function deprecationsNotification(options) { + if ('imageSizeCache' in options) { + logger.warn( + 'Option `imageSizeCache` is deprecated, is no longer required.' + ); + delete options.loader; + } if ('loader' in options) { logger.warn( 'Option `loader` is deprecated, there is no integrated loader anymore.'