All language files are loaded on first request when using SWC

Upgrading a medium-sized project to Nextjs 12, we noticed that switching to SWC from Babel increases our bundle size considerably. One culprit seems to be next-translate.

Before the upgrade, language files have their own chunks and only a small part of the “pages/_app” bundle is used by the library:

With SWC (deleted .babelrc), we see all language files included in the app:

Is this a known issue or are we doing something wrong?

We do have a custom fallback in our i18n.js:

module.exports = {
  locales: ["en", "de"],
  defaultLocale: "en",
  loadLocaleFrom: async (lang, ns) => {
    const locales = await import(`./locales/${lang}/${ns}.json`).then(
      (m) => m.default
    );
    const defaultLocales =
      lang != "en"
        ? await import(`./locales/en/${ns}.json`).then((m) => m.default)
        : {};
    return { ...defaultLocales, ...locales };
  },
  pages: { ... }
};

[derkoe]

I have found a solution for that. The code splitting works correctly when the imports are directly in “pages/_app”.

Here is an example with complex language fallback logic and “lang-country” locales:

i18n.js

module.exports = {
  locales: ["en", "de-AT", "sk-SK"],
  defaultLocale: "en",
  pages: {
    "*": ["my-bundle"],
  },
  loader: false,
  localeDetection: false,
};

pages/app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import appWithI18n from "next-translate/appWithI18n";
import i18nConfig from "../i18n";
import merge from 'lodash/merge';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithI18n(MyApp as any, {
  ...i18nConfig,
  loadLocaleFrom: (locale, ns) => {
    const englishTexts = import(`../locales/en/${ns}.json`);
    let countrySpecific = Promise.resolve({});
    let languageOnly = Promise.resolve({});
    if (locale) {
      countrySpecific = import(
        `../locales/${locale.replace("-", "_")}/${ns}.json`
      ).catch(() => ({}));
      languageOnly = import(
        `../locales/${locale.substring(0, 2)}/${ns}.json`
      ).catch(() => ({}));
    }
    return Promise.all([englishTexts, countrySpecific, languageOnly]).then(
      ([en, country, language]) => merge({}, en, country, language)
    );
  },
});

[alisakova]

hi! we have the same issue in our team