From 8aace7eceff9d12a32691d2d601a52858e1a4e47 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 31 Aug 2023 15:12:28 +0100 Subject: [PATCH 1/6] docs(perf): defer fetching search and move nav to state --- docs/app.vue | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/docs/app.vue b/docs/app.vue index 54a197347..3bc0bea30 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -26,14 +26,21 @@ const links = [{ to: 'https://github.com/nuxt/image/releases', target: '_blank', }] -const { data: files } = useLazyFetch('/api/search.json', { - default: () => [], - server: false, + +const enableDocsSearch = ref(false) +const files = shallowRef([]) +onNuxtReady(async () => { + files.value = await $fetch('/api/search.json') + enableDocsSearch.value = true }) -const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation()) // Provide +const navigation = useState() provide('navigation', navigation) + +if (process.server) { + navigation.value = await fetchContentNavigation() +} - + From fb7067ca235de7cd8a50c83320826a462ee1be94 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 31 Aug 2023 15:20:24 +0100 Subject: [PATCH 2/6] fix: load docs search in main bundle --- docs/app.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/app.vue b/docs/app.vue index 3bc0bea30..524d7b542 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -78,7 +78,5 @@ if (process.server) { - - - + From 5994f1af9810a88a830cb97eea28fea09b4bccc8 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 31 Aug 2023 16:24:11 +0100 Subject: [PATCH 3/6] perf: only add prose components as globals --- docs/modules/components-chunk.ts | 39 ++++++++++++++++++++++++++++++++ docs/nuxt.config.ts | 15 ------------ 2 files changed, 39 insertions(+), 15 deletions(-) create mode 100644 docs/modules/components-chunk.ts diff --git a/docs/modules/components-chunk.ts b/docs/modules/components-chunk.ts new file mode 100644 index 000000000..21d735872 --- /dev/null +++ b/docs/modules/components-chunk.ts @@ -0,0 +1,39 @@ +import { defineNuxtModule, useNuxt } from 'nuxt/kit' +import defu from 'defu' + +export default defineNuxtModule({ + meta: { name: 'components-chunk' }, + setup() { + const nuxt = useNuxt() + + const nonGlobals = new Set([ + 'ContentList', + 'ContentNavigation', + 'ContentQuery', + 'ContentRenderer', + 'ContentRendererMarkdown', + 'ContentSlot', + 'DocumentDrivenEmpty', + 'DocumentDrivenNotFound', + 'Markdown', + ]) + + nuxt.hook('components:extend', components => { + for (const component of components) { + if (nonGlobals.has(component.pascalName)) { + component.global = false + } + + // Related to https://github.com/nuxt/nuxt/pull/22558 + // Adding all global components to the main entry + // To avoid lagging during page navigation on client-side + // Downside: bigger JS bundle + // With sync: 465KB, gzip: 204KB + // Without: 418KB, gzip: 184KB + if (component.global) { + component.global = 'sync' + } + } + }) + }, +}) diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index 2711b58ab..21aab6051 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -43,19 +43,4 @@ export default defineNuxtConfig({ '/components/nuxt-picture': { redirect: { to: '/usage/nuxt-picture', statusCode: 301 } }, '/api/use-image': { redirect: { to: '/usage/use-image', statusCode: 301 } }, }, - hooks: { - // Related to https://github.com/nuxt/nuxt/pull/22558 - // Adding all global components to the main entry - // To avoid lagging during page navigation on client-side - // Downside: bigger JS bundle - // With sync: 465KB, gzip: 204KB - // Without: 418KB, gzip: 184KB - 'components:extend' (components) { - for (const comp of components) { - if (comp.global) { - comp.global = 'sync' - } - } - } - } }) From a7f33e119008bd249d003b437699bd2f7a7854c7 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 31 Aug 2023 16:24:53 +0100 Subject: [PATCH 4/6] perf: optimise head metadata --- docs/nuxt.config.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index 21aab6051..60bb32cfc 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -29,6 +29,9 @@ export default defineNuxtConfig({ 'DM+Sans': [400, 500, 600, 700], }, }, + experimental: { + headNext: true + }, nitro: { prerender: { routes: ['/api/search.json'], From acc52b5e495c36c76a746ed21d9ffb186000791f Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 31 Aug 2023 20:12:50 +0100 Subject: [PATCH 5/6] fix: try using a single extra component chunk --- docs/app.vue | 4 ++-- docs/modules/components-chunk.ts | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/docs/app.vue b/docs/app.vue index 524d7b542..17231d3e0 100644 --- a/docs/app.vue +++ b/docs/app.vue @@ -56,8 +56,8 @@ if (process.server) { diff --git a/docs/modules/components-chunk.ts b/docs/modules/components-chunk.ts index 21d735872..8969edb13 100644 --- a/docs/modules/components-chunk.ts +++ b/docs/modules/components-chunk.ts @@ -18,6 +18,20 @@ export default defineNuxtModule({ 'Markdown', ]) + const globals = new Set() + + nuxt.hook('vite:extendConfig', config => { + config.build = defu(config.build, { + rollupOptions: { + output: { + manualChunks: { + 'prose': [...globals] + } + } + } + }) + }) + nuxt.hook('components:extend', components => { for (const component of components) { if (nonGlobals.has(component.pascalName)) { @@ -31,7 +45,8 @@ export default defineNuxtModule({ // With sync: 465KB, gzip: 204KB // Without: 418KB, gzip: 184KB if (component.global) { - component.global = 'sync' + globals.add(component.filePath) + component.global = true } } }) From 3c604e6f6d6e92f2f81269c67e2260f17e53dd24 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Thu, 14 Sep 2023 16:57:45 +0100 Subject: [PATCH 6/6] chore: bump elements version --- docs/package.json | 2 +- pnpm-lock.yaml | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/package.json b/docs/package.json index fd69bae53..d202bc2d9 100644 --- a/docs/package.json +++ b/docs/package.json @@ -13,7 +13,7 @@ "@iconify-json/simple-icons": "^1.1.70", "@nuxt/content": "^2.8.2", "@nuxt/image": "link:..", - "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28242263.01d174c", + "@nuxthq/elements": "npm:@nuxthq/elements-edge@0.0.1-28245089.29bf1c5", "@nuxthq/studio": "^0.14.1", "@nuxtjs/fontaine": "^0.4.1", "@nuxtjs/google-fonts": "^3.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89d99661f..458fa6167 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -117,8 +117,8 @@ importers: specifier: link:.. version: link:.. '@nuxthq/elements': - specifier: npm:@nuxthq/elements-edge@0.0.1-28242263.01d174c - version: /@nuxthq/elements-edge@0.0.1-28242263.01d174c(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) + specifier: npm:@nuxthq/elements-edge@0.0.1-28245089.29bf1c5 + version: /@nuxthq/elements-edge@0.0.1-28245089.29bf1c5(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) '@nuxthq/studio': specifier: ^0.14.1 version: 0.14.1(rollup@3.29.0) @@ -1504,7 +1504,7 @@ packages: resolution: {integrity: sha512-O39UrOFbNgL27urwDqeMgXeYiNIUvp73nsmtt7jm9JDcMVIWykuUzyBPYtHif7gq5ElzIjjmDw9zdRGgyMzo+w==} hasBin: true peerDependencies: - '@nuxt/kit': 3.6.5 + '@nuxt/kit': ^3.7.0 nuxi: ^3.7.3 dependencies: '@nuxt/kit': 3.7.3(rollup@3.29.0) @@ -1720,12 +1720,11 @@ packages: - vti - vue-tsc - /@nuxthq/elements-edge@0.0.1-28242263.01d174c(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2): - resolution: {integrity: sha512-bROLdEguvLjtNTFIlVpPpehv/2+w1nBUsA5cFo3x/FBYMFcm4GCbXF/0cFAN3gJNaa1Pw08npDw0VwlS2gIT2Q==} + /@nuxthq/elements-edge@0.0.1-28245089.29bf1c5(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2): + resolution: {integrity: sha512-BhtsABEiRef++k1MaTEzcO1rw+Z//HVvJ6afUTHFI0CocLZmQ7/yA89WhcSR3muonOMeyS1AxD/yyugF47vV7g==} dependencies: '@nuxt/ui': 2.8.0(rollup@3.29.0)(vue@3.3.4)(webpack@5.88.2) '@vueuse/core': 10.4.1(vue@3.3.4) - lodash-es: 4.17.21 ofetch: 1.3.3 pathe: 1.1.1 tailwind-merge: 1.14.0 @@ -2004,6 +2003,7 @@ packages: dependencies: is-glob: 4.0.3 micromatch: 4.0.5 + napi-wasm: 1.1.0 bundledDependencies: - napi-wasm @@ -8659,6 +8659,9 @@ packages: dev: false optional: true + /napi-wasm@1.1.0: + resolution: {integrity: sha512-lHwIAJbmLSjF9VDRm9GoVOy9AGp3aIvkjv+Kvz9h16QR3uSVYH78PNQUnT2U4X53mhlnV2M7wrhibQ3GHicDmg==} + /natural-compare@1.4.0: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}