fix: disable prefetching lazy locales

nuxt-modules · Aug 26, 2023 · aebda0a · aebda0a
1 parent 72082ff
commit aebda0a
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 41 deletions.
diff --git a/specs/fixtures/lazy/i18n-module/index.ts b/specs/fixtures/lazy/i18n-module/index.ts
@@ -0,0 +1,20 @@
+import { createResolver, defineNuxtModule } from '@nuxt/kit'
+
+export default defineNuxtModule({
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url)
+    nuxt.hook('i18n:registerModule', register => {
+      register({
+        langDir: resolve('./locales'),
+        locales: [
+          {
+            code: 'nl',
+            iso: 'nl-NL',
+            file: 'lazy-locale-module-nl.ts',
+            name: 'Nederlands'
+          }
+        ]
+      })
+    })
+  }
+})
diff --git a/specs/fixtures/lazy/i18n-module/locales/lazy-locale-module-nl.ts b/specs/fixtures/lazy/i18n-module/locales/lazy-locale-module-nl.ts
@@ -0,0 +1,3 @@
+export default defineI18nLocale(locale => ({
+  moduleLayerText: 'This is a merged module layer locale key in Dutch'
+}))
diff --git a/specs/fixtures/lazy/nuxt.config.ts b/specs/fixtures/lazy/nuxt.config.ts
@@ -1,11 +1,41 @@
+import i18nModule from './i18n-module'
+
 // https://nuxt.com/docs/guide/directory-structure/nuxt.config
 export default defineNuxtConfig({
-  modules: ['@nuxtjs/i18n'],
-
+  modules: [i18nModule, '@nuxtjs/i18n'],
   i18n: {
     baseUrl: 'http://localhost:3000',
+    // langDir: 'lang',
+    // defaultLocale: 'fr',
+    detectBrowserLanguage: false,
+    experimental: {
+      jsTsFormatResource: true
+    },
+    compilation: {
+      strictMessage: false
+    },
+    defaultLocale: 'en',
     langDir: 'lang',
-    defaultLocale: 'fr',
-    detectBrowserLanguage: false
+    lazy: true,
+    locales: [
+      {
+        code: 'en',
+        iso: 'en-US',
+        file: 'lazy-locale-en.json',
+        name: 'English'
+      },
+      {
+        code: 'en-GB',
+        iso: 'en-GB',
+        files: ['lazy-locale-en.json', 'lazy-locale-en-GB.js', 'lazy-locale-en-GB.ts'],
+        name: 'English (UK)'
+      },
+      {
+        code: 'fr',
+        iso: 'fr-FR',
+        file: 'lazy-locale-fr.json5',
+        name: 'Français'
+      }
+    ]
   }
 })
diff --git a/specs/lazy_load/basic_lazy_load.spec.ts b/specs/lazy_load/basic_lazy_load.spec.ts
@@ -6,45 +6,11 @@ import { getText, getData } from '../helper'
 describe('basic lazy loading', async () => {
   await setup({
     rootDir: fileURLToPath(new URL(`../fixtures/lazy`, import.meta.url)),
-    browser: true,
-    // overrides
-    nuxtConfig: {
-      i18n: {
-        experimental: {
-          jsTsFormatResource: true
-        },
-        compilation: {
-          strictMessage: false
-        },
-        defaultLocale: 'en',
-        langDir: 'lang',
-        lazy: true,
-        locales: [
-          {
-            code: 'en',
-            iso: 'en-US',
-            file: 'lazy-locale-en.json',
-            name: 'English'
-          },
-          {
-            code: 'en-GB',
-            iso: 'en-GB',
-            files: ['lazy-locale-en.json', 'lazy-locale-en-GB.js', 'lazy-locale-en-GB.ts'],
-            name: 'English (UK)'
-          },
-          {
-            code: 'fr',
-            iso: 'fr-FR',
-            file: 'lazy-locale-fr.json5',
-            name: 'Français'
-          }
-        ]
-      }
-    }
+    browser: true
   })
 
   // TODO: fix lazy loading
-  test.fails('(fails) locales are fetched on demand', async () => {
+  test('locales are fetched on demand', async () => {
     const home = url('/')
     const page = await createPage()
 
@@ -59,7 +25,7 @@ describe('basic lazy loading', async () => {
 
     // only default locales are fetched (en)
     await page.goto(home)
-    expect.soft([...fetchedLocales].filter(locale => locale.includes('fr'))).toHaveLength(0)
+    expect([...fetchedLocales].filter(locale => locale.includes('fr') || locale.includes('nl'))).toHaveLength(0)
 
     // wait for request after navigation
     const localeRequestFr = page.waitForRequest(/lazy-locale-fr/)
@@ -68,6 +34,14 @@ describe('basic lazy loading', async () => {
 
     // `fr` locale has been fetched
     expect([...fetchedLocales].filter(locale => locale.includes('fr'))).toHaveLength(1)
+
+    // wait for request after navigation
+    const localeRequestNl = page.waitForRequest(/lazy-locale-module-nl/)
+    await page.click('#lang-switcher-with-nuxt-link-nl')
+    await localeRequestNl
+
+    // `nl` (module) locale has been fetched
+    expect([...fetchedLocales].filter(locale => locale.includes('nl'))).toHaveLength(1)
   })
 
   test('can access to no prefix locale (en): /', async () => {

diff --git a/src/module.ts b/src/module.ts
@@ -262,6 +262,23 @@ export default defineNuxtModule<NuxtI18nOptions>({
       references.push({ path: resolve(nuxt.options.buildDir, vueI18nTypeFilename) })
     })
 
+    /**
+     * disable preloading/prefetching lazy loaded locales
+     */
+    nuxt.hook('build:manifest', manifest => {
+      if (options.lazy) {
+        const langFiles = localeInfo.flatMap(locale => (locale.file != null ? locale.file : [...(locale?.files ?? [])]))
+        const langPaths = [...new Set(langFiles)]
+
+        for (const key in manifest) {
+          if (langPaths.some(x => key.startsWith(x))) {
+            manifest[key].prefetch = false
+            manifest[key].preload = false
+          }
+        }
+      }
+    })
+
     /**
      * extend bundler
      */