perf: skip client locale chunks when using messages endpoint (#4067)

Author: BobbieGoede

specs/lazy_load/stripped_client_chunks.spec.ts

@@ -0,0 +1,31 @@
+import { readdirSync, readFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, test } from 'vitest'
+
+import { renderPage, waitForLocaleNetwork } from '../helper'
+import { setup, useTestContext } from '../utils'
+
+await setup({
+  rootDir: fileURLToPath(new URL(`../fixtures/lazy`, import.meta.url)),
+  browser: true
+})
+
+describe('client locale chunks stripped in endpoint mode', () => {
+  test('client assets contain no bundled locale messages', async () => {
+    // ssr builds always load messages from the endpoint, so client locale chunks are not emitted
+    const assetsDir = join(useTestContext().nuxt!.options.nitro.output!.dir!, 'public/_nuxt')
+    const chunks = readdirSync(assetsDir).filter(x => x.endsWith('.js'))
+    expect(chunks.length).toBeGreaterThan(0)
+    for (const chunk of chunks) {
+      expect(readFileSync(join(assetsDir, chunk), 'utf8')).not.toContain('Homepage')
+    }
+  })
+
+  test('client-side locale switch fetches messages from the endpoint', async () => {
+    const { page } = await renderPage('/')
+
+    await Promise.all([waitForLocaleNetwork(page, 'fr', 'response'), page.click('#nuxt-locale-link-fr')])
+    expect(await page.locator('#home-header').innerText()).toEqual('Accueil')
+  })
+})

src/template.ts

@@ -75,9 +75,18 @@ export function generateTemplateNuxtI18nOptions(
         '}',
       ].join('\n\n')
 
+  // the production client only imports locale files when `dynamicResourcesSSG` (runtime/context.ts)
+  // resolves to true - in endpoint mode the loaders are unreachable, stubbing them behind
+  // `import.meta.client` (folded per graph) skips compiling and emitting client locale chunks
+  const stripClientLoaders = !server
+    && !nuxt.options.dev
+    && nuxt.options.ssr
+    && (ctx.fullStatic || !nuxt.options.nitro.static)
+  const clientLoad = (load: string) => (stripClientLoaders ? `import.meta.client ? () => Promise.resolve({}) : ${load}` : load)
+
   const localeLoaderEntries: Record<string, { key: string, load: string, cache: boolean }[]> = {}
   for (const locale in opts.localeLoaders) {
-    localeLoaderEntries[locale] = opts.localeLoaders[locale]!.map(({ key, load, loadServer, cache }) => ({ key, load: server ? loadServer : load, cache }))
+    localeLoaderEntries[locale] = opts.localeLoaders[locale]!.map(({ key, load, loadServer, cache }) => ({ key, load: server ? loadServer : clientLoad(load), cache }))
   }
 
   return `// @ts-nocheck