企业官网建设流程全解析

在 Vue 3 和 Nuxt 生态中开发多语言（i18n）应用，`vue-i18n` 长期以来都是大家不假思索的首选。Kazupon 和社区多年来维护出了一个非常成熟、功能完备的生态，陪伴了无数前端团队的业务出海。

但要理解 `vue-i18n` 为什么会有今天的局限，得回到它最初设计的时代背景：它诞生于经典的单页面应用（SPA）时代，那时动态导入（`import()`）和路由级代码分割尚未普及。在那个时期，应用启动时把包含所有语言的庞大翻译对象一次性加载到内存中，是最自然、最合理的方案。

然而，现代前端工程的核心诉求已经变成了极致的页面体积与加载性能优化，无论你用的是 Nuxt、服务端渲染（SSR）、静态站点生成（SSG）还是细粒度的动态页面按需加载。在当下的架构中，这种全量集中式的全局 Provider 模式已经演变成了一个极其严重的架构瓶颈。

首先，为什么 `vue-i18n` 库本身的打包产物体积会这么庞大？一个仅仅引入了 `vue-i18n` 的空组件，在渲染任何文字前就会吃掉 **24.3 KB gzip（未压缩 83.2 KB）** 的体积。原因在于它必须把一套完整的运行时解析引擎打包发给浏览器，在客户端动态求值类似 `{{number}}` 或 `{name}` 的插值变量、复杂的复数规则（Pluralization）以及列表格式化。不仅如此，多语言路由与 URL 管理往往还需要打包额外的客户端逻辑，去处理 Cookie 存储、语言检测以及运行时的 URL 前缀重定向。

而这，还只是表面问题。更致命的深层缺陷是：极其严重的跨页面文案泄露（Copy Leakage）。

在典型的 Vue 项目中，`createI18n({ messages })` 会在内存里实例化一棵包含全站所有语言、所有词条的全局大树。这导致一个非常尴尬的现象：用户仅仅打开了一个简单的 `/contact`（联系我们）页面，浏览器却被迫把 `/dashboard`、`/pricing`、`/settings` 等整个站点的翻译字典全部下载下来。在我们针对一个标准的 10 页面、10 种语言的 Vite + Vue 3 应用的基准测试中，**单个页面下载的翻译文案里，有整整 90% 根本属于完全不相关的其他路由**。更严重的是，因为 `useI18n()` 强绑定了这个全局实例，单独编译一个隔离组件，其产物平均体积居然高达 **196 KB**。

此外，由于 `t("key.path")` 是在运行时根据字符串动态求值的，Vite、Rollup 等现代打包工具根本无法静态推断到底哪些 key 被真正调用了，未使用的翻译完全无法被 Tree-shaking 剔除，而键名拼写错误也无法在构建期被 TypeScript 捕获，只能默默在生产环境变成缺失文本。

Intlayer 是如何破局的？

Intlayer 彻底抛弃了臃肿的全局运行时 Provider 和复杂的客户端解析引擎，通过**在构建期剔除所有多余逻辑，并利用静态编译将文案直连到对应组件**，从根源上解决了这些问题。

1. 编译期预编译（零运行时解析开销）

不再把解析 `{{number}}` 等插值变量的重型解析器或者处理 Cookie 与 URL 前缀的逻辑扔给浏览器运行时，Intlayer 会在项目构建期提前将这些逻辑解析并优化完毕。浏览器接收到的只有剥离了冗余引擎的极轻量纯净代码，运行时体积直接腰斩至仅仅 **3.9 KB**（使用兼容适配层也仅为 7.9 KB）。

2. 组件级文案直接绑定

不再把全站文本堆进无休止膨胀的 `locales/en.json` 中，Intlayer 提倡将字典文件直接放在消费它的组件旁边（例如在 `Footer.vue` 旁边创建 `Footer.content.ts`）。这样一来，没有被引用的组件绝不会加载任何无用文案，死代码与未渲染组件彻底告别文案冗余。

3. 基于 Vite 的零网络瀑布动态加载

不仅如此，Intlayer 深度结合了 Vite 的高级模块转换机制。即使在使用动态路由加载和代码分割时，Intlayer 也会将该 chunk 实际消费的本地化文案直接内联打包进该代码块中。在渲染前**没有任何额外的网络请求，也没有等待远程 JSON 字典加载的请求瀑布**。组件代码与它精确需要的文案作为一个 chunk 一次性加载到位。

4. 严格的编译期类型安全

Intlayer 会根据你的文案声明直接自动生成严格的 TypeScript 类型定义。你不仅能在 IDE 中获得精准的 key 自动补全，而且任何漏译或键名拼写错误都会直接在构建阶段报错，彻底杜绝生产环境 fallback 导致的体验事故。

5. 0% 跨页泄露，打包体积缩小 3 倍

在构建阶段，Intlayer 编译器会静态分析组件的调用点并按需拆分字典，确保每个路由只下载当前页面真正渲染的文案。在基准测试中，跨页文案泄露直接从 **90% 骤降至 0%**，单页 JavaScript 体积从 **134.9 KB 减少到 47.0 KB**（gzip）（作为对比，完全不引入任何 i18n 库的基础应用体积为 41.3 KB）。

6. 借助 `@intlayer/vue-i18n` 实现平滑无感迁移

如果你手头已经有基于 `vue-i18n` 的老项目，根本不需要推倒重写组件代码。兼容适配层 `@intlayer/vue-i18n` 提供了与原版完全相同的 API（`useI18n`、`t()`、`d()`、`n()`、`$t`、`v-t`）。只需接入 Vite 插件，并删掉原先那行庞大的 `messages` 导入，现有的 `t("key")` 调用就会自动直连编译拆分后的按需字典。**不用修改任何一行 `.vue` 文件**，即可实现运行时缩小 3 倍、组件产物体积缩减 23 倍。

如果你正在生产环境维护多语言的 Vue 或 Nuxt 应用，不妨现在就打开浏览器的 Network 面板看一眼某个子路由：你会发现首屏传输的很多 JavaScript 代码，实际上全是当前用户根本看不见的其他页面文案。

关于详细的实测数据、基准测试对比和完整迁移指南，可以参考以下两篇深度长文：

https://intlayer.cn/blog/vue-i18n-vs-intlayer

https://intlayer.cn/blog/vue-i18n-vs-intlayer-vue-i18n