Liệu vue-i18n Đã Lỗi Thời Vào Năm 2026?

Trong hệ sinh thái Vue, hiếm có thư viện nào đạt được mức độ phổ biến như vue-i18n. Được Kazupon chăm sóc từ thời Vue 2, đây là nền tảng cho @nuxtjs/i18n và là lựa chọn gần như mặc định cho các ứng dụng Vue đa ngôn ngữ.

Thế nhưng, kết quả benchmark năm 2026 lại đem đến một bất ngờ lớn: vue-i18n là runtime bản địa hóa nặng nhất trong số tất cả các framework frontend được đánh giá.

Trên một dự án Vite + Vue ban đầu chỉ nặng 31.5 KB, việc bổ sung vue-i18n đã đẩy dung lượng JavaScript trung bình mỗi trang lên tới 136.4 KB, tăng hơn 4 lần so với kích thước gốc.

Làm thế nào mà một framework nổi tiếng vì sự nhẹ nhàng lại phải gánh một công cụ i18n nặng đến vậy? Và liệu mô hình thuần runtime này còn phù hợp trong kỷ nguyên mới?

Điểm Nhấn Chính

Runtime nặng nhất từng được thử nghiệm:

Với 24.3 KB gzipped (83.2 KB minified) trước khi bổ sung bất kỳ văn bản dịch nào, vue-i18n nặng gấp khoảng 9 lần so với nhân runtime của intlayer (2.7 KB).

Tăng 330% dung lượng trang:

vue-i18n đã nâng kích thước trang Vue cơ bản từ 31.5 KB lên 136.4 KB. Trái lại, Intlayer chỉ tiêu tốn 59.3 KB, mang lại payload nhẹ hơn 56%.

Trình biên dịch ẩn trong trình duyệt:

Nếu không cấu hình các bí danh (alias) riêng trong bundler, vue-i18n mặc định sẽ gửi một trình biên dịch thông điệp đầy đủ xuống trình duyệt để phân tích chuỗi tại chỗ.

Nhịp độ cập nhật chậm:

Trong năm vừa qua, vue-i18n ghi nhận khoảng 259 commit, chủ yếu tập trung sửa lỗi và tương thích các phiên bản của Vue.

Thiếu vắng công cụ hiện đại chính thức:

Không có hỗ trợ chính thức cho Language Server (LSP), máy chủ MCP cho AI hay các quy trình dịch tự động qua dòng lệnh.

Bảo Trì vs. Công Cụ Hiện Đại

Hiển thị tất cả nội dung bảng

Hiển thị tất cả nội dung bảng

Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng

Kho lưu trữ	Lượt sao	Tổng commit	Commit / năm	Commit gần nhất
intlify/vue-i18n
aymericzip/intlayer

Số liệu 12 tháng qua:

• intlify/vue-i18n: 259 commit (bảo trì định kỳ cho Vue 3 và Nuxt).
• aymericzip/intlayer: 4.343 commit (liên tục cải tiến trình biên dịch, công cụ LSP và tích hợp AI agent).

Một thư viện lâu năm luôn có tính ổn định cao. Tuy nhiên, lập trình web ngày nay dựa trên phân tích AST khi build, loại bỏ mã không dùng và dịch tự động bằng AI. Một hệ thống phụ thuộc vào việc thực thi trên trình duyệt khó lòng áp dụng hiệu quả các tiện ích này.

Đo Lường Hiệu Năng Trên Vite + Vue

Thử nghiệm trên ứng dụng gồm 10 trang và 10 ngôn ngữ được xây dựng với Vite và Vue 3:

Đo lường trong môi trường trình duyệt thật với nén gzip production. Số liệu đầy đủ xem tại tài liệu benchmark Vue.

Kích Thước Cơ Bản Ban Đầu

Kích thước trước khi nạp thêm các chuỗi dịch thuật:

Chỉ riêng phần runtime của vue-i18n đã chiếm 24.3 KB gzipped, gần tương đương với kích thước của toàn bộ nhân Vue. Trong khi đó, Intlayer chỉ thêm vào vỏn vẹn 2.7 KB.

Dung Lượng Trang Và Rò Rỉ Bản Dịch

Những Quan Sát Cốt Lõi

Mức tăng tỷ lệ rất cao:

Vì nền tảng của Vue rất nhỏ gọn (~31 KB), nên việc nạp vue-i18n khiến kích thước trang tăng vọt hơn 4 lần.

Rò rỉ dữ liệu sang route khác:

Theo mặc định, 90% dữ liệu dịch được gửi tới một route thực chất thuộc về các trang khác. Intlayer loại bỏ hoàn toàn lượng dữ liệu này, đưa mức rò rỉ về 0.0%.

Độ phình của component có phạm vi riêng:

Các component có phạm vi dịch cục bộ đạt kích thước trung bình 196 KB ở vue-i18n do trùng lặp từ điển, so với chỉ 6.5 KB khi dùng Intlayer.

Tại Sao vue-i18n Lại Nặng?

Trình Biên Dịch AST Bị Gửi Xuống Trình Duyệt

vue-i18n mang theo trình biên dịch định dạng thông điệp của riêng mình. Quy tắc số nhiều và nội suy biến được phân tích cú pháp thành Abstract Syntax Tree (AST) trực tiếp trong trình duyệt khi ứng dụng hoạt động.

Để ngăn điều này, bạn cần cấu hình alias cho vue-i18n/dist/vue-i18n.runtime.esm-bundler.js và biên dịch trước bằng @intlify/unplugin-vue-i18n. Bước cấu hình này thường bị nhiều dự án bỏ quên.

Thiết Kế Tính Năng Nguyên Khối

vue-i18n bao gồm cả bộ xử lý ngày tháng, con số, thông điệp liên kết, cầu nối Options API cũ ($t, v-t), và các reactive proxy. Cho dù bạn chỉ muốn hiển thị những câu chữ đơn giản trong <script setup>, toàn bộ thư viện vẫn được nạp đầy đủ.

Chuỗi Khóa Động Khóa Chặt Khả Năng Tree-Shaking

Do "home.hero.title" được diễn giải ở runtime, các công cụ build không thể biết chuỗi nào đang được dùng. Do đó, các chuỗi không cần thiết vẫn ở lại trong bundle.

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("home.hero.title") }}</h1>
</template>

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Trình biên dịch Intlayer theo dõi trực tiếp các thuộc tính được truy cập và lược bỏ dữ liệu thừa trước khi đóng gói các file cho client. Xem chi tiết tại tối ưu hóa bundle.

Trải Nghiệm Lập Trình Viên (DX)

Thư Mục Riêng vs. Đặt Cùng Component

Với vue-i18n, các bản dịch nằm ở thư mục locales/ tách rời. Intlayer cho phép khai báo nội dung trực tiếp cạnh component:

{
  "hero": {
    "title": "Ship in every language"
  }
}

{
  "hero": {
    "title": "Phát hành trên mọi ngôn ngữ"
  }
}

<script setup>
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<template>
  <h1>{{ t("hero.title") }}</h1>
</template>

import { t, type Dictionary } from "intlayer";

export default {
  key: "hero",
  content: {
    title: t({
      en: "Ship in every language",
      vi: "Phát hành trên mọi ngôn ngữ",
    }),
  },
} satisfies Dictionary;

<script setup>
import { useIntlayer } from "vue-intlayer";

const { title } = useIntlayer("hero");
</script>

<template>
  <h1>{{ title }}</h1>
</template>

Khi bạn đổi tên hoặc xóa Hero.vue, file nội dung đi kèm cũng được xử lý đồng thời.

Gợi Ý Code vs. Kiểm Tra Tính Đầy Đủ Chặt Chẽ

DefineLocaleMessage mang đến gợi ý mã dựa trên schema ban đầu. Tuy nhiên, nó không đảm bảo tất cả các ngôn ngữ đều đầy đủ. Việc xóa một khóa khỏi vi.json không hề khiến tiến trình build của TypeScript bị gián đoạn.

Với Intlayer, từ điển được kiểm định chặt chẽ. Kích hoạt strictMode sẽ khiến bản build báo lỗi ngay lập tức nếu thiếu bản dịch ở bất kỳ ngôn ngữ nào.

Công Cụ Trình Soạn Thảo Và AI

Quy Trình Dịch Thuật

vue-i18n không có lệnh tích hợp để dịch văn bản. Các nhóm thường phải xuất file ra các dịch vụ ngoài như Crowdin hoặc Phrase.

Intlayer cung cấp sẵn các tính năng này:

Tự Động Điền Bằng AI Cục Bộ (intlayer fill):

Dịch các khóa còn thiếu bằng chính khóa API OpenAI, Anthropic, Mistral hoặc Gemini của bạn.

CMS Trực Quan Tự Host:

Triển khai Intlayer CMS để đội ngũ nội dung có thể chỉnh sửa văn bản trực quan với khả năng lưu trực tiếp vào Git.

Giấy Phép Mã Nguồn Mở:

Tất cả công cụ đều được phát hành theo giấy phép Apache 2.0.

Khi Nào vue-i18n Vẫn Là Lựa Chọn Hợp Lý?

Làm Thế Nào Để Cải Thiện Cấu Hình vue-i18n Hiện Tại?

Intlayer cung cấp các gói tương thích trực tiếp giúp tái tạo chính xác các signature hàm của vue-i18n và @nuxtjs/i18n (useI18n, $t, <i18n-t>). Bạn không cần viết lại template hay composable mà vẫn có thể tận hưởng hiệu quả của kiến trúc gọn nhẹ định hướng trình biên dịch.

Thiết lập chỉ với một dòng lệnh duy nhất:

npx intlayer init --interactive

Công cụ CLI tương tác này sẽ tự động:

1. Cài đặt gói tương thích @intlayer/vue-i18n hoặc @intlayer/nuxt-i18n.
2. Cấu hình alias trong bundler Vite hoặc Nuxt để các lệnh import và thẻ template hiện có trỏ thẳng tới Intlayer, cho phép bạn gỡ bỏ vue-i18n khỏi package.json.
3. Kích hoạt ngay chẩn đoán Language Server (LSP), loại bỏ parser AST 24 KB khỏi bundle phía client và mở ra quy trình dịch AI cục bộ mà không cần đại tu mã nguồn.

Để xem hướng dẫn chi tiết từng bước, hãy tham khảo các tài liệu chuyên sâu:

• Tương thích tức thì: Giữ nguyên các template hiện có bằng cách dùng tầng tương thích vue-i18n hoặc @nuxtjs/i18n.
• Hướng dẫn chuyển đổi: Chuyển file JSON sang từ điển có cấu trúc qua các hướng dẫn: từ vue-i18n hoặc từ @nuxtjs/i18n.
• Giải pháp kết hợp: Giữ lại vue-i18n ở runtime trong khi kết hợp Intlayer với vue-i18n để có được sự an toàn kiểu dữ liệu và tính năng dịch AI cục bộ.

Đo lường dung lượng và độ rò rỉ của trang web với công cụ quét SEO i18n miễn phí:

Bài Viết Nên Đọc

• Vue & Vite i18n Benchmark: Đánh Giá Chi Tiết Hiệu Năng
• So Sánh vue-i18n và Intlayer
• Liệu next-intl Đã Lỗi Thời Vào Năm 2026?
• Quốc Tế Hóa Dựa Trên Trình Biên Dịch vs Khai Báo