perf!: move generated options to compile time constants (#3568)

Author: BobbieGoede

docs/content/docs/02.guide/90.migrating.md

@@ -48,10 +48,23 @@ This feature has been disabled and the option to enable it has been removed, see
 ### Drop `experimental.generatedLocaleFilePathFormat`
 File paths (e.g. locale files, vue-i18n configs) configured for this module are now removed entirely making this option obsolete.
 
-### Removed `nuxtI18nOptions` from generated options files.
+### Removed exports from generated options files.
 The generated options files in your projects are meant for internal use by this module at runtime and should never be used, more properties may be removed in the future.
 
-The `nuxtI18nOptions` export has been removed from the generated options files (`#build/i18n.options.mjs` and `#internal/i18n/options.mjs`), since it is no longer used by the module and might expose vulnerable information in the final build.
+The following exports have been removed from the generated options files (`#build/i18n.options.mjs` and `#internal/i18n/options.mjs`):
+* `nuxtI18nOptions`
+* `NUXT_I18N_MODULE_ID`
+* `parallelPlugin`
+* `isSSG`
+* `hasPages`
+* `DEFAULT_COOKIE_KEY`
+* `DYNAMIC_PARAMS_KEY`
+* `SWITCH_LOCALE_PATH_LINK_IDENTIFIER`
+
+Reasons for removal: 
+* These are no longer used by the module and might expose vulnerable information in the final build
+* Some options are now used as static values for better tree-shaking resulting in a smaller project build.
+
 
 ## Upgrading from `nuxtjs/i18n` v8.x to v9.x
 

internals.d.ts

@@ -8,14 +8,6 @@ declare module '#build/i18n.options.mjs' {
   export const vueI18nConfigs: VueI18nConfig[]
   export const localeCodes: string[]
   export const normalizedLocales: LocaleObject[]
-  export const isSSG: boolean
-  export const hasPages: boolean
-  export const parallelPlugin: boolean
-
-  export const NUXT_I18N_MODULE_ID: string
-  export const DYNAMIC_PARAMS_KEY: string
-  export const DEFAULT_COOKIE_KEY: string
-  export const SWITCH_LOCALE_PATH_LINK_IDENTIFIER: string
 }
 
 declare module '#internal/i18n/options.mjs' {
@@ -26,14 +18,6 @@ declare module '#internal/i18n/options.mjs' {
   export const vueI18nConfigs: VueI18nConfig[]
   export const localeCodes: string[]
   export const normalizedLocales: LocaleObject[]
-  export const isSSG: boolean
-  export const hasPages: boolean
-  export const parallelPlugin: boolean
-
-  export const NUXT_I18N_MODULE_ID: string
-  export const DYNAMIC_PARAMS_KEY: string
-  export const DEFAULT_COOKIE_KEY: string
-  export const SWITCH_LOCALE_PATH_LINK_IDENTIFIER: string
 }
 
 declare module '#internal/i18n/locale.detector.mjs' {

src/bundler.ts

@@ -13,6 +13,12 @@ import type { PluginOptions } from '@intlify/unplugin-vue-i18n'
 import type { BundlerPluginOptions } from './transform/utils'
 import type { I18nNuxtContext } from './context'
 import type { NuxtI18nOptions } from './types'
+import {
+  DEFAULT_COOKIE_KEY,
+  DYNAMIC_PARAMS_KEY,
+  NUXT_I18N_MODULE_ID,
+  SWITCH_LOCALE_PATH_LINK_IDENTIFIER
+} from './constants'
 
 const debug = createDebug('@nuxtjs/i18n:bundler')
 
@@ -110,7 +116,15 @@ export function createLogger(label) {
 export function getDefineConfig(options: NuxtI18nOptions, server = false, nuxt = useNuxt()) {
   const common = {
     __DEBUG__: String(!!options.debug),
-    __TEST__: String(!!options.debug || nuxt.options._i18nTest)
+    __TEST__: String(!!options.debug || nuxt.options._i18nTest),
+    __IS_SSG__: String(nuxt.options._generate),
+    // eslint-disable-next-line @typescript-eslint/no-base-to-string
+    __HAS_PAGES__: String(nuxt.options.pages.toString()),
+    __PARALLEL_PLUGIN__: String(options.parallelPlugin),
+    __DYNAMIC_PARAMS_KEY__: JSON.stringify(DYNAMIC_PARAMS_KEY),
+    __DEFAULT_COOKIE_KEY__: JSON.stringify(DEFAULT_COOKIE_KEY),
+    __NUXT_I18N_MODULE_ID__: JSON.stringify(NUXT_I18N_MODULE_ID),
+    __SWITCH_LOCALE_PATH_LINK_IDENTIFIER__: JSON.stringify(SWITCH_LOCALE_PATH_LINK_IDENTIFIER)
   }
 
   if (nuxt.options.ssr || !server) {

src/env.d.ts

@@ -6,3 +6,12 @@ declare namespace NodeJS {
 
 declare let __DEBUG__: boolean
 declare let __TEST__: boolean
+
+declare let __IS_SSG__: boolean
+declare let __HAS_PAGES__: boolean
+declare let __PARALLEL_PLUGIN__: boolean
+
+declare let __DYNAMIC_PARAMS_KEY__: string
+declare let __DEFAULT_COOKIE_KEY__: string
+declare let __NUXT_I18N_MODULE_ID__: string
+declare let __SWITCH_LOCALE_PATH_LINK_IDENTIFIER__: string

src/runtime/components/SwitchLocalePathLink.ts

@@ -1,4 +1,3 @@
-import { SWITCH_LOCALE_PATH_LINK_IDENTIFIER } from '#build/i18n.options.mjs'
 import { useSwitchLocalePath, type Locale } from '#i18n'
 import { defineNuxtLink } from '#imports'
 import { Comment, defineComponent, h } from 'vue'
@@ -21,9 +20,9 @@ export default defineComponent({
     const switchLocalePath = useSwitchLocalePath()
 
     return () => [
-      h(Comment, `${SWITCH_LOCALE_PATH_LINK_IDENTIFIER}-[${props.locale}]`),
+      h(Comment, `${__SWITCH_LOCALE_PATH_LINK_IDENTIFIER__}-[${props.locale}]`),
       h(NuxtLink, { ...attrs, to: encodeURI(switchLocalePath(props.locale)) }, slots.default),
-      h(Comment, `/${SWITCH_LOCALE_PATH_LINK_IDENTIFIER}`)
+      h(Comment, `/${__SWITCH_LOCALE_PATH_LINK_IDENTIFIER__}`)
     ]
   }
 })

src/runtime/internal.ts

@@ -1,6 +1,6 @@
 import { isString } from '@intlify/shared'
 import { useCookie, useNuxtApp, useRequestHeader, useRuntimeConfig } from '#imports'
-import { DEFAULT_COOKIE_KEY, isSSG, localeCodes, normalizedLocales } from '#build/i18n.options.mjs'
+import { localeCodes, normalizedLocales } from '#build/i18n.options.mjs'
 import { findBrowserLocale, getRoutePathLocaleRegex } from '#i18n-kit/routing'
 import { createLogger } from '#nuxt-i18n/logger'
 
@@ -43,7 +43,7 @@ export function getBrowserLocale(): string | undefined {
 
 export function createI18nCookie() {
   const detect = (useRuntimeConfig().public.i18n as I18nPublicRuntimeConfig).detectBrowserLanguage
-  const cookieKey = (detect && detect.cookieKey) || DEFAULT_COOKIE_KEY
+  const cookieKey = (detect && detect.cookieKey) || __DEFAULT_COOKIE_KEY__
   const date = new Date()
   const cookieOptions: CookieOptions<string | null | undefined> & { readonly: false } = {
     path: '/',
@@ -128,7 +128,7 @@ export function detectBrowserLanguage(
   __DEBUG__ && logger.log({ firstAccess })
 
   // detection ignored during nuxt generate
-  if (isSSG && firstAccess && strategy === 'no_prefix' && import.meta.server) {
+  if (__IS_SSG__ && firstAccess && strategy === 'no_prefix' && import.meta.server) {
     return { locale: '', error: 'detect_ignore_on_ssg' }
   }
 

src/runtime/plugins/i18n.ts

@@ -1,14 +1,7 @@
 import { computed, isRef, ref, watch } from 'vue'
 import { createI18n } from 'vue-i18n'
 import { defineNuxtPlugin, useNuxtApp } from '#imports'
-import {
-  localeCodes,
-  vueI18nConfigs,
-  hasPages,
-  localeLoaders,
-  parallelPlugin,
-  normalizedLocales
-} from '#build/i18n.options.mjs'
+import { localeCodes, vueI18nConfigs, localeLoaders, normalizedLocales } from '#build/i18n.options.mjs'
 import { loadVueI18nOptions, loadLocale } from '../messages'
 import {
   loadAndSetLocale,
@@ -33,7 +26,7 @@ import type { LocaleObject, I18nPublicRuntimeConfig, I18nHeadOptions } from '#in
 
 export default defineNuxtPlugin({
   name: 'i18n:plugin',
-  parallel: parallelPlugin,
+  parallel: __PARALLEL_PLUGIN__,
   async setup() {
     const logger = /*#__PURE__*/ createLogger('plugin:i18n')
     const nuxt = useNuxtApp()
@@ -114,7 +107,7 @@ export default defineNuxtPlugin({
         composer.setLocale = async (locale: string) => {
           await loadAndSetLocale(locale, i18n.__firstAccess)
 
-          if (composer.strategy === 'no_prefix' || !hasPages) {
+          if (composer.strategy === 'no_prefix' || !__HAS_PAGES__) {
             await composer.loadLocaleMessages(locale)
             i18n.__setLocale(locale)
             return

src/runtime/plugins/route-locale-detect.ts

@@ -1,5 +1,4 @@
 import { unref } from 'vue'
-import { hasPages } from '#build/i18n.options.mjs'
 import { addRouteMiddleware, defineNuxtPlugin, defineNuxtRouteMiddleware, useNuxtApp } from '#imports'
 import { createLogger } from '#nuxt-i18n/logger'
 import { makeFallbackLocaleCodes } from '../messages'
@@ -41,26 +40,26 @@ export default defineNuxtPlugin({
     await handleRouteDetect(currentRoute.value)
 
     // app has no pages - do not register route middleware
-    if (!hasPages) {
-      return
-    }
-
-    const localeChangeMiddleware = defineNuxtRouteMiddleware(async (to, from) => {
-      __DEBUG__ && logger.log('locale-changing middleware', to, from)
+    if (!__HAS_PAGES__) return
 
-      const locale = await nuxt.runWithContext(() => handleRouteDetect(to))
+    addRouteMiddleware(
+      'locale-changing',
+      defineNuxtRouteMiddleware(async (to, from) => {
+        __DEBUG__ && logger.log('locale-changing middleware', to, from)
 
-      const redirectPath = await nuxt.runWithContext(() =>
-        detectRedirect({ to, from, locale, routeLocale: nuxt._vueI18n.__localeFromRoute(to) }, true)
-      )
+        const locale = await nuxt.runWithContext(() => handleRouteDetect(to))
 
-      nuxt._vueI18n.__firstAccess = false
+        const redirectPath = await nuxt.runWithContext(() =>
+          detectRedirect({ to, from, locale, routeLocale: nuxt._vueI18n.__localeFromRoute(to) }, true)
+        )
 
-      __DEBUG__ && logger.log('redirectPath on locale-changing middleware', redirectPath)
+        nuxt._vueI18n.__firstAccess = false
 
-      return await nuxt.runWithContext(() => navigate({ nuxt, redirectPath, locale, route: to }))
-    })
+        __DEBUG__ && logger.log('redirectPath on locale-changing middleware', redirectPath)
 
-    addRouteMiddleware('locale-changing', localeChangeMiddleware, { global: true })
+        return await nuxt.runWithContext(() => navigate({ nuxt, redirectPath, locale, route: to }))
+      }),
+      { global: true }
+    )
   }
 })

src/runtime/plugins/ssg-detect.ts

@@ -1,5 +1,4 @@
 import { unref } from 'vue'
-import { isSSG } from '#build/i18n.options.mjs'
 import { defineNuxtPlugin, useNuxtApp } from '#imports'
 import { createLogger } from '#nuxt-i18n/logger'
 import { detectBrowserLanguage } from '../internal'
@@ -10,7 +9,7 @@ export default defineNuxtPlugin({
   enforce: 'post',
   setup() {
     const nuxt = useNuxtApp()
-    if (!isSSG || nuxt.$i18n.strategy !== 'no_prefix' || !nuxt.$config.public.i18n.detectBrowserLanguage) return
+    if (!__IS_SSG__ || nuxt.$i18n.strategy !== 'no_prefix' || !nuxt.$config.public.i18n.detectBrowserLanguage) return
 
     const logger = /*#__PURE__*/ createLogger('plugin:i18n:ssg-detect')
     const localeCookie = nuxt.$i18n.getLocaleCookie()

src/runtime/plugins/switch-locale-path-ssr.ts

@@ -1,6 +1,5 @@
 import { defineNuxtPlugin, useNuxtApp } from '#imports'
 import { useSwitchLocalePath } from '#i18n'
-import { SWITCH_LOCALE_PATH_LINK_IDENTIFIER } from '#build/i18n.options.mjs'
 
 // Replace `SwitchLocalePathLink` href in rendered html for SSR support
 export default defineNuxtPlugin({
@@ -10,9 +9,9 @@ export default defineNuxtPlugin({
     const nuxt = useNuxtApp()
     const switchLocalePathLinkWrapperExpr = new RegExp(
       [
-        `<!--${SWITCH_LOCALE_PATH_LINK_IDENTIFIER}-\\[(\\w+)\\]-->`,
+        `<!--${__SWITCH_LOCALE_PATH_LINK_IDENTIFIER__}-\\[(\\w+)\\]-->`,
         `.+?`,
-        `<!--/${SWITCH_LOCALE_PATH_LINK_IDENTIFIER}-->`
+        `<!--/${__SWITCH_LOCALE_PATH_LINK_IDENTIFIER__}-->`
       ].join(''),
       'g'
     )