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/id/intlayer_with_tanstack.md CHANGED Viewed

@@ -224,9 +224,7 @@ function RootDocument({ children }: { children: ReactNode }) {
         <HeadContent />
       </head>
       <body>
-        <IntlayerProvider locale={locale}>
-          {children}
-        </IntlayerProvider>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
         <Scripts />
       </body>
     </html>
@@ -325,30 +323,20 @@ import { getPrefix } from "intlayer";
 export const LOCALE_ROUTE = "{-$locale}" as const;
-// Utilitas utama
-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">;
-// Pembantu
-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);
@@ -377,26 +365,26 @@ Kemudian kita dapat membuat hook `useLocalizedNavigate` untuk navigasi secara te
 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();
@@ -443,38 +431,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() {
@@ -629,12 +585,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/it/bundle_optimization.md ADDED Viewed

@@ -0,0 +1,454 @@
+---
+createdAt: 2025-11-25
+updatedAt: 2026-04-08
+title: Ottimizzazione della dimensione del bundle i18n e prestazioni
+description: Riduci la dimensione del bundle della tua applicazione ottimizzando i contenuti di internazionalizzazione (i18n). Scopri come sfruttare il tree shaking e il lazy loading per i dizionari con Intlayer.
+keywords:
+  - Ottimizzazione del bundle
+  - Automazione dei contenuti
+  - Contenuto dinamico
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - bundle-optimization
+history:
+  - version: 8.7.0
+    date: 2026-04-08
+    changes: "Aggiunte le opzioni `minify` e `purge` alla configurazione di build"
+---
+# Ottimizzazione della dimensione del bundle i18n e prestazioni
+Una delle sfide più comuni con le soluzioni i18n tradizionali che si affidano a file JSON è la gestione della dimensione dei contenuti. Se gli sviluppatori non separano manualmente i contenuti in namespace, gli utenti finiscono spesso per scaricare le traduzioni per ogni pagina e potenzialmente per ogni lingua solo per visualizzare una singola pagina.
+Ad esempio, un'applicazione con 10 pagine tradotte in 10 lingue potrebbe comportare il download dei contenuti di 100 pagine da parte di un utente, anche se ne serve solo **una** (quella corrente nella lingua corrente). Ciò comporta uno spreco di larghezza di banda e tempi di caricamento più lenti.
+**Intlayer risolve questo problema attraverso l'ottimizzazione in fase di build.** Analizza il tuo codice per rilevare quali dizionari sono effettivamente utilizzati per ogni componente e reinserisce solo il contenuto necessario nel tuo bundle.
+## Sommario
+<TOC />
+## Scansiona il tuo bundle
+Analizzare il tuo bundle è il primo passo per identificare file JSON "pesanti" e opportunità di code-splitting. Questi strumenti generano una mappa ad albero visiva del codice compilato della tua applicazione, permettendoti di vedere esattamente quali librerie stanno consumando più spazio.
+<Tabs>
+ <Tab value="vite">
+### Vite / Rollup
+Vite utilizza Rollup internamente. Il plugin `rollup-plugin-visualizer` genera un file HTML interattivo che mostra le dimensioni di ogni modulo nel tuo grafico.
+```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, // Apre automaticamente il report nel tuo browser
+      filename: "stats.html",
+      gzipSize: true,
+      brotliSize: true,
+    }),
+  ],
+});
+```
+ </Tab>
+ <Tab value="nextjs (turbopack)">
+### Next.js (Turbopack)
+Per i progetti che utilizzano App Router e Turbopack, Next.js fornisce un analizzatore sperimentale integrato che non richiede dipendenze extra.
+```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)
+Se stai utilizzando il bundler Webpack predefinito in Next.js, usa l'analizzatore di bundle ufficiale. Attivalo impostando una variabile d'ambiente durante la 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({
+  // La tua configurazione Next.js
+});
+```
+**Utilizzo:**
+```bash
+ANALYZE=true npm run build
+```
+ </Tab>
+ <Tab value="Webpack (CRA / Angular / etc)">
+### Webpack Standard
+Per Create React App (ejected), Angular o configurazioni Webpack personalizzate, usa lo standard di settore `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>
+## Come funziona
+Intlayer utilizza un **approccio per componente**. A differenza dei file JSON globali, i tuoi contenuti sono definiti insieme o all'interno dei tuoi componenti. Durante il processo di build, Intlayer:
+1.  **Analizza** il tuo codice per trovare le chiamate a `useIntlayer`.
+2.  **Costruisce** il contenuto del dizionario corrispondente.
+3.  **Sostituisce** la chiamata a `useIntlayer` con codice ottimizzato in base alla tua configurazione.
+Questo assicura che:
+- Se un componente non viene importato, il suo contenuto non viene incluso nel bundle (Dead Code Elimination).
+- Se un componente è caricato in modalità lazy, anche il suo contenuto viene caricato in modalità lazy.
+## Configurazione per piattaforma
+<Tabs>
+ <Tab value="nextjs">
+### Next.js
+Next.js richiede il plugin `@intlayer/swc` per gestire la trasformazione, poiché Next.js utilizza SWC per le build.
+> Questo plugin non è installato di default perché i plugin SWC sono ancora sperimentali per Next.js. Potrebbe cambiare in futuro.
+```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
+```
+Una volta installato, Intlayer rileverà e utilizzerà automaticamente il plugin.
+ </Tab>
+ <Tab value="vite">
+### Vite
+Vite utilizza il plugin `@intlayer/babel` che è incluso come dipendenza di `vite-intlayer`. L'ottimizzazione è abilitata di default. Non c'è altro da fare.
+ </Tab>
+ <Tab value="webpack">
+### Webpack
+Per abilitare l'ottimizzazione del bundle con Intlayer su Webpack, è necessario installare e configurare il plugin Babel (`@intlayer/babel`) o SWC (`@intlayer/swc`) appropriato.
+```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>
+## Configurazione
+Puoi controllare come Intlayer ottimizza il tuo bundle tramite la proprietà `build` nel tuo `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: {
+    /**
+     * Minimizza i dizionari per ridurre la dimensione del bundle.
+     */
+     minify: true;
+    /**
+     * Elimina le chiavi inutilizzate nei dizionari
+     */
+     purge: true;
+    /**
+     * Indica se la build deve controllare i tipi TypeScript
+     */
+    checkTypes: false;
+  },
+};
+export default config;
+```
+> Mantenere l'opzione predefinita per `optimize` è raccomandato nella stragrande maggioranza dei casi.
+> Vedi la doc di configurazione per maggiori dettagli: [Configurazione](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/configuration.md)
+### Opzioni di Build
+Le seguenti opzioni sono disponibili sotto l'oggetto di configurazione `build`:
+| Proprietà      | Tipo      | Predefinito | Descrizione                                                                                                                                                                                                                |
+| :------------- | :-------- | :---------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **`optimize`** | `boolean` | `undefined` | Controlla se l'ottimizzazione della build è abilitata. Se `true`, Intlayer sostituisce le chiamate ai dizionari con iniezioni ottimizzate. Se `false`, l'ottimizzazione è disabilitata. Idealmente a `true` in produzione. |
+| **`minify`**   | `boolean` | `false`     | Se minimizzare i dizionari per ridurre la dimensione del bundle.                                                                                                                                                           |
+| **`purge`**    | `boolean` | `false`     | Se eliminare le chiavi inutilizzate nei dizionari.                                                                                                                                                                         |
+### Minimizzazione
+Minimizzare i dizionari rimuove spazi bianchi non necessari, commenti e riduce la dimensione dei contenuti JSON. Ciò è particolarmente utile per dizionari di grandi dimensioni.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+> Nota: La minimizzazione viene ignorata se `optimize` è disabilitato o se il Visual Editor è abilitato (poiché l'editor ha bisogno del contenuto completo per consentire le modifiche).
+### Purging (Eliminazione)
+Il purging assicura che solo le chiavi effettivamente utilizzate nel codice siano incluse nel bundle finale dei dizionari. Ciò può ridurre significativamente la dimensione del bundle se si hanno dizionari grandi con molte chiavi che non vengono utilizzate in ogni parte dell'applicazione.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    purge: true,
+  },
+};
+export default config;
+```
+> Nota: Il purging viene ignorato se `optimize` è disabilitato.
+### Modalità di Importazione
+Per applicazioni di grandi dimensioni, comprese diverse pagine e lingue, i tuoi file JSON possono rappresentare una parte significativa della dimensione del tuo bundle. Intlayer ti consente di controllare come vengono caricati i dizionari.
+La modalità di importazione può essere definita di default a livello globale nel file `intlayer.config.ts`.
+```typescript fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+const config: IntlayerConfig = {
+  build: {
+    minify: true,
+  },
+};
+export default config;
+```
+Così come per ogni dizionario nei tuoi file `.content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5}}`.
+```ts
+import { type Dictionary, t } from "intlayer";
+const appContent: Dictionary = {
+  key: "app",
+  importMode: "dynamic", // Sovrascrive la modalità di importazione predefinita
+  content: {
+    // ...
+  },
+};
+export default appContent;
+```
+| Proprietà        | Tipo                               | Predefinito | Descrizione                                                                                                                  |
+| :--------------- | :--------------------------------- | :---------- | :--------------------------------------------------------------------------------------------------------------------------- |
+| **`importMode`** | `'static'`, `'dynamic'`, `'fetch'` | `'static'`  | **Deprecato**: Usa `dictionary.importMode` invece. Determina come vengono caricati i dizionari (vedi i dettagli di seguito). |
+L'impostazione `importMode` dettata come il contenuto del dizionario viene iniettato nel tuo componente.
+Puoi definirlo globalmente nel file `intlayer.config.ts` sotto l'oggetto `dictionary`, oppure puoi sovrascriverlo per un dizionario specifico nel suo file `.content.ts`.
+### 1. Modalità Statica (`default`)
+In modalità statica, Intlayer sostituisce `useIntlayer` con `useDictionary` e inietta il dizionario direttamente nel bundle JavaScript.
+- **Pro:** Rendering istantaneo (sincrono), zero richieste di rete extra durante l'idratazione.
+- **Contro:** Il bundle include le traduzioni per **tutte** le lingue disponibili per quel componente specifico.
+- **Ideale per:** Single Page Applications (SPA).
+**Esempio di codice trasformato:**
+```tsx
+// Il tuo codice
+const content = useIntlayer("my-key");
+// Codice ottimizzato (Statico)
+const content = useDictionary({
+  key: "my-key",
+  content: {
+    nodeType: "translation",
+    translation: {
+      en: "My title",
+      fr: "Mon titolo",
+    },
+  },
+});
+```
+### 2. Modalità Dinamica
+In modalità dinamica, Intlayer sostituisce `useIntlayer` con `useDictionaryAsync`. Questo utilizza `import()` (meccanismo simile a Suspense) per caricare in modalità lazy specificamente il JSON per la lingua corrente.
+- **Pro:** **Tree shaking a livello di lingua.** Un utente che visualizza la versione inglese scaricherà _solo_ il dizionario inglese. Il dizionario francese non viene mai caricato.
+- **Contro:** Attiva una richiesta di rete (recupero dell'asset) per componente durante l'idratazione.
+- **Ideale per:** Grandi blocchi di testo, articoli o applicazioni che supportano molte lingue in cui la dimensione del bundle è critica.
+**Esempio di codice trasformato:**
+```tsx
+// Il tuo codice
+const content = useIntlayer("my-key");
+// Codice ottimizzato (Dinamico)
+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
+    ),
+});
+```
+> Quando usi `importMode: 'dynamic'`, se hai 100 componenti che usano `useIntlayer` in una singola pagina, il browser tenterà 100 recuperi separati. Per evitare questo "waterfall" di richieste, raggruppa i contenuti in meno file `.content` (ad esempio, un dizionario per sezione della pagina) invece di uno per ogni singolo componente atomico.
+### 3. Modalità Fetch
+Si comporta in modo simile alla modalità dinamica ma tenta prima di recuperare i dizionari dall'API Intlayer Live Sync. Se la chiamata API fallisce o il contenuto non è contrassegnato per gli aggiornamenti live, ricorre all'importazione dinamica.
+> Vedi la documentazione CMS per maggiori dettagli: [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/it/intlayer_CMS.md)
+> In modalità fetch, purghe e minimizzazioni non possono essere utilizzate.
+## Riepilogo: Statico vs Dinamico
+| Caratteristica           | Modalità Statica                                     | Modalità Dinamica                      |
+| :----------------------- | :--------------------------------------------------- | :------------------------------------- |
+| **Dimensione Bundle JS** | Maggiore (include tutte le lingue per il componente) | Minore (solo codice, nessun contenuto) |
+| **Caricamento Iniziale** | Istantaneo (Il contenuto è nel bundle)               | Leggero ritardo (Recupera JSON)        |
+| **Richieste di Rete**    | 0 richieste extra                                    | 1 richiesta per dizionario             |
+| **Tree Shaking**         | Livello componente                                   | Livello componente + Livello lingua    |
+| **Miglior Caso d'Uso**   | Componenti UI, Piccole Applicazioni                  | Pagine con molto testo, molte lingue   |

package/docs/it/intlayer_with_next-i18next.md CHANGED Viewed

@@ -257,7 +257,7 @@ export default function LocaleLayout({
   params: { locale: string };
 }) {
   const locale: Locale = (locales as readonly string[]).includes(params.locale)
-    ? (params.locale as any)
+    ? params.locale
     : defaultLocale;
   const dir = isRtl(locale) ? "rtl" : "ltr";

package/docs/it/intlayer_with_next-intl.md CHANGED Viewed

@@ -103,7 +103,7 @@ async function loadMessages(locale: string) {
 }
 export default getRequestConfig(async ({ locale }) => {
-  if (!locales.includes(locale as any)) notFound();
+  if (!locales.includes(locale)) notFound();
   return {
     messages: await loadMessages(locale),

package/docs/it/intlayer_with_tanstack+solid.md CHANGED Viewed

@@ -194,9 +194,7 @@ const RootComponent: ParentComponent = (props) => {
       </head>
       <body>
         <IntlayerProvider locale={locale}>
-          <Suspense>
-            {props.children}
-          </Suspense>
+          <Suspense>{props.children}</Suspense>
         </IntlayerProvider>
         <Scripts />
       </body>
@@ -506,12 +504,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 },
       ],
     };
   },