Lazy Loading & Code Splitting

What technique should be used for handling translations in a lazy-loaded application?

const loadTranslations = async (locale) => {
  const translations = await import(
    /* webpackChunkName: "translations-[request]" */
    `./translations/${locale}.json`
  );
  return translations.default;
};

const setLanguage = async (locale) => {
  const translations = await loadTranslations(locale);
  i18n.addResourceBundle(locale, 'translation', translations);
  i18n.changeLanguage(locale);
};

Load all translations at startup
Use only English translations
Load translations on demand by locale
Loading translations on demand by locale is the optimal approach because: 1) It reduces the initial bundle size by not loading unused translations, 2) Allows for efficient caching of translation files by locale, 3) Provides better performance for users who only use one language, 4) Can be combined with preloading for anticipated language switches. The example shows proper implementation with dynamic imports and webpack chunk naming for better organization and caching, while maintaining a clean interface for language switching.
Avoid translations entirely

Next Question (20/20)