透過 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 v9:

  • 總大小 (建置):13.7 MB (2.2 MB gzip)
  • 最大 CPU 使用率: 248.50%
  • 最大記憶體使用量:3057.23 MB
  • 經過時間:0 小時 0 分 12 秒

Nuxt I18n Micro:

  • 總大小 (建置):229 KB (152 KB gzip) — 小了 13.47 MB 或 98.36% (gzip 小了 2.05 MB 或 93.10%)
  • 最大 CPU 使用率:195.00% — 降低了 21.53%
  • 最大記憶體使用量:1140.63 MB — 減少了 1916.6 MB 記憶體
  • 經過時間:0 小時 0 分 7 秒 — 快了 5 秒

伺服器效能 (1 萬次請求)

Nuxt I18n v9:

  • 每秒請求數:34 #/秒 (平均值)
  • 每次請求時間:1487.60 毫秒 (平均值)
  • 最大記憶體使用量:9958.67 MB

Nuxt I18n Micro:

  • 每秒請求數:339 #/秒 (平均值) — 每秒多出 305 個請求 (增加 897.06%)
  • 每次請求時間:5.10 毫秒 (平均值) — 快了 1482.50 毫秒 (減少 99.66%)
  • 最大記憶體使用量:405.20 MB — 減少了 9553.47 MB 記憶體使用量 (減少 95.93%)

這些結果清楚地表明,Nuxt I18n Micro 在每個關鍵領域的效能都顯著優於原始模組。

主要功能

  • 🌐 精巧而強大:儘管尺寸小巧,Nuxt I18n Micro 專為大型專案設計,專注於效能和效率。
  • 最佳化建置和執行時:減少建置時間、記憶體使用量和伺服器負載,使其成為高流量應用程式的理想選擇。
  • 🛠 極簡設計:該模組圍繞僅 5 個組件(1 個模組和 4 個外掛程式)構建,使其易於理解、擴展和維護。
  • 📏 高效路由:由於基於動態 regex 的路由,無論語言環境數量如何,都只產生 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

遷移

貢獻