通过 100 多个技巧学习 Nuxt!

nuxt-i18n-micro
nuxt-i18n-micro

I18n Micro 是一个快速、简单且轻量级的国际化 (i18n) 模块。

npm versionnpm downloadsLicenseNuxtDonate

logo

Nuxt I18n Micro

Nuxt I18n Micro 是一个为 Nuxt 设计的快速、简单和轻量级的国际化(i18n)模块。尽管体积小巧,但它在设计时考虑了大型项目,与传统的 i18n 解决方案(如 nuxt-i18n)相比,提供了显著的性能改进。该模块从头开始构建,旨在实现高效率,专注于最大限度地缩短构建时间、减少服务器负载并缩小捆绑包大小。

为什么选择 Nuxt I18n Micro?

创建 Nuxt I18n Micro 模块是为了解决原始 nuxt-i18n 模块中发现的关键性能问题,特别是在高流量环境和具有大型翻译文件的项目中。nuxt-i18n 的主要问题包括

  • 高内存消耗:在构建和运行时都会消耗大量内存,导致性能瓶颈。
  • 性能缓慢:尤其是在处理大型翻译文件时,会导致构建时间和服务器响应明显减慢。
  • 捆绑包过大:生成大型捆绑包,对应用程序性能产生负面影响。
  • 内存泄漏和错误:已知在重负载下会出现内存泄漏和不可预测的行为。

性能对比

为了展示 Nuxt I18n Micro 的效率,我们在相同条件下进行了测试。两个模块都在同一硬件上使用 10MB 的翻译文件进行了测试。

构建时间和资源消耗

Nuxt I18n:

  • 总大小:54.7 MB (3.31 MB gzip)
  • 最大 CPU 使用率: 391.4%
  • 最大内存使用量:8305 MB
  • 耗时:0 小时 1 分 31 秒

Nuxt I18n Micro:

  • 总大小:1.93 MB (473 kB gzip) — 缩小 96%
  • 最大 CPU 使用率:220.1% — 降低 44%
  • 最大内存使用量:655 MB — 减少 92% 的内存
  • 耗时:0 小时 0 分 5 秒 — 快 94%

服务器性能(1 万次请求)

Nuxt I18n:

  • 每秒请求数:49.05 #/秒(平均值)
  • 每次请求时间:611.599 毫秒(平均值)
  • 最大内存使用量:703.73 MB

Nuxt I18n Micro:

  • 每秒请求数:61.18 #/秒(平均值)— 每秒请求数增加 25%
  • 每次请求时间:490.379 毫秒(平均值)— 快 20%
  • 最大内存使用量:323.00 MB — 减少 54% 的内存使用量

这些结果清楚地表明,Nuxt I18n Micro 在每个关键领域都显著优于原始模块。

主要功能

  • 🌐 紧凑而强大:尽管体积小巧,Nuxt I18n Micro 专为大型项目而设计,专注于性能和效率。
  • 优化的构建和运行时:减少构建时间、内存使用量和服务器负载,使其成为高流量应用程序的理想选择。
  • 🛠 简约设计:该模块仅围绕 5 个组件(1 个模块和 4 个插件)构建,使其易于理解、扩展和维护。
  • 📏 高效路由:无论语言环境的数量如何,都只生成 2 个路由,这得益于基于动态正则表达式的路由,而其他 i18n 模块则为每个语言环境生成单独的路由。
  • 🗂 精简的翻译加载:仅支持 JSON 文件,翻译在用于公共文本(例如,菜单)的全局文件和页面特定的文件之间拆分,如果不存在,则会在 dev 模式下自动生成。

快速设置

在您的 Nuxt 应用程序中使用以下命令安装该模块

npm install nuxt-i18n-micro

然后,将其添加到您的 nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-i18n-micro',
  ],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', dir: 'ltr' },
      { code: 'fr', iso: 'fr-FR', dir: 'ltr' },
      { code: 'ar', iso: 'ar-SA', dir: 'rtl' },
    ],
    defaultLocale: 'en',
    translationDir: 'locales',
    meta: true,
  },
})

就这样!您现在可以在您的 Nuxt 应用程序中使用 Nuxt I18n Micro 了。

文档

插件方法

性能

性能测试结果

组件

SEO

迁移

贡献