Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2024-11-22 05:35:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf(nuxt): decrease default bundle size (#22999)

Browse Source
This commit is contained in:
Daniel Roe 2023-09-04 22:30:24 +01:00 committed by GitHub
parent d77cb8ceb9
commit 4e98ac1746
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/nuxt/src/app/composables/payload.ts
View File

@ -56,10 +56,12 @@ function _getPayloadURL (url: string, opts: LoadPayloadOptions = {}) {
async function _importPayload (payloadURL: string) { async function _importPayload (payloadURL: string) {
if (import.meta.server) { return null } if (import.meta.server) { return null }
const payloadPromise = renderJsonPayloads
? fetch(payloadURL).then(res => res.text().then(parsePayload))
: import(/* webpackIgnore: true */ /* @vite-ignore */ payloadURL).then(r => r.default || r)
try { try {
return renderJsonPayloads return await payloadPromise
? parsePayload(await fetch(payloadURL).then(res => res.text()))
: await import(/* webpackIgnore: true */ /* @vite-ignore */ payloadURL).then(r => r.default || r)
} catch (err) { } catch (err) {
console.warn('[nuxt] Cannot load payload ', payloadURL, err) console.warn('[nuxt] Cannot load payload ', payloadURL, err)
} }

9
packages/nuxt/src/app/composables/router.ts
View File

@ -7,7 +7,6 @@ import { hasProtocol, isScriptProtocol, joinURL, parseURL, withQuery } from 'ufo
import { useNuxtApp, useRuntimeConfig } from '../nuxt' import { useNuxtApp, useRuntimeConfig } from '../nuxt'
import type { NuxtError } from './error' import type { NuxtError } from './error'
import { createError, showError } from './error' import { createError, showError } from './error'
import { useState } from './state'
import type { PageMeta } from '#app' import type { PageMeta } from '#app'
import { PageRouteSymbol } from '#app/components/injections' import { PageRouteSymbol } from '#app/components/injections'
@ -222,14 +221,14 @@ export const abortNavigation = (err?: string | Partial<NuxtError>) => {
} }
export const setPageLayout = (layout: unknown extends PageMeta['layout'] ? string : PageMeta['layout']) => { export const setPageLayout = (layout: unknown extends PageMeta['layout'] ? string : PageMeta['layout']) => {
const nuxtApp = useNuxtApp()
if (import.meta.server) { if (import.meta.server) {
if (import.meta.dev && getCurrentInstance() && useState('_layout').value !== layout) { if (import.meta.dev && getCurrentInstance() && nuxtApp.payload.state._layout !== layout) {
console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout on the server within a component as this will cause hydration errors.') console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout on the server within a component as this will cause hydration errors.')
} }
useState('_layout').value = layout nuxtApp.payload.state._layout = layout
} }
const nuxtApp = useNuxtApp() if (import.meta.dev && nuxtApp.isHydrating && nuxtApp.payload.serverRendered && nuxtApp.payload.state._layout !== layout) {
if (import.meta.dev && nuxtApp.isHydrating && nuxtApp.payload.serverRendered && useState('_layout').value !== layout) {
console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout during hydration as this will cause hydration errors.') console.warn('[warn] [nuxt] `setPageLayout` should not be called to change the layout during hydration as this will cause hydration errors.')
} }
const inMiddleware = isProcessingMiddleware() const inMiddleware = isProcessingMiddleware()

7
packages/nuxt/src/app/plugins/router.ts
View File

@ -4,7 +4,6 @@ import { createError } from 'h3'
import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt' import { defineNuxtPlugin, useRuntimeConfig } from '../nuxt'
import { clearError, showError } from '../composables/error' import { clearError, showError } from '../composables/error'
import { navigateTo } from '../composables/router' import { navigateTo } from '../composables/router'
import { useState } from '../composables/state'
// @ts-expect-error virtual file // @ts-expect-error virtual file
import { globalMiddleware } from '#build/middleware' import { globalMiddleware } from '#build/middleware'
@ -226,12 +225,12 @@ export default defineNuxtPlugin<{ route: Route, router: Router }>({
named: {} named: {}
} }
const initialLayout = useState('_layout') const initialLayout = nuxtApp.payload.state._layout
nuxtApp.hooks.hookOnce('app:created', async () => { nuxtApp.hooks.hookOnce('app:created', async () => {
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from) => {
to.meta = reactive(to.meta || {}) to.meta = reactive(to.meta || {})
if (nuxtApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) { if (nuxtApp.isHydrating && initialLayout && !isReadonly(to.meta.layout)) {
to.meta.layout = initialLayout.value to.meta.layout = initialLayout
} }
nuxtApp._processingMiddleware = true nuxtApp._processingMiddleware = true

7
packages/nuxt/src/pages/runtime/plugins/router.ts
View File

@ -14,7 +14,6 @@ import { isEqual, withoutBase } from 'ufo'
import type { PageMeta, Plugin, RouteMiddleware } from '../../../app/index' import type { PageMeta, Plugin, RouteMiddleware } from '../../../app/index'
import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt' import { defineNuxtPlugin, useRuntimeConfig } from '#app/nuxt'
import { clearError, showError, useError } from '#app/composables/error' import { clearError, showError, useError } from '#app/composables/error'
import { useState } from '#app/composables/state'
import { navigateTo } from '#app/composables/router' import { navigateTo } from '#app/composables/router'
// @ts-expect-error virtual file // @ts-expect-error virtual file
@ -134,11 +133,11 @@ const plugin: Plugin<{ router: Router }> = defineNuxtPlugin({
await nuxtApp.runWithContext(() => showError(error)) await nuxtApp.runWithContext(() => showError(error))
} }
const initialLayout = useState('_layout') const initialLayout = nuxtApp.payload.state._layout
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from) => {
to.meta = reactive(to.meta) to.meta = reactive(to.meta)
if (nuxtApp.isHydrating && initialLayout.value && !isReadonly(to.meta.layout)) { if (nuxtApp.isHydrating && initialLayout && !isReadonly(to.meta.layout)) {
to.meta.layout = initialLayout.value as Exclude<PageMeta['layout'], Ref | false> to.meta.layout = initialLayout as Exclude<PageMeta['layout'], Ref | false>
} }
nuxtApp._processingMiddleware = true nuxtApp._processingMiddleware = true

6
test/bundle.test.ts
View File

@ -19,7 +19,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
for (const outputDir of ['.output', '.output-inline']) { for (const outputDir of ['.output', '.output-inline']) {
it('default client bundle size', async () => { it('default client bundle size', async () => {
const clientStats = await analyzeSizes('**/*.js', join(rootDir, outputDir, 'public')) const clientStats = await analyzeSizes('**/*.js', join(rootDir, outputDir, 'public'))
expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot('"97.0k"') expect.soft(roundToKilobytes(clientStats.totalBytes)).toMatchInlineSnapshot('"95.5k"')
expect(clientStats.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(` expect(clientStats.files.map(f => f.replace(/\..*\.js/, '.js'))).toMatchInlineSnapshot(`
[ [
"_nuxt/entry.js", "_nuxt/entry.js",
@ -32,7 +32,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
const serverDir = join(rootDir, '.output/server') const serverDir = join(rootDir, '.output/server')
const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir) const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"300k"') expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"299k"')
const modules = await analyzeSizes('node_modules/**/*', serverDir) const modules = await analyzeSizes('node_modules/**/*', serverDir)
expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"1822k"') expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"1822k"')
@ -71,7 +71,7 @@ describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM
const serverDir = join(rootDir, '.output-inline/server') const serverDir = join(rootDir, '.output-inline/server')
const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir) const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"606k"') expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot('"605k"')
const modules = await analyzeSizes('node_modules/**/*', serverDir) const modules = await analyzeSizes('node_modules/**/*', serverDir)
expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"70.6k"') expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot('"70.6k"')