Next.js使用国际化翻译时如何减小页面props体积并优化JS包大小

按路由/命名空间拆分翻译资源 #

• 提前在项目中维护路由与翻译命名空间的映射关系，服务端仅返回当前页面所属命名空间下的翻译key，而非全量3万条数据。
• App Router 场景下，可直接在对应page.js/layout.js服务端组件中拉取当前路由专属翻译资源；Pages Router 场景下，可在getServerSideProps/getStaticProps阶段过滤出当前页面需要的key后再通过props传递。

构建阶段静态扫描剔除无用key #

• 借助SWC/Babel插件或者自定义构建脚本，在编译阶段静态扫描全项目用到的翻译key，打包时直接从翻译对象中剔除未被引用的key。
• 如果存在动态拼接的翻译key（如t(error.${code})），需要提前把这类动态前缀的所有key加入白名单，避免被误删。目前主流的Next.js i18n库如next-intl、next-i18next都有配套的扫描工具可以直接使用。

优先在服务端组件消费翻译 #

• Next.js 13+ App Router 场景下，尽量把翻译逻辑放在服务端组件执行，翻译结果直接嵌入HTML返回，不需要将翻译对象传递到客户端，完全避免翻译资源占用客户端包体积。仅客户端交互组件需要的少量翻译key，再单独抽取后传递到客户端即可。

翻译资源独立懒加载 #

• 不要将翻译资源打包进主JS bundle，拆分为独立的JSON文件，页面初始化时仅加载当前语言、当前页面对应的翻译JSON，切换语言、跳转路由时再异步加载对应资源。已经加载过的翻译资源可缓存在本地，二次访问无需重复请求。

压缩翻译资源体积 #

• 生产环境对翻译JSON做minify处理，去掉无用空格、换行，开启gzip/brotli压缩，进一步减小传输体积。
• 可将嵌套结构的翻译对象改为扁平化结构，减少JSON的冗余字符，比如把{"btn":{"confirm":"确认","cancel":"取消"}}改为{"btn.confirm":"确认","btn.cancel":"取消"}，能有效减少JSON体积。

内容的提问来源于stack exchange，提问作者Zanashevich