From e5fc73aa26b9ab9db0400969cbc6eea00375fb86 Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Tue, 2 Jul 2024 19:09:28 +0200 Subject: [PATCH 1/2] fix(module): improve optimization options - renamed optimizePreloads to optimizeSSR --- docs/src/guide/options.md | 44 ++++++++++++++++------- playground/nuxt.config.js | 7 ++++ src/hookFunctions/nitro/init.js | 38 +++++++++++++++----- src/module.js | 8 ++--- src/utils/{preload.js => optimization.js} | 19 +++++++--- src/utils/options.js | 12 ++++++- 6 files changed, 96 insertions(+), 32 deletions(-) rename src/utils/{preload.js => optimization.js} (56%) diff --git a/docs/src/guide/options.md b/docs/src/guide/options.md index 8615491f8b..ad6018b3ed 100644 --- a/docs/src/guide/options.md +++ b/docs/src/guide/options.md @@ -16,19 +16,37 @@ The default value is the `crossorigin` value from the [Render Configuration](htt [MDN - HTML.Attributes.crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) -## `optimizePreloads` +## `optimizeSSR` -- Type: `Boolean` +- Type: `Boolean`, `Object` - Default: `true` -Activating this option optimizes the initial script preloads and removes unnecessary loads. +Activating this option optimizes the initial load. + +- remove unnecessary preloads +- remove unnecessary prefetches +- inline critical CSS The following NuxtJS settings are made or overwritten in the `nuxt.config`: -| Property | Value | -| ---------------------------------- | ------- | -| `nuxt.options.vite.build.manifest` | `false` | -| `nuxt.options.noScripts` | `true` | +| Property | Value | +| ------------------------------------------- | ------ | +| `nuxt.options.experimental.inlineSSRStyles` | `false` | +| `nuxt.options.vite.build.manifest` | `false` | +| `nuxt.options.vite.build.cssCodeSplit` | `true` | +| `nuxt.options.webpack.extractCSS` | `true` | + +You can also pass an object to customize the optimization. + +````js +{ + optimizeSSR: { + cleanPreloads: true, + cleanPrefetches: true, + inlineStyles: true + } +} +```` ## `detection` @@ -44,10 +62,10 @@ These options can be used to define the initial checks to display the [`BoosterL } ```` - | Key | Type | Required | Description | Default | - | ---------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | + | Key | Type | Required | Description | Default | + | ---------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- | | `performance` | `Boolean` | yes | Checking whether the [minimum characteristic values](/guide/options#performancemetrics) have been reached. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed. | `true` | - | `browserSupport` | `Boolean` | yes | Check if the current browser on client side is supported. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed. | `true` | + | `browserSupport` | `Boolean` | yes | Check if the current browser on client side is supported. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed. | `true` | | `battery` | `Boolean` | yes | Check if the current user save power in browser. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed. | `true` | ::: info @@ -251,9 +269,9 @@ Global option for the [`IntersectionObserver`](https://developer.mozilla.org/en- } ```` - | Key | Type | Required | Description | Default | - | ----------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | - | `component` | `String` | yes | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for [`BoosterHydrate`](/guide/usage#import-components). | `0%` | + | Key | Type | Required | Description | Default | + | ----------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | + | `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%` | ## `disableNuxtFontaine` diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js index da2ea0404d..573f30f017 100644 --- a/playground/nuxt.config.js +++ b/playground/nuxt.config.js @@ -121,6 +121,13 @@ export default defineNuxtConfig(async () => { debug: false, // targetFormats: ['jpg|jpeg|png|gif'], // densities: 'x1 x2', + + // optimizeSSR: { + // cleanPreloads: true, + // cleanPrefetches: true, + // inlineStyles: true + // }, + detection: { performance: true, browserSupport: true diff --git a/src/hookFunctions/nitro/init.js b/src/hookFunctions/nitro/init.js index e4ace350d9..4dcb39ca04 100644 --- a/src/hookFunctions/nitro/init.js +++ b/src/hookFunctions/nitro/init.js @@ -5,10 +5,24 @@ import { load } from 'cheerio'; import { render } from 'dom-serializer'; import { isWebpackBuild, logger } from '../../utils'; -export default (nuxt, options = { manifest: [] }) => +export default ( + nuxt, + options = { + manifest: [], + cleanPreloads: true, + cleanPrefetches: true, + inlineStyles: true + } + ) => nitro => { nitro.hooks.hook('prerender:generate', async route => { - const { manifest } = options; + const { manifest, cleanPreloads, cleanPrefetches, inlineStyles } = { + manifest: [], + cleanPreloads: true, + cleanPrefetches: true, + inlineStyles: true, + ...options + }; if (!route.fileName?.endsWith('.html') || !route.contents) { return; @@ -32,15 +46,21 @@ export default (nuxt, options = { manifest: [] }) => }); } - $('[rel="modulepreload"][as="script"]').remove(); - $('[rel="prefetch"][as="script"]').remove(); + if (cleanPreloads) { + $('[rel="modulepreload"][as="script"]').remove(); + $('[rel="preload"][as="fetch"]').remove(); + $('[rel="preload"][as="style"]').remove(); + } - $('[rel="preload"][as="fetch"]').remove(); - $('[rel="preload"][as="style"]').remove(); - $('[rel="prefetch"][as="style"]').remove(); + if (cleanPrefetches) { + $('[rel="prefetch"][as="script"]').remove(); + $('[rel="prefetch"][as="style"]').remove(); + } - // embed css files - await prepareLinkStylesheets($, { distNuxt, route }); + if (inlineStyles) { + // embed css files + await prepareLinkStylesheets($, { distNuxt, route }); + } route.contents = render(document); }); diff --git a/src/module.js b/src/module.js index e6f93a1f23..dba31e641d 100644 --- a/src/module.js +++ b/src/module.js @@ -19,7 +19,7 @@ import { } from './utils'; import { deprecationsNotification, getDefaultOptions } from './utils/options'; import { getFontConfigTemplate } from './utils/template'; -import { optimizePreloads } from './utils/preload'; +import { optimizeSSR } from './utils/optimization'; import { registerAppEntry as registerAppEntryWebpack } from './hookFunctions/webpack'; import { registerAppEntry as registerAppEntryVite } from './hookFunctions/vite'; import { getTemplate as getBlobFileTemplate } from './utils/blob'; @@ -72,11 +72,11 @@ export default defineNuxtModule({ ); } - if (moduleOptions.optimizePreloads) { - optimizePreloads(moduleOptions, nuxt); + if (moduleOptions.optimizeSSR) { + optimizeSSR(moduleOptions, nuxt); } else { logger.warn( - 'Preload optimization is disabled by module option `optimizePreloads`.' + 'Preload optimization is disabled by module option `optimizeSSR`.' ); } diff --git a/src/utils/preload.js b/src/utils/optimization.js similarity index 56% rename from src/utils/preload.js rename to src/utils/optimization.js index d84a6f8ddb..0b8b678243 100644 --- a/src/utils/preload.js +++ b/src/utils/optimization.js @@ -1,19 +1,28 @@ import initHook from '../hookFunctions/nitro/init'; import { isViteBuild, isWebpackBuild, logger } from '../utils'; -export function optimizePreloads(moduleOptions, nuxt) { +export function optimizeSSR({ optimizeSSR }, nuxt) { + const options = { + cleanPreloads: true, + cleanPrefetches: true, + inlineStyles: true, + ...(typeof optimizeSSR === 'boolean' ? {} : optimizeSSR) + }; + nuxt.options.experimental.inlineSSRStyles = false; if (isViteBuild(nuxt)) { nuxt.options.vite.build.manifest = false; - nuxt.options.vite.build.cssCodeSplit = true; - } else if (isWebpackBuild(nuxt)) { + if (options.inlineStyles) { + nuxt.options.vite.build.cssCodeSplit = true; + } + } else if (isWebpackBuild(nuxt) && options.inlineStyles) { nuxt.options.webpack.extractCSS = true; logger.info(`Use workaround for \`SSR Styles\` in \`Webpack\`.`); } - const hookOptions = { - manifest: null + manifest: null, + ...options }; nuxt.hook('build:manifest', manifest => (hookOptions.manifest = manifest)); nuxt.hook('nitro:init', initHook(nuxt, hookOptions)); diff --git a/src/utils/options.js b/src/utils/options.js index 9b3379381c..843427a1c2 100644 --- a/src/utils/options.js +++ b/src/utils/options.js @@ -9,7 +9,11 @@ export function getDefaultOptions() { disableNuxtFontaine: false, // If set, `@nuxtjs/fontaine` will not be integrated. disableNuxtImage: false, // If set, `@nuxt/image` will not be integrated. - optimizePreloads: true, + optimizeSSR: { + cleanPreloads: true, + cleanPrefetches: true, + inlineStyles: true + }, detection: { performance: true, @@ -52,4 +56,10 @@ export function deprecationsNotification(options) { ); delete options.loader; } + if ('optimizePreloads' in options) { + logger.warn( + 'Option `optimizePreloads` is deprecated, use `optimizeSSR` instead.' + ); + delete options.optimizePreloads; + } } From 5122215637c4737e8bf8768f97d5d63e5c12f18b Mon Sep 17 00:00:00 2001 From: Thorn Walli Date: Tue, 2 Jul 2024 19:11:30 +0200 Subject: [PATCH 2/2] fix(module): update optimization --- src/utils/optimization.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/utils/optimization.js b/src/utils/optimization.js index 0b8b678243..ea40a57f04 100644 --- a/src/utils/optimization.js +++ b/src/utils/optimization.js @@ -9,7 +9,9 @@ export function optimizeSSR({ optimizeSSR }, nuxt) { ...(typeof optimizeSSR === 'boolean' ? {} : optimizeSSR) }; - nuxt.options.experimental.inlineSSRStyles = false; + if (options.inlineStyles) { + nuxt.options.experimental.inlineSSRStyles = false; + } if (isViteBuild(nuxt)) { nuxt.options.vite.build.manifest = false;