example-nuxt-i18n-multiple-files-load

A Nuxt.js demonstration project to benchmark and verify the performance impact of loading multiple i18n translation files, particularly with SSR disabled.

Overview

This project is designed to measure how loading multiple translation files affects page performance metrics (especially LCP - Largest Contentful Paint) in a Nuxt.js application using the @nuxtjs/i18n module.

Key Features

• Multiple Language Support: 4 languages (Japanese, English, Simplified Chinese, Traditional Chinese)
• Multiple File Loading: Each language loads 11 separate JSON files (1 page.json + 10 locale files)
• Performance Testing Interface: Built-in UI for testing and verification
• 4,400+ Translation Keys: 100 keys per file × 11 files × 4 languages
• Client-Side Only: SSR disabled to demonstrate client-side loading behavior

Tech Stack

• Nuxt.js v4.2.0
• Vue 3 v3.5.22
• @nuxtjs/i18n v10.2.0
• TypeScript
• pnpm v10.20.0
• Node.js v22.21.1

Project Structure

.
├── app/
│   ├── app.vue              # Root component
│   └── pages/
│       └── index.vue        # Main demo page with language switcher
├── i18n/
│   ├── i18n.config.ts       # Vue I18n configuration
│   └── locales/             # Translation files
│       ├── ja/              # Japanese (11 files)
│       ├── en/              # English (11 files)
│       ├── zh-Hans/         # Simplified Chinese (11 files)
│       └── zh-Hant/         # Traditional Chinese (11 files)
├── scripts/
│   └── generate-locale-files.js  # Generates test translation files
├── nuxt.config.ts           # Nuxt configuration
└── package.json

Setup

Prerequisites

• Node.js v22.21.1 or higher
• pnpm v10.20.0 or higher

Installation

# Install dependencies
pnpm install

# Generate locale files (if needed)
node scripts/generate-locale-files.js

Usage

Development

pnpm run dev

Visit http://localhost:3000 to see the demo page.

Build

pnpm run build

Generate Static Site

pnpm run generate

Preview Production Build

pnpm run preview

Performance Testing

This project is specifically designed for performance measurement. Follow these steps:

1. Open DevTools: Press F12 or right-click and select "Inspect"

2. Enable Network Throttling:

   • Go to the Network tab
   • Set throttling to "Fast 4G" to simulate real-world conditions

3. Test Language Switching:

   • Click one of the language buttons (日本語, English, 简体中文, 繁體中文)
   • Observe the network requests in DevTools

4. Measure Performance:

   • Go to the Performance tab
   • Start recording
   • Switch languages
   • Stop recording and analyze LCP (Largest Contentful Paint)

Key Observations

• Each language switch loads 10 locale files sequentially
• Page content waits for all locale files to load
• With ssr: false, there's no server-side caching
• Larger number of files increases initial load time

Configuration

Nuxt Config (nuxt.config.ts)

export default defineNuxtConfig({
  ssr: false,  // Client-side only
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      {
        code: 'ja',
        files: ['ja/page.json', ...Array.from({ length: 10 }, (_, i) => `ja/locale${i + 1}.json`)]
      },
      // ... other locales
    ],
    defaultLocale: 'ja',
  }
})

I18n Config (i18n.config.ts)

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'ja',
  fallbackLocale: ['en', 'ja']
}))

License

This is a demonstration/testing project. Use freely for learning and benchmarking purposes.