@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/zh/bundle_optimization.md

@@ -1,7 +1,7 @@
 ---
 createdAt: 2025-11-25
 updatedAt: 2026-04-08
-title: 优化 i18n 构建包大小与性能
+title: 优化 i18n 构建Bundle 大小与性能
 description: 通过优化国际化 (i18n) 内容来减小应用程序构建包的大小。学习如何利用 Intlayer 对字典进行 Tree Shaking 和延迟加载。
 keywords:
   - 构建包优化
@@ -21,7 +21,7 @@ history:
     changes: "在构建配置中增加了 `minify` 和 `purge` 选项"
 ---
 
-# 优化 i18n 构建包大小与性能
+# 优化 i18n 构建Bundle 大小与性能
 
 依赖 JSON 文件的传统 i18n 解决方案面临的最常见挑战之一是管理内容大小。如果开发人员不手动将内容分离到命名空间中，用户往往为了查看单个页面而下载每个页面甚至每种语言的翻译。
 
@@ -269,7 +269,7 @@ const config: IntlayerConfig = {
   },
   build: {
     /**
-     * 压缩字典以减小构建包大小。
+     * 压缩字典以减小构建Bundle 大小。
      */
      minify: true;
 
@@ -299,7 +299,7 @@ export default config;
 | 属性           | 类型      | 默认值      | 描述                                                                                                                                    |
 | :------------- | :-------- | :---------- | :-------------------------------------------------------------------------------------------------------------------------------------- |
 | **`optimize`** | `boolean` | `undefined` | 控制是否启用构建优化。如果为 `true`，Intlayer 使用优化后的注入替换字典调用。如果为 `false`，则禁用优化。建议在生产环境中设置为 `true`。 |
-| **`minify`**   | `boolean` | `false`     | 是否压缩字典以减小构建包大小。                                                                                                          |
+| **`minify`**   | `boolean` | `false`     | 是否压缩字典以减小构建Bundle 大小。                                                                                                     |
 | **`purge`**    | `boolean` | `false`     | 是否清除字典中未使用的键。                                                                                                              |
 
 ### 压缩 (Minification)
@@ -340,7 +340,7 @@ export default config;
 
 ### 导入模式 (Import Mode)
 
-对于包含多个页面和语言的大型应用程序，您的 JSON 文件可能占用构建包大小的很大一部分。Intlayer 允许您控制字典的加载方式。
+对于包含多个页面和语言的大型应用程序，您的 JSON 文件可能占用构建Bundle 大小的很大一部分。Intlayer 允许您控制字典的加载方式。
 
 导入模式可以在 `intlayer.config.ts` 文件中全局定义默认值。
 
@@ -412,7 +412,7 @@ const content = useDictionary({
 
 - **优点：** **语言级别的 Tree Shaking。** 查看英文版本的用户将*仅*下载英文字典，永远不会加载法文字典。
 - **缺点：** 在水合过程中每个组件都会触发一次网络请求（资源获取）。
-- **最适合：** 大型文本块、文章或支持多种语言且构建包大小至关重要的应用程序。
+- **最适合：** 大型文本块、文章或支持多种语言且构建Bundle 大小至关重要的应用程序。
 
 **转换后的代码示例：**
 
@@ -445,10 +445,10 @@ const content = useDictionaryAsync({
 
 ## 总结：静态 vs 动态
 
-| 特性              | 静态模式                   | 动态模式                 |
-| :---------------- | :------------------------- | :----------------------- |
-| **JS 构建包大小** | 较大（包含组件的所有语言） | 最小（仅代码，无内容）   |
-| **初始加载**      | 即时（内容在构建包中）     | 轻微延迟（获取 JSON）    |
-| **网络请求**      | 0 次额外请求               | 每个字典 1 次请求        |
-| **Tree Shaking**  | 组件级                     | 组件级 + 语言级          |
-| **最佳用例**      | UI 组件、小型应用          | 文本较多的页面、多种语言 |
+| 特性                   | 静态模式                   | 动态模式                 |
+| :--------------------- | :------------------------- | :----------------------- |
+| **JS 构建Bundle 大小** | 较大（包含组件的所有语言） | 最小（仅代码，无内容）   |
+| **初始加载**           | 即时（内容在构建包中）     | 轻微延迟（获取 JSON）    |
+| **网络请求**           | 0 次额外请求               | 每个字典 1 次请求        |
+| **Tree Shaking**       | 组件级                     | 组件级 + 语言级          |
+| **最佳用例**           | UI 组件、小型应用          | 文本较多的页面、多种语言 |

package/docs/zh/cli/build.md

@@ -57,7 +57,7 @@ pnpm intlayer build --watch
 bun x intlayer build --watch
 ```
 
-该命令默认会查找您的声明内容文件，路径为 `./src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx}`。并在 `.intlayer` 目录中构建字典。
+该命令默认会查找您的声明内容文件，路径为 `./src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`。并在 `.intlayer` 目录中构建字典。
 
 ## 别名：
 

package/docs/zh/cli/index.md

@@ -100,7 +100,7 @@ bun add intlayer-cli -g
 
 `intlayer-cli` 包旨在将您的 [Intlayer 声明](https://github.com/aymericzip/intlayer/blob/main/docs/docs/zh/dictionary/content_file.md)转译为字典。
 
-该包会转译所有 Intlayer 文件，例如 `src/**/*.content.{ts|js|mjs|cjs|json}`。[查看如何声明您的 Intlayer 声明文件](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md)。
+该包会转译所有 Intlayer 文件，例如 `src/**/*.content.{ts|js|mjs|cjs|json|tsx|jsx|md|mdx|yaml|yml}`。[查看如何声明您的 Intlayer 声明文件](https://github.com/aymericzip/intlayer/blob/main/packages/intlayer/README.md)。
 
 要解释 Intlayer 字典，您可以使用解释器，例如 [react-intlayer](https://www.npmjs.com/package/react-intlayer) 或 [next-intlayer](https://www.npmjs.com/package/next-intlayer)。
 

package/docs/zh/component_i18n.md

@@ -168,7 +168,7 @@ export function ClientComponent() {
 ## 为什么 Intlayer 的组件方法是最佳选择
 
 - **内容共置**：内容声明与组件紧密相邻，减少偏差并提升设计系统中的复用性。
-- **类型安全**：键和值结构均为强类型；缺失的翻译会在构建时而非运行时暴露。
+- **类型安全**：键和值结构均为强类型；缺失的翻译会在构建时 (build time)而非运行时暴露。
 - **服务器优先**：原生支持服务器组件，提升安全性和性能；客户端钩子依然保持良好的使用体验。
 - **摇树优化**：仅打包组件实际使用的内容，保持大型应用的负载体积小。
 - **开发体验与工具**：内置中间件、SEO助手，以及可选的可视化编辑器/AI翻译，简化日常工作流程。

package/docs/zh/dictionary/content_file.md

@@ -520,7 +520,7 @@ export default aboutPageMetaContent;
 
 导入模式决定字典在应用程序中的导入方式。
 
-- `'static'`: 字典在构建时静态导入。这是默认模式。
+- `'static'`: 字典在构建时 (build time)静态导入。这是默认模式。
 - `'dynamic'`: 字典在运行时使用 suspense API 动态导入。
 - `'fetch'`: 字典使用实时同步 API 动态导入。
 
@@ -1079,4 +1079,4 @@ export default {
 3. **性能**：
    - 调整内容配置以限制监视文件的范围
    - 仅在需要实时更新时使用实时字典（例如 A/B 测试等）
-   - 确保启用构建转换插件（`@intlayer/swc` 或 `@intlayer/babel`）以在构建时优化字典
+   - 确保启用构建转换插件（`@intlayer/swc` 或 `@intlayer/babel`）以在构建时 (build time)优化字典

package/docs/zh/dictionary/html.md

@@ -277,7 +277,7 @@ const myContent = html(
     );
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -322,7 +322,7 @@ const myContent = html(
     app.mount("#app");
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -359,7 +359,7 @@ const myContent = html(
     </HTMLProvider>
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -395,7 +395,7 @@ const myContent = html(
     );
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -431,7 +431,7 @@ const myContent = html(
     );
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Angular" value="angular">
@@ -468,7 +468,7 @@ const myContent = html(
     };
     ```
 
-    > 动态导入 HTML 渲染器是减小应用程序包大小的好方法。
+    > 动态导入 HTML 渲染器是减小应用程序Bundle 大小的好方法。
 
   </Tab>
 </Tabs>

package/docs/zh/dictionary/markdown.md

@@ -740,7 +740,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     );
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
@@ -782,7 +782,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     );
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Vue" value="vue">
@@ -833,7 +833,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     app.mount("#app");
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Svelte" value="svelte">
@@ -873,7 +873,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     </MarkdownProvider>
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Preact" value="preact">
@@ -912,7 +912,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     );
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Solid" value="solid">
@@ -951,7 +951,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     );
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
   <Tab label="Angular" value="angular">
@@ -973,7 +973,7 @@ Markdown 渲染支持 **MDX** — 在您的 Markdown 中直接按名称使用任
     export class AppModule {}
     ```
 
-    > 动态导入您的 Markdown 渲染器是减少应用程序包大小的好方法。
+    > 动态导入您的 Markdown 渲染器是减少应用程序Bundle 大小的好方法。
 
   </Tab>
 </Tabs>

package/docs/zh/how_works_intlayer.md

@@ -101,7 +101,7 @@ Intlayer 还提供了一个可视化编辑器，允许您以可视化的方式
 
 ## 应用构建优化
 
-为了优化应用的包大小，Intlayer 提供了两个插件来优化应用的构建：`@intlayer/babel` 和 `@intlayer/swc` 插件。
+为了优化应用的Bundle 大小，Intlayer 提供了两个插件来优化应用的构建：`@intlayer/babel` 和 `@intlayer/swc` 插件。
 Babel 和 SWC 插件通过分析应用程序的抽象语法树（AST）来替换 Intlayer 函数的调用为优化后的代码。此过程确保只导入实际使用的字典，优化分块，从而减小生产环境中的最终包体积。
 
 在开发模式下，Intlayer 使用集中式静态导入字典以简化开发体验。