@intlayer/docs 9.4.1 → 9.4.3

package/blog/pt/is_vue-i18n_outdated.md

@@ -0,0 +1,338 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: O vue-i18n está obsoleto em 2026?
+description: O vue-i18n tem sido o padrão para Vue e Nuxt há dez anos. Contudo, em nossos benchmarks ele se revelou o runtime de i18n mais pesado da web. Entenda o porquê.
+keywords:
+  - vue-i18n
+  - Intlayer
+  - Internacionalização
+  - i18n
+  - Vue
+  - Nuxt
+  - Tamanho do bundle
+  - Blog
+slugs:
+  - blog
+  - is-vue-i18n-outdated
+author: aymericzip
+---
+
+# O vue-i18n está obsoleto em 2026?
+
+No universo Vue, poucas soluções alcançam o nível de utilização do `vue-i18n`. Sob a liderança de Kazupon desde o Vue 2, ele dá suporte ao `@nuxtjs/i18n` e funciona como a alternativa padrão para grande parte das aplicações multilíngues.
+
+Ainda assim, nossos testes de benchmark em 2026 trouxeram um dado surpreendente: **o `vue-i18n` foi o runtime de localização mais pesado entre todos os ecossistemas frontend avaliados.**
+
+Em um projeto simples com Vite + Vue de 31.5 KB, a adoção do `vue-i18n` elevou o JavaScript médio por página para **136.4 KB**, mais que quadruplicando o tamanho transferido.
+
+Por que uma biblioteca feita para um framework reconhecido pela agilidade resultou em uma sobrecarga tão grande? E será que seu modelo estritamente em runtime continua adequado?
+
+<TOC/>
+
+## Principais conclusões
+
+**O runtime mais pesado registrado:**
+
+Com **24.3 KB gzipped (83.2 KB minificados)** antes mesmo de incluir qualquer texto traduzido, o `vue-i18n` é cerca de **9 vezes mais pesado** que a engine do `intlayer` (2.7 KB).
+
+**Aumento de 330% na carga da página:**
+
+O `vue-i18n` fez uma página Vue inicial de 31.5 KB saltar para 136.4 KB. O Intlayer manteve o resultado em 59.3 KB, o que representa **um payload 56% mais leve**.
+
+**Compilador embutido no navegador:**
+
+Por padrão, sem configurar aliases próprios no bundler, o `vue-i18n` envia um compilador completo de mensagens ao navegador para analisar textos dinamicamente.
+
+**Frequência de manutenção:**
+
+No último ano, o `vue-i18n` acumulou ~259 commits, dedicados a correções de bugs e alinhamento com novas versões do Vue.
+
+**Falta de recursos modernos integrados:**
+
+Ausência de suporte de primeiro nível a Language Server (LSP), servidores MCP de IA ou comandos de tradução em linha de comando.
+
+## Manutenção vs. ferramentas atuais
+
+| Repositório           | Estrelas                                                                                                                                               | Total de commits                                                                                                                                                    | Commits / ano                                                                                                                                                      | Último commit                                                                                                                                |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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) |
+
+Histórico do último ano:
+
+- `intlify/vue-i18n`: **259 commits** (manutenção para Vue 3 e Nuxt).
+- `aymericzip/intlayer`: **4.343 commits** (trabalho contínuo em otimização de compilação, integrações LSP e suporte a IA).
+
+[![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)
+
+Uma ferramenta estabelecida garante estabilidade. Mas o desenvolvimento atual aproveita transformações AST no build, eliminação de código inativo e tradução por IA. Um modelo focado no navegador tem dificuldade de acompanhar esses padrões.
+
+## Desempenho em Vite + Vue
+
+Avaliamos um projeto de 10 páginas e 10 idiomas construído com Vite e 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;"
+/>
+
+> Testes executados em navegadores reais com compressão gzip de produção. Informações completas na [documentação do benchmark Vue](https://intlayer.org/pt/doc/benchmark/vue).
+
+### Impacto inicial de cada biblioteca
+
+Sobrecarga antes de adicionar os arquivos de tradução:
+
+| Biblioteca        | Gzipped    | Minificado |
+| ----------------- | ---------- | ---------- |
+| `vue-i18n@11.4.0` | 24.3 KB    | 83.2 KB    |
+| `intlayer@8.7.12` | **2.7 KB** | **7.6 KB** |
+
+O runtime do `vue-i18n` sozinho atinge **24.3 KB gzipped**, quase o peso do núcleo do Vue. O Intlayer adiciona meros **2.7 KB**.
+
+### Peso das páginas e dispersão de conteúdo
+
+| Configuração    | JS médio / pág (gz) | Vazamento idioma | Vazamento outras págs | Componente médio (gz) |
+| --------------- | ------------------- | ---------------- | --------------------- | --------------------- |
+| Base (sem 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**            |
+
+### Conclusões centrais
+
+**Aumento proporcional elevado:**
+
+Como a base do Vue é muito enxuta (~31 KB), o `vue-i18n` multiplica o volume total da página por mais de quatro.
+
+**Vazamento entre páginas:**
+
+Por padrão, **90% das traduções transmitidas** para uma rota pertencem a outras seções. O Intlayer elimina completamente essa perda, atingindo **0.0%**.
+
+**Tamanho de componentes isolados:**
+
+Componentes compilados com escopos locais chegaram a uma média de 196 KB no `vue-i18n` devido à duplicação de catálogos, frente a apenas **6.5 KB** no Intlayer.
+
+## Por que o vue-i18n é pesado?
+
+### Um compilador AST entregue ao navegador
+
+O `vue-i18n` conta com seu próprio compilador de mensagens. Regras de plural e substituições de variáveis são convertidas em Abstract Syntax Trees diretamente em runtime.
+
+Para contornar esse comportamento, é necessário declarar aliases de empacotamento para `vue-i18n/dist/vue-i18n.runtime.esm-bundler.js` e pré-compilar os arquivos com `@intlify/unplugin-vue-i18n`. Muitos projetos ignoram essa etapa.
+
+### Funcionalidades monolíticas
+
+O `vue-i18n` agrega módulos de datas e números, mensagens encadeadas, conectores para a Options API legada (`$t`, `v-t`) e proxies reativos. Mesmo precisando apenas de frases simples em `<script setup>`, o pacote inteiro é incorporado.
+
+### Chaves dinâmicas inviabilizam o tree-shaking
+
+Pelo fato de `"home.hero.title"` ser calculada em tempo de execução, os empacotadores não têm como checar o uso das strings. Textos desnecessários continuam no 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>
+
+O [compilador do Intlayer](https://intlayer.org/pt/doc/compiler) rastreia com exatidão as propriedades acessadas e retira o conteúdo não utilizado antes de gerar os arquivos do cliente. Consulte [otimização de bundle](https://intlayer.org/pt/doc/concept/bundle-optimization) para entender melhor.
+
+## Experiência do desenvolvedor
+
+### Pastas separadas vs. co-localização
+
+No `vue-i18n`, as mensagens ficam arquivadas em uma pasta `locales/` distante. O Intlayer reúne as declarações de conteúdo junto aos componentes:
+
+<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/pt.json"
+{
+  "hero": {
+    "title": "Lance em todos os idiomas"
+  }
+}
+```
+
+```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",
+      pt: "Lance em todos os idiomas",
+    }),
+  },
+} 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>
+
+Ao excluir ou renomear `Hero.vue`, seus arquivos de tradução são removidos ou movidos simultaneamente.
+
+### Sugestão de chaves vs. integridade garantida
+
+`DefineLocaleMessage` oferece autocompletar com base no esquema principal. No entanto, não previne ausência de traduções. Se faltar uma chave em `pt.json`, o TypeScript não acusará erro durante a compilação.
+
+No Intlayer, os dicionários passam por validação rigorosa. Ativar o [`strictMode`](https://intlayer.org/pt/doc/concept/configuration) faz com que qualquer texto pendente resulte em erro de compilação.
+
+### Ferramentas para IDEs e IA
+
+| Recurso                    | `vue-i18n`            | Intlayer                                                                    |
+| -------------------------- | --------------------- | --------------------------------------------------------------------------- |
+| **Extensão VS Code**       | Terceiros (i18n Ally) | ✅ [Extensão oficial](https://intlayer.org/pt/doc/vs-code-extension)        |
+| **Language Server (LSP)**  | ❌ Nenhum             | ✅ [LSP dedicado](https://intlayer.org/pt/doc/lsp)                          |
+| **Servidor MCP para IA**   | ❌ Nenhum             | ✅ [Servidor MCP integrado](https://intlayer.org/pt/doc/mcp-server)         |
+| **Habilidades de Agente**  | ❌ Nenhuma            | ✅ [Skills autônomas](https://intlayer.org/pt/doc/agent_skills)             |
+| **CMS Visual em contexto** | ❌ Nenhum             | ✅ [CMS gratuito & Open Source](https://intlayer.org/pt/doc/concept/editor) |
+
+## Estratégias de tradução
+
+O `vue-i18n` não fornece comandos próprios para tradução. É praxe exportar arquivos para plataformas como Crowdin ou Phrase.
+
+O Intlayer incorpora essas soluções nativamente:
+
+**Preenchimento automático por IA local (`intlayer fill`):**
+
+Traduz textos ausentes utilizando suas chaves de API da OpenAI, Anthropic, Mistral ou Gemini.
+
+**CMS visual auto-hospedável:**
+
+Instale o [CMS Intlayer](https://intlayer.org/pt/doc/concept/cms) para capacitar redatores a alterar conteúdos com gravação direta no Git.
+
+**Licença de código aberto:**
+
+Todas as ferramentas operam sob a licença Apache 2.0.
+
+## Em quais momentos o vue-i18n ainda se justifica?
+
+<AccordionGroup>
+<Accordion header="Aplicações consolidadas em Nuxt 2/3">
+
+Se o roteamento tem vínculo profundo com o `@nuxtjs/i18n`, refazer a estrutura pode não valer o custo.
+
+</Accordion>
+<Accordion header="Regras específicas de ICU">
+
+Para quem depende de regras complexas de mensagens encadeadas ou formatações avançadas de dados.
+
+</Accordion>
+<Accordion header="Pequenos projetos experimentais">
+
+Se o volume do bundle não impacta os objetivos da aplicação.
+
+</Accordion>
+</AccordionGroup>
+
+## Como melhorar minha configuração atual do vue-i18n?
+
+O Intlayer oferece pacotes de compatibilidade direta que preservam com precisão as assinaturas de funções do `vue-i18n` e `@nuxtjs/i18n` (`useI18n`, `$t`, `<i18n-t>`). Você não precisa reescrever templates ou composables para usufruir de uma arquitetura leve e otimizada por compilação.
+
+A instalação se completa em um único comando:
+
+```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
+```
+
+Essa CLI interativa:
+
+1. Instala o pacote de compatibilidade `@intlayer/vue-i18n` ou `@intlayer/nuxt-i18n`.
+2. Configura aliases no Vite ou Nuxt para que suas importações e tags habituais apontem para o Intlayer, permitindo desinstalar o `vue-i18n` do `package.json`.
+3. Ativa imediatamente diagnósticos do Language Server (LSP), elimina o parser AST de 24 KB do bundle de cliente e desbloqueia fluxos de tradução com IA local sem necessidade de uma refatoração profunda.
+
+Para instruções passo a passo, explore nossos guias dedicados:
+
+- **Compatibilidade direta:** Mantenha seus templates com a [camada de compatibilidade do `vue-i18n`](https://intlayer.org/pt/doc/compatibility/vue-i18n) ou [`@nuxtjs/i18n`](https://intlayer.org/pt/doc/compatibility/nuxtjs-i18n).
+- **Guias de migração passo a passo:** Converta arquivos JSON em dicionários estruturados: [a partir do vue-i18n](https://intlayer.org/pt/doc/migration/vue-i18n) ou [a partir do @nuxtjs/i18n](https://intlayer.org/pt/doc/migration/nuxtjs-i18n).
+- **Solução mista:** Preserve o `vue-i18n` em tempo de execução enquanto [adota o Intlayer com vue-i18n](https://intlayer.org/pt/blog/intlayer-with-vue-i18n) para ter tipos estritos e tradução por IA local.
+
+Avalie o peso e a dispersão do seu projeto com o [scanner de SEO para i18n gratuito](https://intlayer.org/i18n-seo-scanner):
+
+<ClickToOpenIframe src="https://intlayer.org/i18n-seo-scanner" width="100%" height="600px" style="border:none;"/>
+
+## Leituras sugeridas
+
+- [Benchmark Vue & Vite i18n: comparativo completo de performance](https://intlayer.org/pt/doc/benchmark/vue)
+- [vue-i18n vs Intlayer: comparação técnica detalhada](https://intlayer.org/pt/blog/vue-i18n-vs-intlayer)
+- [O next-intl está obsoleto em 2026?](https://intlayer.org/pt/blog/is-next-intl-outdated)
+- [Internacionalização baseada em compilador vs declarativa](https://intlayer.org/pt/blog/compiler-vs-declarative-i18n)

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

@@ -0,0 +1,179 @@
+---
+createdAt: 2026-09-02
+updatedAt: 2026-09-02
+title: "Vite i18n: imports glob, chunks e mensagens em tempo de compilação"
+description: O que realmente é específico do Vite no i18n. Catálogos lazy com import.meta.glob, por que a divisão por rota raramente divide, lacunas de HMR e plugins no build.
+keywords:
+  - vite i18n
+  - import.meta.glob
+  - vite code splitting
+  - lazy load traduções
+  - vite plugin i18n
+  - rollup chunks
+slugs:
+  - blog
+  - i18n-technologies
+  - build-tools
+  - vite
+author: aymericzip
+---
+
+# Vite i18n: os aspectos próprios do Vite, não do seu framework
+
+A maioria dos tutoriais de "Vite i18n" são, na verdade, tutoriais de React ou Vue que por acaso utilizam o Vite. Este artigo aborda a camada inferior: como os catálogos são importados, o que o Rollup faz com eles e por que o carregamento assíncrono (lazy loading) que você implementou provavelmente não é tão lazy quanto você imagina.
+
+## Sumário
+
+<TOC/>
+
+## A importação estática é o padrão, e ela é síncrona
+
+A configuração mais comum importa cada catálogo no topo de um módulo:
+
+```ts fileName="src/i18n.ts"
+import en from "./locales/en.json";
+import fr from "./locales/fr.json";
+import ja from "./locales/ja.json";
+```
+
+Isso inclui três catálogos diretamente no chunk de entrada principal, em todas as páginas, para todos os visitantes. É aceitável para dois idiomas e algumas dezenas de textos. A partir de dez idiomas, torna-se o maior custo evitável em todo o bundle.
+
+## `import.meta.glob` e a opção que quase todo mundo configura errado
+
+A importação por padrão (glob import) do Vite é a solução usual:
+
+```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>;
+};
+```
+
+O carregamento assíncrono é o padrão: cada entrada é uma função que retorna uma importação dinâmica, e o Rollup gera um chunk separado por arquivo. Adicionar `{ eager: true }` embute todos os arquivos diretamente no módulo que importa, anulando exatamente a separação desejada:
+
+```ts
+// Todos os idiomas no chunk de entrada. Quase nunca o que você deseja:
+const catalogs = import.meta.glob("./locales/*.json", { eager: true });
+```
+
+A armadilha é que ambas as abordagens funcionam em desenvolvimento, pois o Vite serve módulos de forma avulsa sem empacotamento. A diferença só aparece no diretório `dist`. Faça o teste com `npx vite build && npx vite preview` e inspecione o que o chunk principal realmente carrega.
+
+## A divisão por rota raramente divide os catálogos
+
+Este é o comportamento que mais surpreende os desenvolvedores. Você organiza seus catálogos por tela:
+
+```
+locales/en/home.json
+locales/en/checkout.json
+```
+
+Em seguida, duas rotas diferentes importam `checkout.json`, e o Rollup eleva esse arquivo a um chunk compartilhado que é carregado em ambas as páginas. A divisão de chunks do Rollup é orientada pelo grafo de módulos e não pelos nomes das pastas: qualquer módulo acessível a partir de mais de um ponto de entrada torna-se compartilhado. Adicionar uma terceira rota não muda nada, e uma quarta pode reorganizar a separação de forma imprevista.
+
+Portanto, a divisão de idiomas por rota só se sustenta se o grafo de importação for estritamente disjunto. Se o tamanho do bundle for prioritário, meça com ferramentas em vez de fazer suposições:
+
+```bash
+npx vite build && npx vite-bundle-visualizer
+```
+
+Caso precise forçar os limites dos chunks, `build.rollupOptions.output.manualChunks` é a saída, ao custo de manutenção manual contínua.
+
+## Catálogos não recarregam com Hot Reload (HMR)
+
+Altere um componente e o Vite o atualiza instantaneamente. Altere `locales/fr.json` e, dependendo de como foi importado, nada acontece. O JSON importado dinamicamente não possui um limite de HMR nativo, de modo que o grafo de módulos não sabe como invalidar os consumidores.
+
+Muitos desenvolvedores contornam isso reiniciando o servidor de dev a cada alteração de texto, sem perceber que isso pode ser evitado. A solução compete ao plugin de i18n: ele precisa escutar a atualização de HMR e injetar as novas mensagens no app em execução. Ao avaliar uma biblioteca, verifique se o respectivo plugin do Vite contempla essa funcionalidade.
+
+## `define` fixa o idioma no código compilado
+
+É tentador definir o idioma padrão em tempo de build:
+
+```ts fileName="vite.config.ts"
+export default defineConfig({
+  define: {
+    __DEFAULT_LOCALE__: JSON.stringify(process.env.LOCALE ?? "en"),
+  },
+});
+```
+
+`define` executa uma substituição de texto literal durante a compilação. O valor injetado no build é o valor final entregue, forçando um build separado para cada idioma. Essa é uma estratégia válida, adotada por exemplo pela solução nativa de i18n do Angular, mas não é o que você quer se um único deploy precisa atender a todos os idiomas.
+
+Para valores que variam por requisição, mantenha-os fora do `define` e resolva-os em tempo de execução.
+
+## Movendo o parsing de mensagens para o tempo de compilação
+
+Qualquer solução madura neste ecossistema adota a mesma diretriz: parar de processar mensagens no navegador.
+
+| Plugin                       | O que move para o tempo de compilação                                  |
+| :--------------------------- | :--------------------------------------------------------------------- |
+| `@intlify/unplugin-vue-i18n` | Compila mensagens do vue-i18n em funções de render (bundle só runtime) |
+| Lingui (macro + plugin)      | Extrai e compila catálogos, substitui macros por IDs de mensagem       |
+| Paraglide (inlang)           | Compila cada mensagem em sua própria função tree-shakable              |
+| `vite-intlayer`              | Constrói dicionários por componente, purga e minifica campos sem uso   |
+
+O ganho é duplo: o compilador de mensagens em runtime deixa de ser enviado no bundle e as entradas não utilizadas podem ser eliminadas estaticamente. O custo correspondente é que tanto seu servidor local quanto a CI precisam executar o plugin, e comandos isolados como `tsc` ou executores de teste sem Vite exigirão ajustes de configuração.
+
+O vue-i18n é o exemplo mais nítido: sem o `@intlify/unplugin-vue-i18n`, você envia um compilador que chama `new Function`, gastando bytes à toa e abrindo brechas contra políticas de Content Security Policy (CSP).
+
+## SSR: nunca armazene o idioma no escopo de um módulo
+
+Se você utiliza SSR, seja por um framework ou via `vite-plugin-ssr`, a regra indispensável é esta: uma variável no nível do módulo guardando o idioma atual é compartilhada entre todas as requisições concorrentes daquele processo do servidor.
+
+```ts
+// Seguro no navegador. Um vazamento grave entre requisições no servidor:
+export let currentLocale = "en";
+```
+
+Dois usuários acessando o servidor ao mesmo tempo disputarão uma condição de corrida, e um deles receberá o idioma do outro. Isso não se manifesta em desenvolvimento porque você é o único usuário. Resolva o idioma por requisição e repasse-o explicitamente por contexto ou pelo armazenamento de requisição do seu framework.
+
+## O plugin Vite do Intlayer
+
+O Intlayer disponibiliza um único plugin que gerencia o build de dicionários, a observação de alterações em desenvolvimento e a esteira de otimização:
+
+```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()],
+});
+```
+
+A reescrita de importações, o purge e a minificação vêm ativados por padrão. Os dois parâmetros essenciais ficam no arquivo `intlayer.config.ts`:
+
+```ts fileName="intlayer.config.ts"
+import type { IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  build: {
+    purge: true, // descarta campos de conteúdo que nenhum componente utiliza
+    minify: true, // renomeia as chaves de conteúdo para apelidos curtos
+  },
+};
+
+export default config;
+```
+
+Como o conteúdo é declarado por componente em vez de concentrado em arquivos globais gigantes, o processo de purge atua sobre um grafo de dependências real, garantindo uma limpeza segura. O compromisso é o mencionado: o plugin passa a ser obrigatório em qualquer ambiente de compilação, incluindo CI e suítes de teste. Mais detalhes em [otimização de bundle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/bundle_optimization.md).
+
+## Erros comuns
+
+- **`{ eager: true }` em um glob que deveria ser assíncrono.** Funciona localmente, embute todos os idiomas em produção.
+- **Achar que a hierarquia de pastas define os chunks.** O Rollup respeita imports, não diretórios. Avalie o bundle real.
+- **Reiniciar o servidor de dev para ver uma tradução atualizada.** Sinal de ausência de handler de HMR.
+- **Colocar o idioma em `define`.** Obriga a gerar um build independente por idioma.
+- **Armazenar idioma no módulo com SSR.** Causa vazamento de dados entre usuários concorrentes.
+- **Testar métricas de performance no servidor de dev.** Módulos avulsos não refletem o comportamento do bundle final.
+
+## Para se aprofundar
+
+- [Otimização de bundle: purge, minificação e o que chega ao navegador](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/bundle_optimization.md)
+- [Relatórios de benchmark entre frameworks](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/benchmark/index.md)
+- [Referência de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md)
+- [Configurar Intlayer com Vite e React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_vite+react.md)
+- [Adaptador de compatibilidade i18next](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/compat/i18next.md)
+- [React i18n: como funciona o modelo de provedores](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/list_i18n_technologies/frameworks/react.md)
+- [Vue i18n: funcionamento e limitações](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/list_i18n_technologies/frameworks/vue.md)
+- [i18n por componente vs centralizada](https://github.com/aymericzip/intlayer/blob/main/docs/blog/pt/per-component_vs_centralized_i18n.md)

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

@@ -25,8 +25,6 @@ No mundo interconectado de hoje, oferecer seu site em várias línguas pode expa
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## O que é Internacionalização (i18n)?
 
 Internacionalização, frequentemente referida como i18n, é o processo de projetar e preparar sua aplicação para suportar múltiplas línguas e contextos culturais. No Angular, isso envolve configurar seu app para que textos, datas, números e até layouts de UI possam se adaptar perfeitamente a diferentes locais. Fazer essa preparação adequadamente garante que a integração de traduções futuras permaneça organizada e eficiente.

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

@@ -25,8 +25,6 @@ Em um mercado cada vez mais global, entregar seu app React Native em múltiplas
 
 ---
 
-![ilustração i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## O que é Internacionalização (i18n)?
 
 A internacionalização, ou i18n, envolve estruturar um aplicativo para que ele possa se adaptar facilmente a diferentes idiomas, formatos regionais e normas culturais. Em React Native, a i18n inclui o tratamento de strings para botões e rótulos, bem como a formatação de datas, horas, moedas e mais de acordo com o local do usuário. Aplicativos React Native devidamente preparados permitem que você integre facilmente idiomas adicionais e comportamentos específicos de local posteriormente, sem grandes refatorações.

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

@@ -25,8 +25,6 @@ No cenário digital de hoje, expandir o alcance do seu site para atender a um p
 
 ---
 
-![ilustração de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## O que é Internacionalização (i18n)?
 
 Internacionalização, abreviada como i18n, é o processo de projetar e preparar seu site para suportar múltiplas línguas e contextos culturais. No React, isso significa configurar seu aplicativo de forma que cadeias de texto, formatos de data, formatos de números e até mesmo o layout possam ser adaptados facilmente para usuários de diferentes regiões. Preparar seu aplicativo React para i18n estabelece as bases para integrar traduções e outros recursos de localização de maneira limpa.

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

@@ -25,8 +25,6 @@ author: aymericzip
 
 ---
 
-![i18n illustration](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## O que é Internacionalização (i18n)?
 
 Internacionalização, comumente abreviada como i18n, é o processo de projetar e construir sua aplicação para que possa se adaptar facilmente a várias línguas, regiões e convenções culturais. Em Svelte, isso normalmente significa configurar strings de tradução, localizando datas, horários e números, e garantindo que a interface do usuário possa alternar dinamicamente entre diferentes locais sem grandes reescritas de código.

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

@@ -25,8 +25,6 @@ Em um cenário digital cada vez mais globalizado, expandir o alcance do seu site
 
 ---
 
-![ilustração i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## O Que é Internacionalização (i18n)?
 
 Internacionalização (i18n) é a prática de preparar uma aplicação de software (ou site) para múltiplos idiomas e convenções culturais. Dentro do ecossistema Vue.js, isso inclui estabelecer como texto, datas, números, moeda e outros elementos localizáveis podem ser adaptados a vários locais. Ao configurar o i18n desde o início, você garante uma estrutura organizada e escalável para adicionar novos idiomas e lidar com necessidades de localização futuras.

package/blog/pt/what_is_internationalization.md

@@ -20,8 +20,6 @@ author: aymericzip
 
 # O que é Internacionalização (i18n)? Definição e desafios
 
-![ilustração de i18n](https://github.com/aymericzip/intlayer/blob/main/docs/assets/i18n.webp)
-
 ## Entendendo a Internacionalização (i18n)
 
 **Internacionalização**, frequentemente abreviada como **i18n**, é o processo de projetar e preparar uma aplicação para suportar múltiplos idiomas, culturas e convenções regionais **sem** mudanças maiores na base de código. O nome i18n é derivado do fato de que há 18 letras entre o **i** e o **n** na palavra “internacionalização”.