npm - @intlayer/docs - Versions diffs - 8.6.10 → 8.7.0-canary.1 - Mend

@intlayer/docs 8.6.10 → 8.7.0-canary.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/blog/ar/i18n_using_next-i18next.md +1 -1
package/blog/ar/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/de/i18n_using_next-i18next.md +1 -1
package/blog/de/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/en/i18n_using_next-i18next.md +1 -1
package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/en-GB/i18n_using_next-i18next.md +1 -1
package/blog/en-GB/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/es/i18n_using_next-i18next.md +1 -1
package/blog/es/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/fr/i18n_using_next-i18next.md +1 -1
package/blog/fr/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/hi/i18n_using_next-i18next.md +1 -1
package/blog/id/i18n_using_next-i18next.md +1 -1
package/blog/id/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/it/i18n_using_next-i18next.md +1 -1
package/blog/it/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ja/i18n_using_next-i18next.md +1 -1
package/blog/ja/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ko/i18n_using_next-i18next.md +1 -1
package/blog/ko/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/pl/i18n_using_next-i18next.md +1 -1
package/blog/pl/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/pt/i18n_using_next-i18next.md +1 -1
package/blog/pt/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/ru/i18n_using_next-i18next.md +1 -1
package/blog/ru/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/blog/tr/i18n_using_next-i18next.md +1 -1
package/blog/uk/i18n_using_next-i18next.md +1 -1
package/blog/uk/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/vi/i18n_using_next-i18next.md +1 -1
package/blog/vi/next-i18next_vs_next-intl_vs_intlayer.md +2 -2
package/blog/zh/i18n_using_next-i18next.md +1 -1
package/blog/zh/next-i18next_vs_next-intl_vs_intlayer.md +1 -1
package/docs/ar/bundle_optimization.md +454 -0
package/docs/ar/intlayer_with_next-i18next.md +1 -1
package/docs/ar/intlayer_with_next-intl.md +1 -1
package/docs/ar/intlayer_with_tanstack+solid.md +24 -5
package/docs/ar/intlayer_with_tanstack.md +45 -68
package/docs/bn/bundle_optimization.md +454 -0
package/docs/cs/bundle_optimization.md +454 -0
package/docs/de/bundle_optimization.md +454 -0
package/docs/de/intlayer_with_next-i18next.md +1 -1
package/docs/de/intlayer_with_next-intl.md +1 -1
package/docs/de/intlayer_with_tanstack+solid.md +24 -5
package/docs/de/intlayer_with_tanstack.md +45 -68
package/docs/en/bundle_optimization.md +36 -8
package/docs/en/intlayer_with_next-i18next.md +1 -1
package/docs/en/intlayer_with_next-intl.md +1 -1
package/docs/en/intlayer_with_tanstack+solid.md +24 -5
package/docs/en/intlayer_with_tanstack.md +45 -68
package/docs/en-GB/bundle_optimization.md +454 -0
package/docs/en-GB/intlayer_with_next-i18next.md +1 -1
package/docs/en-GB/intlayer_with_next-intl.md +1 -1
package/docs/en-GB/intlayer_with_tanstack+solid.md +24 -5
package/docs/en-GB/intlayer_with_tanstack.md +47 -70
package/docs/es/bundle_optimization.md +454 -0
package/docs/es/intlayer_with_next-i18next.md +1 -1
package/docs/es/intlayer_with_next-intl.md +1 -1
package/docs/es/intlayer_with_tanstack+solid.md +24 -5
package/docs/es/intlayer_with_tanstack.md +45 -68
package/docs/fr/bundle_optimization.md +454 -0
package/docs/fr/intlayer_with_next-i18next.md +1 -1
package/docs/fr/intlayer_with_next-intl.md +1 -1
package/docs/fr/intlayer_with_tanstack+solid.md +24 -5
package/docs/fr/intlayer_with_tanstack.md +45 -68
package/docs/hi/bundle_optimization.md +454 -0
package/docs/hi/intlayer_with_next-i18next.md +1 -1
package/docs/hi/intlayer_with_next-intl.md +1 -1
package/docs/hi/intlayer_with_tanstack+solid.md +24 -5
package/docs/hi/intlayer_with_tanstack.md +45 -68
package/docs/id/bundle_optimization.md +454 -0
package/docs/id/intlayer_with_next-i18next.md +1 -1
package/docs/id/intlayer_with_next-intl.md +1 -1
package/docs/id/intlayer_with_tanstack+solid.md +24 -5
package/docs/id/intlayer_with_tanstack.md +45 -68
package/docs/it/bundle_optimization.md +454 -0
package/docs/it/intlayer_with_next-i18next.md +1 -1
package/docs/it/intlayer_with_next-intl.md +1 -1
package/docs/it/intlayer_with_tanstack+solid.md +24 -5
package/docs/it/intlayer_with_tanstack.md +45 -68
package/docs/ja/bundle_optimization.md +454 -0
package/docs/ja/intlayer_with_next-i18next.md +1 -1
package/docs/ja/intlayer_with_next-intl.md +1 -1
package/docs/ja/intlayer_with_tanstack+solid.md +24 -5
package/docs/ja/intlayer_with_tanstack.md +45 -36
package/docs/ko/bundle_optimization.md +454 -0
package/docs/ko/intlayer_with_next-i18next.md +1 -1
package/docs/ko/intlayer_with_next-intl.md +1 -1
package/docs/ko/intlayer_with_tanstack+solid.md +24 -5
package/docs/ko/intlayer_with_tanstack.md +45 -68
package/docs/nl/bundle_optimization.md +454 -0
package/docs/pl/bundle_optimization.md +454 -0
package/docs/pl/intlayer_with_next-i18next.md +1 -1
package/docs/pl/intlayer_with_next-intl.md +1 -1
package/docs/pl/intlayer_with_tanstack+solid.md +24 -5
package/docs/pl/intlayer_with_tanstack.md +45 -68
package/docs/pt/bundle_optimization.md +454 -0
package/docs/pt/intlayer_with_next-i18next.md +1 -1
package/docs/pt/intlayer_with_next-intl.md +1 -1
package/docs/pt/intlayer_with_tanstack+solid.md +24 -5
package/docs/pt/intlayer_with_tanstack.md +45 -68
package/docs/ru/bundle_optimization.md +454 -0
package/docs/ru/intlayer_with_next-i18next.md +1 -1
package/docs/ru/intlayer_with_next-intl.md +1 -1
package/docs/ru/intlayer_with_tanstack+solid.md +24 -5
package/docs/ru/intlayer_with_tanstack.md +45 -68
package/docs/tr/bundle_optimization.md +454 -0
package/docs/tr/intlayer_with_next-i18next.md +1 -1
package/docs/tr/intlayer_with_next-intl.md +1 -1
package/docs/tr/intlayer_with_tanstack+solid.md +24 -5
package/docs/tr/intlayer_with_tanstack.md +45 -68
package/docs/uk/bundle_optimization.md +454 -0
package/docs/uk/intlayer_with_next-i18next.md +1 -1
package/docs/uk/intlayer_with_next-intl.md +1 -1
package/docs/uk/intlayer_with_tanstack+solid.md +24 -5
package/docs/uk/intlayer_with_tanstack.md +45 -68
package/docs/ur/bundle_optimization.md +454 -0
package/docs/vi/bundle_optimization.md +454 -0
package/docs/vi/intlayer_with_next-i18next.md +1 -1
package/docs/vi/intlayer_with_next-intl.md +1 -1
package/docs/vi/intlayer_with_tanstack+solid.md +24 -5
package/docs/vi/intlayer_with_tanstack.md +45 -68
package/docs/zh/bundle_optimization.md +454 -0
package/docs/zh/intlayer_with_next-i18next.md +1 -1
package/docs/zh/intlayer_with_next-intl.md +1 -1
package/docs/zh/intlayer_with_tanstack+solid.md +24 -5
package/docs/zh/intlayer_with_tanstack.md +45 -68
package/package.json +7 -7

package/docs/ko/intlayer_with_tanstack.md CHANGED Viewed

@@ -225,9 +225,7 @@ function RootDocument({ children }: { children: ReactNode }) {
         <HeadContent />
       </head>
       <body>
-        <IntlayerProvider locale={locale}>
-          {children}
-        </IntlayerProvider>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
         <Scripts />
       </body>
     </html>
@@ -326,30 +324,20 @@ import { getPrefix } from "intlayer";
 export const LOCALE_ROUTE = "{-$locale}" as const;
-// 주요 유틸리티
-export type RemoveLocaleParam<T> = T extends string
-  ? RemoveLocaleFromString<T>
-  : T;
+export type To = StripLocalePrefix<LinkComponentProps["to"]>;
-export type To = RemoveLocaleParam<LinkComponentProps["to"]>;
-type CollapseDoubleSlashes<S extends string> =
-  S extends `${infer H}//${infer T}` ? CollapseDoubleSlashes<`${H}/${T}`> : S;
+export type StripLocalePrefix<T extends string | undefined> = T extends
+  | `/${typeof LOCALE_ROUTE}/`
+  | `/${typeof LOCALE_ROUTE}`
+  ? "/"
+  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
+    ? `/${Rest}`
+    : T;
 type LocalizedLinkProps = {
   to?: To;
 } & Omit<LinkComponentProps, "to">;
-// 헬퍼
-type RemoveAll<
-  S extends string,
-  Sub extends string,
-> = S extends `${infer H}${Sub}${infer T}` ? RemoveAll<`${H}${T}`, Sub> : S;
-type RemoveLocaleFromString<S extends string> = CollapseDoubleSlashes<
-  RemoveAll<S, typeof LOCALE_ROUTE>
->;
 export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
   const { locale } = useLocale();
   const { localePrefix } = getPrefix(locale);
@@ -378,26 +366,26 @@ export const LocalizedLink: FC<LocalizedLinkProps> = (props) => {
 import { useNavigate } from "@tanstack/react-router";
 import { getPrefix } from "intlayer";
 import { useLocale } from "react-intlayer";
-import { LOCALE_ROUTE } from "@/components/localized-link";
+import type { StripLocalePrefix } from "@/components/localized-link";
 import type { FileRouteTypes } from "@/routeTree.gen";
-type StripLocalePrefix<T extends string> = T extends
-  | `/${typeof LOCALE_ROUTE}`
-  | `/${typeof LOCALE_ROUTE}/`
-  ? "/"
-  : T extends `/${typeof LOCALE_ROUTE}/${infer Rest}`
-    ? `/${Rest}`
-    : never;
+type NavigateFn = ReturnType<typeof useNavigate>;
+type BaseNavigateOptions = Parameters<NavigateFn>[0];
 type LocalizedTo = StripLocalePrefix<FileRouteTypes["to"]>;
-type LocalizedNavigate = {
-  (to: LocalizedTo): ReturnType<ReturnType<typeof useNavigate>>;
-  (
-    opts: { to: LocalizedTo } & Record<string, unknown>
-  ): ReturnType<ReturnType<typeof useNavigate>>;
+export type LocalizedNavigateOptions = Omit<
+  BaseNavigateOptions,
+  "to" | "params"
+> & {
+  to: LocalizedTo;
+  params?: Omit<NonNullable<BaseNavigateOptions["params"]>, "locale">;
 };
+type LocalizedNavigate = (
+  options: LocalizedNavigateOptions
+) => ReturnType<NavigateFn>;
 export const useLocalizedNavigate = () => {
   const navigate = useNavigate();
@@ -444,38 +432,6 @@ import { useLocalizedNavigate } from "@/hooks/useLocalizedNavigate";
 export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
-  head: ({ params }) => {
-    const { locale } = params;
-    const path = "/"; // The path for this route
-    const metaContent = getIntlayer("app", locale);
-    return {
-      links: [
-        // Canonical link: Points to the current localized page
-        { rel: "canonical", href: getLocalizedUrl(path, locale) },
-        // Hreflang: Tell Google about all localized versions
-        ...localeMap(({ locale: mapLocale }) => ({
-          rel: "alternate",
-          hrefLang: mapLocale,
-          href: getLocalizedUrl(path, mapLocale),
-        })),
-        // x-default: For users in unmatched languages
-        // Define the default fallback locale (usually your primary language)
-        {
-          rel: "alternate",
-          hrefLang: "x-default",
-          href: getLocalizedUrl(path, defaultLocale),
-        },
-      ],
-      meta: [
-        { title: metaContent.title },
-        { name: "description", content: metaContent.meta.description },
-      ],
-    };
-  },
 });
 function RouteComponent() {
@@ -630,12 +586,33 @@ export const Route = createFileRoute("/{-$locale}/")({
   component: RouteComponent,
   head: ({ params }) => {
     const { locale } = params;
-    const metaContent = getIntlayer("page-metadata", locale);
+    const path = "/"; // The path for this route
+    const metaContent = getIntlayer("app", locale);
     return {
+      links: [
+        // Canonical link: Points to the current localized page
+        { rel: "canonical", href: getLocalizedUrl(path, locale) },
+        // Hreflang: Tell Google about all localized versions
+        ...localeMap(({ locale: mapLocale }) => ({
+          rel: "alternate",
+          hrefLang: mapLocale,
+          href: getLocalizedUrl(path, mapLocale),
+        })),
+        // x-default: For users in unmatched languages
+        // Define the default fallback locale (usually your primary language)
+        {
+          rel: "alternate",
+          hrefLang: "x-default",
+          href: getLocalizedUrl(path, defaultLocale),
+        },
+      ],
       meta: [
         { title: metaContent.title },
-        { content: metaContent.description, name: "description" },
+        { name: "description", content: metaContent.meta.description },
       ],
     };
   },

package/docs/nl/bundle_optimization.md ADDED Viewed

@@ -0,0 +1,454 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2026-04-08
+title: Optimalisatie van i18n-bundelgrootte en prestaties
+description: Verminder de bundelgrootte van uw applicatie door internationaliseringsinhoud (i18n) te optimaliseren. Leer hoe u tree shaking en lazy loading kunt inzetten voor woordenboeken met Intlayer.
+keywords:
+  - Bundeloptimalisatie
+  - Inhoudsautomatisering
+  - Dynamische inhoud
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 8.7.0
+    date: 2026-04-08
+    changes: "Opties `minify` en `purge` toegevoegd aan de build-configuratie"
+---
+# Optimalisatie van i18n-bundelgrootte en prestaties
+Een van de meest voorkomende uitdagingen bij traditionele i18n-oplossingen die afhankelijk zijn van JSON-bestanden, is het beheren van de omvang van de inhoud. Als ontwikkelaars de inhoud niet handmatig scheiden in namespaces, downloaden gebruikers vaak vertalingen voor elke pagina en mogelijk elke taal, alleen maar om een enkele pagina te bekijken.
+Bijvoorbeeld, een applicatie met 10 pagina's vertaald in 10 talen kan ertoe leiden dat een gebruiker de inhoud van 100 pagina's downloadt, ook al hebben ze er maar **één** nodig (de huidige pagina in de huidige taal). Dit leidt tot verspilling van bandbreedte en langzamere laadtijden.
+**Intlayer lost dit probleem op via optimalisatie tijdens de build.** Het analyseert uw code om te detecteren welke woordenboeken daadwerkelijk per component worden gebruikt en injecteert alleen de noodzakelijke inhoud opnieuw in uw bundel.
+## Inhoudsopgave
+<TOC />
+## Scan uw bundel
+Het analyseren van uw bundel is de eerste stap bij het identificeren van "zware" JSON-bestanden en mogelijkheden voor code-splitting. Deze tools genereren een visuele treemap van de gecompileerde code van uw applicatie, zodat u precies kunt zien welke bibliotheken de meeste ruimte in beslag nemen.
+<Tabs>
+ <Tab value="vite">
+### Vite / Rollup
+Vite gebruikt Rollup onder de motorkap. De `rollup-plugin-visualizer` genereert een interactief HTML-bestand dat de grootte van elke module in uw graaf toont.
+```bash
+npm install -D rollup-plugin-visualizer
+```
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { visualizer } from "rollup-plugin-visualizer";
+export default defineConfig({
+  plugins: [
+    visualizer({
+      open: true, // Open het rapport automatisch in je browser
+      filename: "stats.html",
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
+});
+```
+ </Tab>
+ <Tab value="nextjs (turbopack)">
+### Next.js (Turbopack)
+Voor projecten die de App Router en Turbopack gebruiken, biedt Next.js een ingebouwde experimentele analyzer die geen extra afhankelijkheden vereist.
+```bash packageManager='npm'
+npx next experimental-analyze
+```
+```bash packageManager='yarn'
+yarn next experimental-analyze
+```
+```bash packageManager='pnpm'
+pnpm next experimental-analyze
+```
+```bash packageManager='bun'
+bun next experimental-analyze
+```
+ </Tab>
+ <Tab value="nextjs (Webpack)">
+### Next.js (Webpack)
+Als u de standaard Webpack-bundler in Next.js gebruikt, gebruik dan de officiële bundel-analyzer. Activeer deze door een omgevingsvariabele in te stellen tijdens uw build.
+```bash packageManager='npm'
+npm install -D @next/bundle-analyzer
+```
+```bash packageManager='yarn'
+yarn add -D @next/bundle-analyzer
+```
+```bash packageManager='pnpm'
+pnpm add -D @next/bundle-analyzer
+```
+```bash packageManager='bun'
+bun add -d @next/bundle-analyzer
+```
+```javascript fileName="next.config.js"
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
+module.exports = withBundleAnalyzer({
+  // Uw Next.js configuratie
+});
+```
+**Gebruik:**
+```bash
+ANALYZE=true npm run build
+```
+ </Tab>
+ <Tab value="Webpack (CRA / Angular / etc)">
+### Standaard Webpack
+Voor Create React App (ejected), Angular of aangepaste Webpack-setups, gebruikt u de industriestandaard `webpack-bundle-analyzer`.
+```bash packageManager='npm'
+npm install -D webpack-bundle-analyzer
+```
+```bash packageManager='yarn'
+yarn add -D webpack-bundle-analyzer
+```
+```bash packageManager='pnpm'
+pnpm add -D webpack-bundle-analyzer
+```
+```bash packageManager='bun'
+bun add -d webpack-bundle-analyzer
+```
+```typescript fileName="webpack.config.ts
+import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";
+export default {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      reportFilename: "bundle-analyzer.html",
+      openAnalyzer: false,
+    }),
+  ],
+};
+```
+ </Tab>
+</Tabs>
+## Hoe het werkt
+Intlayer gebruikt een **per-component aanpak**. In tegenstelling tot globale JSON-bestanden, wordt uw inhoud gedefinieerd naast of binnen uw componenten. Tijdens het build-proces zal Intlayer:
+1.  Uw code **analyseren** om `useIntlayer`-aanroepen te vinden.
+2.  De bijbehorende woordenboekinhoud **bouwen**.
+3.  De `useIntlayer`-aanroep **vervangen** door geoptimaliseerde code op basis van uw configuratie.
+Dit zorgt ervoor dat:
+- Als een component niet wordt geïmporteerd, de inhoud ervan niet in de bundel wordt opgenomen (Dead Code Elimination).
+- Als een component lazy-loaded is, de inhoud ervan ook lazy-loaded is.
+## Installatie per platform
+<Tabs>
+ <Tab value="nextjs">
+### Next.js
+Next.js vereist de `@intlayer/swc` plugin om de transformatie af te handelen, aangezien Next.js SWC gebruikt voor builds.
+> Deze plugin is niet standaard geïnstalleerd omdat SWC-plugins nog experimenteel zijn voor Next.js. Dit kan in de toekomst veranderen.
+```bash packageManager="npm"
+npm install -D @intlayer/swc
+```
+```bash packageManager="yarn"
+yarn add -D @intlayer/swc
+```
+```bash packageManager="pnpm"
+pnpm add -D @intlayer/swc
+```
+```bash packageManager="bun"
+bun add -d @intlayer/swc
+```
+Eenmaal geïnstalleerd, zal Intlayer de plugin automatisch detecteren en gebruiken.
+ </Tab>
+ <Tab value="vite">
+### Vite
+Vite gebruikt de `@intlayer/babel` plugin die als afhankelijkheid van `vite-intlayer` is opgenomen. De optimalisatie is standaard ingeschakeld. Verder hoeft u niets te doen.
+ </Tab>
+ <Tab value="webpack">
+### Webpack
+Om bundeloptimalisatie met Intlayer op Webpack in te schakelen, moet u de juiste Babel (`@intlayer/babel`) of SWC (`@intlayer/swc`) plugin installeren en configureren.
+```bash packageManager="npm"
+npm install -D @intlayer/babel
+```
+```bash packageManager="yarn"
+yarn add -D @intlayer/babel
+```
+```bash packageManager="pnpm"
+pnpm add -D @intlayer/babel
+```
+```bash packageManager="bun"
+bun add -d @intlayer/babel
+```
+```typescript fileName="babel.config.js"
+const {
+  getOptimizePluginOptions,
+  intlayerOptimizeBabelPlugin,
+} = require("@intlayer/babel");
+module.exports = {
+  plugins: [[intlayerOptimizeBabelPlugin, getOptimizePluginOptions()]],
+};
+```
+ </Tab>
+</Tabs>
+## Configuratie
+U kunt bepalen hoe Intlayer uw bundel optimaliseert via de `build` eigenschap in uw `intlayer.config.ts`.
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * Minificeer de woordenboeken om de bundelgrootte te verkleinen.
+     */
+     minify: true;
+    /**
+     * Verwijder ongebruikte sleutels in woordenboeken (purge)
+     */
+     purge: true;
+    /**
+     * Geeft aan of de build TypeScript-typen moet controleren
+     */
+    checkTypes: false;
+  },
+};
+export default config;
+```
+> Het wordt in de meeste gevallen aanbevolen om de standaardoptie voor `optimize` te behouden.
+> Zie de configuratie-doc voor meer details: [Configuratie](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/configuration.md)
+### Build-opties
+De volgende opties zijn beschikbaar onder het `build` configuratie-object:
+| Eigenschap     | Type      | Standaard   | Beschrijving                                                                                                                                                                                                               |
+| :------------- | :-------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`** | `boolean` | `undefined` | Bepaalt of build-optimalisatie is ingeschakeld. Indien `true`, vervangt Intlayer woordenboekaanroepen door geoptimaliseerde injecties. Indien `false`, is optimalisatie uitgeschakeld. Ideaal ingesteld op `true` in prod. |
+| **`minify`**   | `boolean` | `false`     | Of de woordenboeken moeten worden geminificeerd om de bundelgrootte te verkleinen.                                                                                                                                         |
+| **`purge`**    | `boolean` | `false`     | Of de ongebruikte sleutels in woordenboeken moeten worden verwijderd.                                                                                                                                                      |
+### Minificatie
+Het minificeren van woordenboeken verwijdert onnodige witruimte, opmerkingen en vermindert de omvang van de JSON-inhoud. Dit is vooral handig voor grote woordenboeken.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+> Opmerking: Minificatie wordt genegeerd als `optimize` is uitgeschakeld of als de Visual Editor is ingeschakeld (omdat de editor de volledige inhoud nodig heeft om bewerkingen toe te staan).
+### Purging (Opschonen)
+Purging zorgt ervoor dat alleen de sleutels die daadwerkelijk in uw code worden gebruikt, worden opgenomen in de uiteindelijke woordenboekbundel. Dit kan de omvang van uw bundel aanzienlijk verkleinen als u grote woordenboeken heeft met veel sleutels die niet in elk deel van uw applicatie worden gebruikt.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    purge: true,
+  },
+};
+export default config;
+```
+> Opmerking: Purging wordt genegeerd als `optimize` is uitgeschakeld.
+### Import Mode
+Voor grote applicaties met meerdere pagina's en locales kunnen uw JSON-bestanden een aanzienlijk deel van uw bundelgrootte uitmaken. Met Intlayer kunt u bepalen hoe woordenboeken worden geladen.
+De import mode kan standaard globaal worden gedefinieerd in uw `intlayer.config.ts` bestand.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+Evenals voor elk woordenboek in uw `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}` bestanden.
+```ts
+import { type Dictionary, t } from "intlayer";
+const appContent: Dictionary = {
+  key: "app",
+  importMode: "dynamic", // Overschrijf de standaard import mode
+  content: {
+    // ...
+  },
+};
+export default appContent;
+```
+| Eigenschap       | Type                               | Standaard  | Beschrijving                                                                                                                        |
+| :--------------- | :--------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------------------- |
+| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'` | **Verouderd**: Gebruik in plaats daarvan `dictionary.importMode`. Bepaalt hoe woordenboeken worden geladen (zie details hieronder). |
+De `importMode` instelling bepaalt hoe de woordenboekinhoud in uw component wordt geïnjecteerd.
+U kunt dit globaal definiëren in het `intlayer.config.ts` bestand onder het `dictionary` object, of u kunt het overschrijven voor een specifiek woordenboek in het bijbehorende `.content.ts` bestand.
+### 1. Statische Modus (`default`)
+In de statische modus vervangt Intlayer `useIntlayer` door `useDictionary` en injecteert het woordenboek rechtstreeks in de JavaScript-bundel.
+- **Voordelen:** Directe rendering (synchroon), nul extra netwerkverzoeken tijdens hydratatie.
+- **Nadelen:** De bundel bevat vertalingen voor **alle** beschikbare talen voor dat specifieke component.
+- **Beste voor:** Single Page Applications (SPA).
+**Voorbeeld van getransformeerde code:**
+```tsx
+// Uw code
+const content = useIntlayer("my-key");
+// Geoptimaliseerde code (Statisch)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titre",
+    },
+  },
+});
+```
+### 2. Dynamische Modus
+In de dynamische modus vervangt Intlayer `useIntlayer` door `useDictionaryAsync`. Dit maakt gebruik van `import()` (Suspense-achtig mechanisme) om specifiek de JSON voor de huidige locale lazy te laden.
+- **Voordelen:** **Tree shaking op locale-niveau.** Een gebruiker die de Engelse versie bekijkt, downloadt _alleen_ het Engelse woordenboek. Het Franse woordenboek wordt nooit geladen.
+- **Nadelen:** Activeert een netwerkverzoek (asset fetch) per component tijdens hydratatie.
+- **Beste voor:** Grote tekstblokken, artikelen of applicaties die veel talen ondersteunen waarbij bundelgrootte kritiek is.
+**Voorbeeld van getransformeerde code:**
+```tsx
+// Uw code
+const content = useIntlayer("my-key");
+// Geoptimaliseerde code (Dynamisch)
+const content = useDictionaryAsync({
+  en: () =>
+    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
+      (mod) => mod.default
+    ),
+  fr: () =>
+    import(".intlayer/dynamic_dictionary/my-key/fr.json").then(
+      (mod) => mod.default
+    ),
+});
+```
+> Wanneer u `importMode: 'dynamic'` gebruikt en u heeft 100 componenten die `useIntlayer` op een enkele pagina gebruiken, zal de browser 100 afzonderlijke fetches proberen. Om deze "waterval" van verzoeken te vermijden, groepeert u de inhoud in minder `.content` bestanden (bijv. één woordenboek per paginasectie) in plaats van één per atoomcomponent.
+### 3. Fetch Mode
+Gedraagt zich vergelijkbaar met de dynamische modus, maar probeert eerst woordenboeken op te halen uit de Intlayer Live Sync API. Als de API-aanroep mislukt of de inhoud niet is gemarkeerd voor live updates, valt het terug op de dynamische import.
+> Zie CMS-documentatie voor meer details: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/nl/intlayer_CMS.md)
+> In fetch mode kunnen purging en minificatie niet worden gebruikt.
+## Samenvatting: Statisch vs Dynamisch
+| Functie              | Statische Modus                              | Dynamische Modus                    |
+| :------------------- | :------------------------------------------- | :---------------------------------- |
+| **JS-bundelgrootte** | Groter (bevat alle talen voor het component) | Kleinste (alleen code, geen inhoud) |
+| **Initiële Load**    | Direct (inhoud zit in bundel)                | Lichte vertraging (haalt JSON op)   |
+| **Netwerkverzoeken** | 0 extra verzoeken                            | 1 verzoek per woordenboek           |
+| **Tree Shaking**     | Component-niveau                             | Component-niveau + Locale-niveau    |
+| **Beste Use Case**   | UI-componenten, kleine apps                  | Pagina's met veel tekst, veel talen |