Dynamically import (Lazy loading) translation files in React-Intl using Webpack code-splitting

Instead of bundling all the translation file in the main bundle. We can use Webpack’s code splitting function to split the translation files into separate chunks and load them on demand. This can reduce the main bundle size when you have multiple langauges to support and imporve App initial load speed.

Let’s start with a minimal React application using React Intl. Assuming we have the following translation files: