Lazy Loading Translations to Reduce Initial Bundle Size

Loading all translation files upfront significantly increases the initial JS payload, especially for apps with many languages.

Use dynamic imports to load translation bundles on demand. Most i18n libraries support backend plugins or async loading.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import HttpBackend from 'i18next-http-backend';

i18n
  .use(HttpBackend)
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
    ns: ['common'],
    defaultNS: 'common',
  });

// Lazy load a namespace when needed
await i18n.loadNamespaces('dashboard');

// next-intl: only load messages for the current locale
// Webpack/Next.js splits this automatically via dynamic import:
export default getRequestConfig(async ({ locale }) => ({
  messages: (await import(`../messages/${locale}.json`)).default,
}));

Lazy loading translations reduces the initial parse and execution cost. A user of the English locale never downloads Arabic translation files, saving significant bandwidth in multi-language apps.