@intlayer/docs 9.4.2 → 9.4.3

package/blog/vi/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: Liệu vue-i18n Đã Lỗi Thời Vào Năm 2026?
+description: vue-i18n là chuẩn mực cho Vue và Nuxt suốt cả thập kỷ. Nhưng trong các bài kiểm tra benchmark, nó lại là runtime i18n nặng nhất trên web. Tìm hiểu nguyên nhân tại đây.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Quốc tế hóa
+  - i18n
+  - Vue
+  - Nuxt
+  - Dung lượng bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# 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?
+
+<TOC/>
+
+## Đ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
+
+| Kho lưu trữ           | Lượt sao                                                                                                                                               | Tổng commit                                                                                                                                                         | Commit / năm                                                                                                                                                       | Commit gần nhất                                                                                                                              |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `intlify/vue-i18n`    | [![stars](https://img.shields.io/github/stars/intlify/vue-i18n?style=for-the-badge&label=stars)](https://github.com/intlify/vue-i18n/stargazers)       | [![commits](https://img.shields.io/github/commit-activity/t/intlify/vue-i18n?style=for-the-badge&label=commits)](https://github.com/intlify/vue-i18n/commits)       | [![yearly](https://img.shields.io/github/commit-activity/y/intlify/vue-i18n?style=for-the-badge&label=%2Fyear)](https://github.com/intlify/vue-i18n/commits)       | [![last](https://img.shields.io/github/last-commit/intlify/vue-i18n?style=for-the-badge)](https://github.com/intlify/vue-i18n/commits)       |
+| `aymericzip/intlayer` | [![stars](https://img.shields.io/github/stars/aymericzip/intlayer?style=for-the-badge&label=stars)](https://github.com/aymericzip/intlayer/stargazers) | [![commits](https://img.shields.io/github/commit-activity/t/aymericzip/intlayer?style=for-the-badge&label=commits)](https://github.com/aymericzip/intlayer/commits) | [![yearly](https://img.shields.io/github/commit-activity/y/aymericzip/intlayer?style=for-the-badge&label=%2Fyear)](https://github.com/aymericzip/intlayer/commits) | [![last](https://img.shields.io/github/last-commit/aymericzip/intlayer?style=for-the-badge)](https://github.com/aymericzip/intlayer/commits) |
+
+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).
+
+[![Star History Chart](https://api.star-history.com/chart?repos=intlify%2Fvue-i18n%2Caymericzip%2Fintlayer&type=date&legend=top-left)](https://www.star-history.com/#intlify/vue-i18n&aymericzip/intlayer)
+
+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:
+
+<I18nBenchmark framework="vite-vue" vertical/>
+
+<ClickToOpenIframe
+src="https://intlayer.org/markdown?url=https%3A%2F%2Fraw.githubusercontent.com%2Fintlayer-org%2Fbenchmark-i18n%2Fmain%2Freport%2Fscripts%2Fsummarize-vite_vue.md"
+width="100%"
+height="600px"
+style="border:none;"
+/>
+
+> Đ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](https://intlayer.org/vi/doc/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:
+
+| Thư viện          | Gzipped    | Minified   |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+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
+
+| Cấu hình         | JS trung bình/trang (gz) | Rò rỉ ngôn ngữ | Rò rỉ trang khác | Component trung bình (gz) |
+| ---------------- | ------------------------ | -------------- | ---------------- | ------------------------- |
+| Gốc (không i18n) | 31.5 KB                  | 0.0%           | 90.0%            | 0.9 KB                    |
+| `vue-i18n`       | **136.4 KB**             | 50.2%          | 90.0%            | 196.0 KB                  |
+| Intlayer         | **59.3 KB**              | 51.1%          | **0.0%**         | **6.5 KB**                |
+
+### 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.
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("home.hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+[Trình biên dịch Intlayer](https://intlayer.org/vi/doc/compiler) 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](https://intlayer.org/vi/doc/concept/bundle-optimization).
+
+## 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:
+
+<Tabs defaultTab="intlayer" group="techno">
+  <Tab label="vue-i18n" value="vue-i18n">
+
+```json fileName="locales/en.json"
+{
+  "hero": {
+    "title": "Ship in every language"
+  }
+}
+```
+
+```json fileName="locales/vi.json"
+{
+  "hero": {
+    "title": "Phát hành trên mọi ngôn ngữ"
+  }
+}
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useI18n } from "vue-i18n";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <h1>{{ t("hero.title") }}</h1>
+</template>
+```
+
+  </Tab>
+  <Tab label="Intlayer" value="intlayer">
+
+```ts fileName="Hero.content.ts"
+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;
+```
+
+```vue fileName="Hero.vue"
+<script setup>
+import { useIntlayer } from "vue-intlayer";
+
+const { title } = useIntlayer("hero");
+</script>
+
+<template>
+  <h1>{{ title }}</h1>
+</template>
+```
+
+  </Tab>
+</Tabs>
+
+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`](https://intlayer.org/vi/doc/concept/configuration) 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
+
+| Tính năng                 | `vue-i18n`             | Intlayer                                                                  |
+| ------------------------- | ---------------------- | ------------------------------------------------------------------------- |
+| **VS Code Extension**     | Bên thứ ba (i18n Ally) | ✅ [Extension chính thức](https://intlayer.org/vi/doc/vs-code-extension)  |
+| **Language Server (LSP)** | ❌ Không có            | ✅ [LSP chuyên dụng](https://intlayer.org/vi/doc/lsp)                     |
+| **MCP Server cho AI**     | ❌ Không có            | ✅ [Tích hợp sẵn MCP server](https://intlayer.org/vi/doc/mcp-server)      |
+| **Kỹ năng cho Agent**     | ❌ Không có            | ✅ [Kỹ năng độc lập](https://intlayer.org/vi/doc/agent_skills)            |
+| **CMS Trực Quan**         | ❌ Không có            | ✅ [CMS mã nguồn mở miễn phí](https://intlayer.org/vi/doc/concept/editor) |
+
+## 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](https://intlayer.org/vi/doc/concept/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ý?
+
+<AccordionGroup>
+<Accordion header="Các dự án Nuxt 2/3 đang vận hành quy mô lớn">
+
+Nếu hệ thống định tuyến đã gắn chặt với `@nuxtjs/i18n`, chi phí viết lại có thể không thực sự cần thiết.
+
+</Accordion>
+<Accordion header="Nhu cầu định dạng ICU đặc biệt">
+
+Nếu dự án dùng nhiều quy tắc nối thông điệp lồng nhau hoặc các định dạng thời gian chuyên biệt.
+
+</Accordion>
+<Accordion header="Các dự án thử nghiệm nhỏ">
+
+Khi dung lượng bundle không ảnh hưởng đến mục tiêu sử dụng của ứng dụng.
+
+</Accordion>
+</AccordionGroup>
+
+## 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:
+
+```bash packageManager="npm"
+npx intlayer init --interactive
+```
+
+```bash packageManager="pnpm"
+pnpm dlx intlayer init --interactive
+```
+
+```bash packageManager="yarn"
+yarn dlx intlayer init --interactive
+```
+
+```bash packageManager="bun"
+bunx 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`](https://intlayer.org/vi/doc/compatibility/vue-i18n) hoặc [`@nuxtjs/i18n`](https://intlayer.org/vi/doc/compatibility/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](https://intlayer.org/vi/doc/migration/vue-i18n) hoặc [từ @nuxtjs/i18n](https://intlayer.org/vi/doc/migration/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](https://intlayer.org/vi/blog/intlayer-with-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í](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Bài Viết Nên Đọc
+
+- [Vue & Vite i18n Benchmark: Đánh Giá Chi Tiết Hiệu Năng](https://intlayer.org/vi/doc/benchmark/vue)
+- [So Sánh vue-i18n và Intlayer](https://intlayer.org/vi/blog/vue-i18n-vs-intlayer)
+- [Liệu next-intl Đã Lỗi Thời Vào Năm 2026?](https://intlayer.org/vi/blog/is-next-intl-outdated)
+- [Quốc Tế Hóa Dựa Trên Trình Biên Dịch vs Khai Báo](https://intlayer.org/vi/blog/compiler-vs-declarative-i18n)

package/blog/vi/list_i18n_technologies/build-tools/vite.md

@@ -0,0 +1,177 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: import glob, chunk và xử lý thông điệp lúc build"
+description: Những khía cạnh thực sự thuộc về Vite trong i18n. Tải catalog lười biếng với import.meta.glob, tại sao chia theo route hiếm khi hiệu quả, khoảng trống HMR và plugin lúc build.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - tách mã vite
+  - lazy load bản dịch
+  - plugin vite i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: Những phần thuộc về Vite, không phải về framework của bạn
+
+Hầu hết các bài hướng dẫn "Vite i18n" thực chất chỉ là bài hướng dẫn React hoặc Vue tình cờ sử dụng Vite. Bài viết này tập trung vào tầng bên dưới: các catalog được import như thế nào, Rollup xử lý chúng ra sao, và tại sao cách lazy loading bạn viết nhiều khả năng không thực sự lazy.
+
+## Mục lục
+
+<TOC/>
+
+## Import tĩnh là mặc định, và nó tải ngay lập tức (eager)
+
+Cấu hình đơn giản nhất là import từng catalog ở đầu module:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Điều đó đưa cả ba catalog vào entry chunk khởi đầu, trên mọi trang web, cho mọi người dùng. Nó chấp nhận được cho hai ngôn ngữ và khoảng một trăm chuỗi chữ. Nhưng khi đạt mười ngôn ngữ, đây trở thành khoản lãng phí lớn nhất có thể phòng tránh được trong bundle của bạn.
+
+## `import.meta.glob` và cờ thiết lập mà ai cũng cấu hình sai
+
+Tính năng glob import của Vite là giải pháp phổ biến:
+
+```ts
+const catalogs = import.meta.glob("./locales/*.json");
+
+export const loadCatalog = async (locale: string) => {
+  const load = catalogs[`./locales/${locale}.json`];
+  return (await load()) as Record<string, string>;
+};
+```
+
+Tải lười biếng (lazy) là mặc định: mỗi mục là một hàm trả về một dynamic import, và Rollup xuất ra một chunk riêng cho mỗi file. Việc thêm `{ eager: true }` sẽ gộp tất cả chúng vào ngay trong module đang import, đây chính xác là điều bạn đang cố gắng tránh:
+
+```ts
+// Mọi ngôn ngữ đều bị nhét vào entry chunk (gần như không bao giờ nên dùng):
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+Cái bẫy nằm ở chỗ cả hai phiên bản đều chạy trơn tru ở môi trường phát triển (dev), vì Vite phục vụ các module riêng lẻ mà không đóng gói. Sự khác biệt chỉ lộ diện trong thư mục `dist`. Hãy kiểm tra bằng `npx vite build && npx vite preview`, sau đó xem entry chunk thực sự chứa những gì.
+
+## Chia nhỏ theo route hiếm khi thực sự tách rời được catalog
+
+Đây là điểm khiến nhiều lập trình viên ngạc nhiên. Bạn chia nhỏ catalog theo từng trang:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Sau đó hai route khác nhau cùng import `checkout.json`, và Rollup sẽ gom file đó vào một chunk dùng chung (shared chunk) được tải trên cả hai trang. Cơ chế tách chunk của Rollup được điều khiển bởi đồ thị phụ thuộc module, chứ không phải cấu trúc thư mục của bạn: bất kỳ module nào có thể truy cập được từ nhiều hơn một entry point đều trở thành tài nguyên chung. Việc thêm route thứ ba không thay đổi điều gì, và thêm route thứ tư có thể khiến cách chia chunk bị xáo trộn hoàn toàn.
+
+Do đó, việc chia nhỏ catalog theo từng route chỉ thực sự hoạt động nếu đồ thị import hoàn toàn tách biệt. Nếu kích thước bundle là yếu tố sống còn, hãy đo lường thực tế bằng công cụ trực quan:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Nếu bắt buộc phải cố định ranh giới chunk, tùy chọn `build.rollupOptions.output.manualChunks` là lối thoát, nhưng đi kèm với chi phí phải bảo trì cấu hình thủ công.
+
+## Catalog không tự động Hot Reload (HMR)
+
+Sửa một component, Vite thay thế nó tức thì. Sửa file `locales/fr.json`, tùy thuộc vào cách import, có thể sẽ không có gì xảy ra. File JSON được import động không có ranh giới HMR mặc định, vì vậy đồ thị module không biết cách làm mới các component đang sử dụng dữ liệu đó.
+
+Các lập trình viên thường khắc phục điều này bằng cách khởi động lại dev server mỗi khi đổi câu chữ. Trách nhiệm xử lý việc này thuộc về plugin i18n: nó phải đón nhận bản cập nhật HMR và đẩy các thông điệp mới vào ứng dụng đang chạy. Khi đánh giá một thư viện, hãy kiểm tra xem plugin Vite của nó có làm được việc này hay không.
+
+## `define` sẽ nhúng chết locale vào bản build
+
+Việc xác định locale mặc định vào lúc build rất hấp dẫn:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` là một thao tác thay thế văn bản thuần túy diễn ra trong quá trình biên dịch. Bất kỳ giá trị nào có mặt khi bạn build sẽ trở thành giá trị cố định được phân phối, buộc bạn phải tạo ra một bản build riêng cho từng ngôn ngữ. Đây là một chiến lược hợp lệ (được áp dụng bởi giải pháp i18n chính thức của Angular), nhưng nó không phải điều bạn muốn nếu một lần deploy duy nhất phải phục vụ đồng thời tất cả các ngôn ngữ.
+
+Đối với những giá trị cần thay đổi theo từng request của người dùng, hãy tránh xa `define` và xử lý chúng ở thời điểm runtime.
+
+## Đưa việc phân tích cú pháp thông điệp về thời điểm build
+
+Mọi giải pháp trưởng thành trong hệ sinh thái này cuối cùng đều đi theo một hướng: ngừng phân tích cú pháp thông điệp trong trình duyệt.
+
+| Plugin                       | Những gì được chuyển về thời điểm build                                 |
+| :--------------------------- | :---------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Biên dịch thông điệp vue-i18n thành render function (chỉ gửi runtime)   |
+| Lingui (macro + plugin)      | Trích xuất và biên dịch catalog, thay macro bằng ID thông điệp ngắn gọn |
+| Paraglide (inlang)           | Biên dịch từng thông điệp thành một hàm độc lập có thể tree-shake       |
+| `vite-intlayer`              | Xây dựng từ điển theo component, dọn dẹp (purge) và rút gọn (minify)    |
+
+Lợi ích đem lại là nhân đôi: bộ biên dịch thông điệp ở runtime hoàn toàn biến mất khỏi bundle người dùng, và các mục không sử dụng có thể được loại bỏ tĩnh. Chi phí đi kèm: cả dev server và CI đều cần cài plugin, đồng thời lệnh `tsc` độc lập hoặc trình chạy test không dùng Vite sẽ cần cấu hình bổ sung.
+
+## SSR: tuyệt đối không lưu trạng thái locale ở phạm vi module
+
+Nếu bạn triển khai SSR (qua framework hoặc `vite-plugin-ssr`), nguyên tắc bất di bất dịch là: biến ở cấp độ module lưu giữ locale hiện tại sẽ bị chia sẻ chung giữa tất cả các request đồng thời trên tiến trình server đó.
+
+```ts
+// An toàn trong trình duyệt. Nhưng là lỗ hổng rò rỉ dữ liệu giữa các request trên server:
+export let currentLocale = "en";
+```
+
+Hai người dùng truy cập server cùng một thời điểm sẽ gây ra race condition, và một trong hai người sẽ nhận về ngôn ngữ của người kia. Lỗi này không bao giờ xuất hiện ở môi trường dev vì bạn là người duy nhất gửi request. Hãy xác định locale riêng biệt cho từng request và truyền rõ ràng qua context hoặc request-local storage của framework.
+
+## Plugin Vite của Intlayer
+
+Intlayer đăng ký một plugin duy nhất đảm nhiệm việc build từ điển, theo dõi thay đổi ở chế độ dev và điều phối quy trình tối ưu hóa:
+
+```ts fileName="vite.config.ts"
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [react(), intlayer()],
+});
+```
+
+Viết lại import, dọn dẹp (purge) và rút gọn (minify) được bật sẵn theo mặc định. Hai tùy chọn quan trọng nằm trong file `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // loại bỏ các trường nội dung không có component nào đọc
+    minify: true, // đổi tên các key nội dung thành các alias ngắn gọn
+  },
+};
+
+export default config;
+```
+
+Vì nội dung được khai báo theo từng component thay vì tập trung trong các file ngôn ngữ khổng lồ, lượt purge có được đồ thị module chuẩn xác để đối chiếu, giúp việc loại bỏ code thừa diễn ra an toàn. Xem thêm chi tiết tại [tài liệu tối ưu bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/bundle_optimization.md).
+
+## Các sai lầm thường gặp
+
+- **Đặt `{ eager: true }` cho glob đáng lẽ phải lazy load.** Chạy tốt ở dev, nhưng đóng gói tất cả ngôn ngữ khi lên production.
+- **Tin rằng cấu trúc thư mục sẽ tự tạo ra các chunk riêng.** Rollup đi theo import chứ không theo thư mục. Hãy đo lường bundle thực tế.
+- **Khởi động lại dev server chỉ để thấy thay đổi văn bản.** Dấu hiệu thiếu vắng bộ xử lý HMR trong plugin.
+- **Đặt locale vào `define`.** Buộc dự án phải build riêng từng bản cho mỗi ngôn ngữ.
+- **Lưu locale ở cấp độ module khi dùng SSR.** Gây lẫn lộn ngôn ngữ giữa các request đồng thời.
+- **Đo hiệu năng trên dev server.** Các module chưa đóng gói không phản ánh đúng cấu trúc bundle production.
+
+## Tìm hiểu thêm
+
+- [Tối ưu hóa bundle: dọn dẹp, rút gọn và những gì thực sự gửi tới trình duyệt](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/bundle_optimization.md)
+- [Báo cáo benchmark hiệu năng giữa các framework](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/benchmark/index.md)
+- [Tài liệu tham khảo cấu hình](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/configuration.md)
+- [Cài đặt Intlayer với Vite và React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/intlayer_with_vite+react.md)
+- [Adapter tương thích i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/vi/compat/i18next.md)
+- [React i18n: mô hình provider hoạt động ra sao](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: cách thức hoạt động và những điểm hạn chế](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/list_i18n_technologies/frameworks/vue.md)
+- [i18n theo component so với i18n tập trung](https://github.com/aymericzip/intlayer/blob/main/docs/blog/vi/per-component_vs_centralized_i18n.md)

package/blog/vi/list_i18n_technologies/frameworks/angular.md

@@ -25,8 +25,6 @@ Trong thế giới kết nối ngày nay, việc cung cấp trang web của bạ
 
 ---
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Quốc tế hóa (i18n) là gì?
 
 Quốc tế hóa, thường được gọi là i18n, là quá trình thiết kế và chuẩn bị ứng dụng của bạn để hỗ trợ nhiều ngôn ngữ và bối cảnh văn hóa khác nhau. Trong Angular, điều này bao gồm việc cấu hình ứng dụng sao cho văn bản, ngày tháng, số và thậm chí cả bố cục giao diện người dùng có thể thích nghi một cách liền mạch với các vùng địa lý khác nhau. Việc đặt nền tảng này một cách đúng đắn đảm bảo rằng việc tích hợp các bản dịch trong tương lai sẽ được tổ chức và hiệu quả.

package/blog/vi/list_i18n_technologies/frameworks/react-native.md

@@ -25,8 +25,6 @@ Trong một thị trường ngày càng toàn cầu hóa, việc cung cấp ứn
 
 ---
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Quốc tế hóa (i18n) là gì?
 
 Quốc tế hóa, hay i18n, liên quan đến việc cấu trúc một ứng dụng sao cho có thể dễ dàng thích ứng với các ngôn ngữ khác nhau, định dạng vùng miền và chuẩn mực văn hóa. Trong React Native, i18n bao gồm việc xử lý các chuỗi cho nút bấm và nhãn, cũng như định dạng ngày tháng, thời gian, tiền tệ và nhiều hơn nữa theo vùng miền của người dùng. Các ứng dụng React Native được chuẩn bị đúng cách cho phép bạn tích hợp liền mạch các ngôn ngữ bổ sung và hành vi đặc thù theo vùng miền sau này mà không cần phải tái cấu trúc lớn.

package/blog/vi/list_i18n_technologies/frameworks/react.md

@@ -25,8 +25,6 @@ Trong bối cảnh kỹ thuật số ngày nay, việc mở rộng phạm vi ti
 
 ---
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Quốc tế hóa (i18n) là gì?
 
 Quốc tế hóa, viết tắt là i18n, là quá trình thiết kế và chuẩn bị trang web của bạn để hỗ trợ nhiều ngôn ngữ và bối cảnh văn hóa khác nhau. Trong React, điều này có nghĩa là thiết lập ứng dụng của bạn sao cho các chuỗi ký tự, định dạng ngày tháng, định dạng số, và thậm chí cả bố cục có thể dễ dàng điều chỉnh cho người dùng từ các vùng miền khác nhau. Việc chuẩn bị ứng dụng React của bạn cho i18n tạo nền tảng để tích hợp mượt mà các bản dịch và các tính năng địa phương hóa khác.

package/blog/vi/list_i18n_technologies/frameworks/svelte.md

@@ -25,8 +25,6 @@ Khi mạng web tiếp tục kết nối mọi người trên toàn cầu, việc
 
 ---
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Quốc tế hóa (i18n) là gì?
 
 Quốc tế hóa, thường được viết tắt là i18n, là quá trình thiết kế và xây dựng ứng dụng của bạn sao cho có thể dễ dàng thích ứng với nhiều ngôn ngữ, vùng miền và các quy ước văn hóa khác nhau. Trong Svelte, điều này thường có nghĩa là thiết lập các chuỗi bản dịch, địa phương hóa ngày tháng, thời gian và số liệu, đồng thời đảm bảo giao diện người dùng có thể chuyển đổi động giữa các locale khác nhau mà không cần viết lại mã lớn.

package/blog/vi/list_i18n_technologies/frameworks/vue.md

@@ -25,8 +25,6 @@ Trong bối cảnh kỹ thuật số ngày càng toàn cầu hóa, việc mở r
 
 ---
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Quốc tế hóa (i18n) là gì?
 
 Quốc tế hóa (i18n) là thực hành chuẩn bị một ứng dụng phần mềm (hoặc trang web) cho nhiều ngôn ngữ và các quy ước văn hóa khác nhau. Trong hệ sinh thái Vue.js, điều này bao gồm việc thiết lập cách thức văn bản, ngày tháng, số liệu, tiền tệ và các yếu tố có thể địa phương hóa khác có thể được điều chỉnh cho các vùng địa lý khác nhau. Bằng cách thiết lập i18n ngay từ đầu, bạn đảm bảo một cấu trúc có tổ chức, có thể mở rộng để thêm ngôn ngữ mới và xử lý các nhu cầu địa phương hóa trong tương lai.

package/blog/vi/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # Internationalization (i18n) là gì? Định nghĩa và những thách thức
 
-![minh họa i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Hiểu về Internationalization (i18n)
 
 **Quốc tế hóa**, thường được viết tắt là **i18n**, là quá trình thiết kế và chuẩn bị một ứng dụng để hỗ trợ nhiều ngôn ngữ, văn hóa và các quy ước vùng miền **mà không** cần thay đổi lớn trong cơ sở mã nguồn. Tên gọi i18n xuất phát từ việc có 18 chữ cái nằm giữa chữ **i** và chữ **n** trong từ “internationalization” (quốc tế hóa).