The Challenge
Building a website in one language is easy. Building it in 31 languages—while keeping it lightning fast—is hard.
At ToolArks, we wanted to be truly global. But a naive approach to internationalization (i18n) usually leads to bloated bundles.
The Problem: Huge JSON Files
Initially, we had a single zh.json file for Chinese. As we added Wikis, FAQs, and Tips for 13 tools, this file grew to over 50KB. Multiplied by 31 languages, we were dealing with MBs of text.
If a user visited just the Home Page, they were downloading the translations for Age Calculator, Base64 Converter Converter, and everything else.
The Solution: Granular Splitting
We refactored our architecture to split translations by "namespace".
Instead of zh.json, we now have:
zh/Common.jsonzh/HomePage.jsonzh/AgeCalculator.json
Lazy Loading
We then configured next-intl to only load the namespaces required for the current page.
// Simplified logic
const messages = (await import(`../messages/${locale}/${namespace}.json`)).default;
This reduced our First Load JS size by over 60%. The result? A site that feels instant, whether you are in Tokyo, New York, or Berlin.