Otimizando o Tamanho e a Performance do Bundle i18n

Um dos desafios mais comuns em soluções tradicionais de i18n focadas em uso de arquivos JSON está em gerenciar de modo hábil o tamanho do conteúdo. Caso os desenvolvedores não separem o conteúdo de forma fragmentada, será corriqueiro que os usuários acabem sofrendo impactos de tempo em prol de baixar todo e qualquer vestígio traducional e global em cada visita a página mesmo quando for necessário ler só uma única variante.

Por exemplo, um aplicativo com 10 páginas traduzido a título de abranger 10 línguas traria uma consequência ao usuário final onde desnecessariamente lidaria com os conteúdos base de mais de 100 páginas, quando a real métrica seriam apenas os dados de uma única rota em uso real. Como reflexo final ocorre muito estorno e sobrecarregamento na sua rede causando demora na carga global de dados.

A lógica de Intlayer supera essa adversidade empregando fatores como a otimização de execução de compilação (build-time optimization). É um cenário que abrange de frente análises na arquitetura nativa com intenção em entender puramente quais dicionários acabam compondo partes exclusivas relativas a cada componente sem sobrecarregar toda sua base com dicionários sem efetividade imediata.

Índice

Faça uma varredura sobre seu bundle

Aprofundar nos bastidores das métricas que moldam o próprio bundle fará com que consiga achar focos cruciais em JSON's não compactos e traçar melhor um planejamento adequado voltado ao code-splitting apropriado do escopo. Tais suportes em formato de ferramentas operam sobre o núcleo dos módulos construindo treemaps visuais do formato final indicando as proporções globais perante a base gerada na biblioteca de destino.

npm install -D rollup-plugin-visualizer

import { defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [
    visualizer({
      open: true, // Responsável por inicializar e expandir de modo dinâmico no navegador
      filename: "stats.html",
      gzipSize: true,
      brotliSize: true,
    }),
  ],
});

npx next experimental-analyze

npm install -D @next/bundle-analyzer

const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // Implementação livre associada ao Next.js em prol de estender métricas construtivas...
});

ANALYZE=true npm run build

npm install -D webpack-bundle-analyzer

import { BundleAnalyzerPlugin } from "webpack-bundle-analyzer";

export default {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: "static",
      reportFilename: "bundle-analyzer.html",
      openAnalyzer: false,
    }),
  ],
};

Como a Base Opera

As vertentes baseadas perante os módulos dinâmicos referenciados com apoio do uso contínuo preterido pautam perante implementações focadas nos propósitos componentes e pontuais. Em relação aos panoramas convencionais (globais) seu esquema se propaga mediante definições internas sem vazamento entre funções distintas. Toda compilação associada sob as etapas interage num procedimento naturalizado em construtos:

1. Foca-se em Analisar suas diretrizes atrelando suas passagens por conta da estrutura orientada da useIntlayer.
2. Trata sobre como ele Constrói referenciando de fato o corpo interativo gerado aos perfis do escopo.
3. Propaga em fator base na intenção voltada a Substituir a premissa declarada da base da função useIntlayer engajando assim otimizações construtivas perante o foco atrelado a sua própria implementação.

Sob este alinhamento as propostas adquirem a certeza de:

• Retirar por definitivo e excluir os conteúdos irrelevantes do núcleo que acabam integrando os "dead codes" das rotas componentes.
• Estabelecer foco atrelado e inerente em propor a ativação lazy com os módulos adjacentes do bloco e dos trechos lazy dos componentes e partes.

O Que Referencia Em Respeito A Plugins

As vertentes pautadas do ecossistema otimizado base pelo Intlayer consistem num emaranhado formatado e distinto fragmentados entre pequenos ecossistemas. A intenção dessa arquitetura isolada propõe combater as propagações acidentais perante o setup base para com configurações irregulares em caso de desconhecimento perante o foco exato em uso e o objetivo da sua essência construtiva isolada.

Plugins Integrados Para Com Babel (@intlayer/babel)

Este ramo abrange puramente escopos direcionados e voltados ao processo em setups no núcleo interno de implementações em formato Webpack operando com arquivos predefinidos nas bases (como é o caso natural do Babel associado de base, Webpack modular customizado em sua integridade nativa do CRA entre outros propósitos da extensão babel.config.js ).

A tabela abaixo os lista na ordem de pipeline exigida (a mesma ordem em que devem aparecer no babel.config.js):

Cuidado Atrelado Com A Ordem Da Execução Preestabelecida Do Arquivo Principal: O esquema atrelado com os focos das bases de expurgo (purge) e premissas curtas em definições (minify) tendem inevitavelmente estarem e persistirem em um nível que antecede de antemão e antes que se executem e apliquem o método referencial em otimização (optimize) na base primária do arquivo nativo babel.config.js. Se o optimize operar logo em instâncias prematuras o registro das senhas chave tendem a se omitir não proporcionando suporte base o bastante nas partes do escopo e apagando registros nativos sobre premissas das matrizes JSON que deverão ser mapeadas na função da execução seguinte.

Tais modelos adquirem opções e propósitos associados com integrações perante helpers nativos pautando perante leitura formatada para leitura de parâmetros interligados no esquema base inicial do intlayer.config.ts:

O Setup Por Trás De Vite (vite-intlayer)

O usuário da base focada na plataforma gerada do esquema no Vite não fará manipulações com tais recursos predefinindo os passos com métodos e formatações exaustivas e diretas visto não ser preciso em seu formato automatizado que interage mediante execuções da diretiva e formato focado withIntlayer() dentro de sua predefinição ligada ao módulo e base em vite.config.ts. Extensões relativas aos recursos build.purge ou da implementação em esquema e base em build.minify operam dentro de referências ligadas com suporte atrelado do intlayer.config.ts.

Plugin SWC (@intlayer/swc)

Os usuários do Next.js também nunca configuram isto diretamente. Desde a v9.2.1, o withIntlayer() no next.config.ts executa todo o pipeline — purge, minificação e reescrita de imports — apenas a partir das flags build.purge e build.minify.

O trabalho é dividido em dois, porque um plugin Wasm do SWC transforma um arquivo por vez e não tem acesso ao sistema de arquivos:

Decidir quais campos não são usados e qual alias cada um recebe exige estado entre arquivos e E/S de arquivos, então essa metade roda no Node; o plugin SWC recebe apenas as tabelas resultantes.

Etapas Em Modos Variados (Plataformas)

npm install -D @intlayer/swc

[dependencies]
intlayer-swc-plugin = "*"

import { withIntlayer } from "next-intlayer/server";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {/* sua configuração */};

export default withIntlayer(nextConfig);

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  build: {
    purge: true, // remove campos de conteúdo não usados do JSON empacotado
    minify: true, // renomeia as chaves dos campos para aliases curtos
  },
};

export default config;

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  build: {
    purge: true, // propõe remover diretivas nativas descartadas em bundles nativos formatados
    minify: true, // preza perante conversão com premissa ao construtor limitando suas extensões relativas ao longo de renomes modulares nativos na sua vertente final nativa
  },
};

export default config;

npm install -D @intlayer/babel

const {
  intlayerExtractBabelPlugin,
  intlayerPurgeBabelPlugin,
  intlayerMinifyBabelPlugin,
  intlayerOptimizeBabelPlugin,
  getExtractPluginOptions,
  getPurgePluginOptions,
  getMinifyPluginOptions,
  getOptimizePluginOptions,
} = require("@intlayer/babel");

module.exports = {
  plugins: [
    // Base de Integração Constante com Foco Extrativo `.content.ts` na proporção nativa focada e limitada de suporte na premissa `.intlayer/**/*.json`
    [intlayerExtractBabelPlugin, getExtractPluginOptions()],

    // Diretiva em Expurgos: Foca exclusões nativas limitando sua proporção sem bases ".intlayer/**/*.json"
    //    (Foca no uso dos registros e sinalizadores construtivos na sua estrutura matriz e referências integradas e base nas definições dos parâmetros e focos build.purge integradas atrelados na proporção base e do construtor relativo em intlayer.config.ts)
    [intlayerPurgeBabelPlugin, getPurgePluginOptions()],

    // Minificação de Chaves Relacionadas Nos Escritos Base Formato JSON
    //    (Processos pautando os dados do sinalizador preteridos atrelados focado no uso base build.minify perante intlayer.config.ts)
    [intlayerMinifyBabelPlugin, getMinifyPluginOptions()],

    // Fator em Otimizações referenciadas ligadas perante as propagações formatadas perante reestruturações em base associada das ligações em referências `useIntlayer('key')` para abranger a otimizada base `useDictionary(hash)` gerindo referências
    [intlayerOptimizeBabelPlugin, getOptimizePluginOptions()],
  ],
};

Sobre as Bases (Configuration)

Fica com bases focadas aos seus usos e restrições integrando na propriedade de construção (build):

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.PORTUGUESE],
    defaultLocale: Locales.ENGLISH,
  },
  dictionary: {
    importMode: "dynamic",
  },
  build: {
    // Altera construtos relacionados atrelados com `useIntlayer()` em propostas ligadas de direções no formato base atrelado nos procedimentos preestabelecidos do construto das proporções na build time de otimizações de uso do escopo com proporções.  undefined = modo associado da produção natural formatado sem intervenção, true = de base padrão irrestrita, false = descontinuação base com limites nativos associados.
    optimize: undefined,

    // Proporciona redução no cenário das definições matriz limitando por base nomenclaturas limitadas com letras focando propósitos limitados associados na compactação da extensão base de renome. Redução de JSON base requer optimize integrado relativo ao construto.
    minify: true,

    // Modificação construtiva limitando focos do núcleo preestabelecido atrelados e referenciados por chamados não executados de extensões ao longo da execução da varredura modular em códigos.
    purge: true,
  },
};

export default config;

Com propósito associativo do foco natural do optimize o seu cenário primário atrelado do suporte em predefinição padrão sem interferências na base definida focado no formato matriz (undefined) acaba tendendo ao escopo das soluções sem restrições base sendo mantido naturalmente pautado com diretivas nas maiorias focado nos parâmetros preestabelecidos com parâmetros focados atrelados nos direcionamentos dos construtos das partes matriz do seu suporte atrelado de cenários associativos de foco natural.

Consulte a extensão associada perante premissas relacionadas às formatações nas configurações em Configurações

Os Fatores Sobre Integrações E Opções

Redução Modular Atrelada Nas Extensões (Minificação De Estruturas Relacionadas)

Esse escopo na minificação construtiva focada a definições do método no build.minify trabalha de maneira com base na otimização que em relação em sua limitação se propagará somente num nível restrito focado a definições JSON base focando sem parâmetros e focado nas exclusões limitando renomes com propósitos na minificação e substituição limitada. Seu bundler é inteiramente nativo e o fator não tem poder transformativo com base externa das exclusões JavaScript base.

// O processo originário pautado em chaves atreladas e definições JSON antes das minificações.
{ "title": "Olá", "subtitle": "Mundo" }

// Após
{ "a": "Olá", "b": "Mundo" }

A diretiva em premissas transcreve a natureza voltando do escopo para ser lida num processo originário limitante nas acessibilidades pautando as referências nas chaves atreladas de propósitos no escopo JSON. A sua extensão no content.title passa o chamado final em content.a.

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  build: {
    minify: true,
  },
};

export default config;

A minificação é ignorada quando optimize é false. Quando editor.enabled é true, ela continua sendo executada, mas sem a etapa de renomeação de campos — o editor visual resolve as edições por meio do keyPath, portanto os nomes de campo originais precisam ser preservados.

No Next.js, a minificação também é ignorada quando o @intlayer/swc não está instalado ou não pode ser carregado (Next.js abaixo da 16.1.0). O plugin é a metade que reescreve os acessos no código-fonte, então renomear os dicionários sem ele deixaria seu código lendo nomes de campos que não existem mais.

Dicionários perante processos focados base do tipo no fetch (sob escopo formatado da extensão da variável no método importMode: 'fetch') não são minificados a título em evitar problemas focados na sua essência nativa.

Foco Modular Constante Relativo Em Extensões (Exclusões Focadas)

Analise e determine campos associativos perante varredura focado atrelando o fator das exclusões JSON das extensões no método base build.purge.

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  build: {
    purge: true,
  },
};

export default config;

Como Processar E Exemplificar O Uso Base Das Predefinições E Fatores Modulares No Escopo Do JSON Com Suporte Voltado Em Definições: Em proporções preestabelecidas formatadas na varredura construtiva e voltada base num escopo atrelado perante 5 diretivas no propósito associado atrelando o fator JSON e formato em 2 suportes práticos focados base.

// Original do processo
{ "title": "…", "subtitle": "…", "cta": "…", "footer": "…", "badge": "…" }

// Suporte Purgado Formatado Após Procedimentos Com Bases Interativas Focando Limitações Práticas Referenciadas Pautando Propósitos
{ "title": "…", "subtitle": "…" }

A purga é ignorada quando optimize é false. Ela permanece ativa quando editor.enabled é true — um campo removido não é lido por nenhum componente, então o editor nunca o renderiza. No Next.js, ela também é ignorada quando @intlayer/swc está indisponível e quando há chamadores de adaptadores de compatibilidade configurados.

Processos perante o uso na purificação também são suspensos perante focos no método nativo que limitam análises do suporte da base com dados referenciados da função de predefinições e diretrizes voltadas atrelando propósitos de extensão.

Parâmetros Analisados Perante Formatos Relacionados Atrelando Extensões Relacionando Configurações Perante Extensões No Escopo Voltado Em Dinâmicas E Estáticas Formatadas (ImportMode)

A título focando de fato limitações atreladas nos propósitos com dados formatados e limitados focado e voltado na expansão modular com propósitos nativos atrelados com premissas em importMode.

Opções em Extensões Constantes Focadas

O método suporta limitação atrelando formato da construção intlayer.config.ts.

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  dictionary: {
    importMode: "dynamic", // Formata opções em extensões da diretiva nativa estática (static)
  },
};

export default config;

Em Parâmetros

Você formata no método e diretriz focando premissas nativas e extensivas nos parâmetros do arquivo da sua função com focos em .content.{{ts|tsx|js|jsx|mjs|cjs|json|jsonc|json5|md|mdx|yaml|yml}}.

import { type Dictionary, t } from "intlayer";

const appContent: Dictionary = {
  key: "app",
  importMode: "dynamic", // Opção relativa e diretiva nas formatações
  content: {
    // ...
  },
};

export default appContent;

O importMode atua perante cenários atrelados e dinâmicas nos dados formatados nas funções atrelando propósitos.

1. Formatos Limitados E Modos Modulares Das Funções Básicas E Naturais (default)

As implementações formatadas nativamente atuam no formato com proporções substituindo e limitando a varredura atrelando proporções de construto do formato useIntlayer em vias de focos atrelados nativos perante o useDictionary.

• Suporte Em Referências E Otimizações Preestabelecidas Base No Pro: Formatação sem propósitos de carga extra atrelando sincronização.
• Formatações Opostas (Cons): Sem limitações e minificações. Transcrição sem limitação por conta associada a todo o pacote em cada língua referenciando dados formatados.
• Suporte Ideal Em Modos Modulares Associativos Das Funções Básicas E Naturais Nas Diretivas Voltadas (SPAs): Foco.

Extensão do Formato Relacionado Associativo E Voltado Com Modelos:

// Seu arquivo com proporções formatadas e constantes focado num panorama atrelado
const content = useIntlayer("my-key");

// A ilustração perante otimizações da constante
const content = useDictionary({
  key: "my-key",
  content: {
    nodeType: "translation",
    translation: {
      en: "My title",
      pt: "Meu titulo",
    },
  },
});

2. O Método Em Foco Constante Associativo Em Otimizações Modulares Perante Formato Focado Nas Diretivas Nas Propagações Perante Diretórios Focados Relacionando Extensões Formatos No Escopo Dinâmico

O modo adota a exclusão da implementação do tipo de useIntlayer com vias no tipo e focado nativamente na função useDictionaryAsync em modos integrados num cenário no limitante import().

• Pro (Limitações Atreladas Nos Propósitos Com Focos Nas Diretivas Voltadas E Formatações Base Na Árvore de Otimizações Locais): Isolamento na importação. Os idiomas são exclusivos nas cargas atrelando propostas integradas nativas.
• Cons: Triggers limitantes no carregamento atrelado a propósitos de assets.
• Formatos: Bases e blocos robustos focados nos panoramas base.

Modelos:

// Arquivos Formatos Associativos E Constantes Com Referências Focando Propósitos
const content = useIntlayer("my-key");

// O Panorama Atrelado Em Processos
const content = useDictionaryAsync({
  en: () =>
    import(".intlayer/dynamic_dictionary/my-key/en.json").then(
      (mod) => mod.default
    ),
  pt: () =>
    import(".intlayer/dynamic_dictionary/my-key/pt.json").then(
      (mod) => mod.default
    ),
});

As rotas do pacote e as análises em referências que abrangem propósitos na via limitando as diretivas com suporte em execuções de rede useIntlayer focado e voltado ao método da função integrada perante premissas nas definições relativas em extensões base no arquivo .content propõe um limite evitando sobrecargas de redes nas requisições. O suporte focado num dicionário é associativo e integrado focando nas restrições preteridas.

3. Fator Fetch Focando No Uso De Bases Atreladas Com Formatos E Predefinições Voltados Na Formatação De Redes Em Escopos Remotos Atrelando Processos Relacionados

Preestabelece no carregamento focado no escopo e limitações em execuções de construtos remotos focando diretivas API e Intlayer Live Sync.

Base:

// O construto
const content = useIntlayer("my-key");

// O panorama
const content = useDictionaryAsync({
  en: () =>
    fetch("https://intlayer.my-domain.com/dictionary/my-key/en").then((res) =>
      res.json()
    ),
  pt: () =>
    fetch("https://intlayer.my-domain.com/dictionary/my-key/pt").then((res) =>
      res.json()
    ),
});

Consulte premissas: CMS

Bases purificadas e otimizadas false nas diretivas construtos atrelando no false nas exclusões JSON e minificadas base na formatação focado no formato com exclusões limitadas num ecossistema remoto focado em API nativa da estrutura matriz de dados referenciados.

Panorama Das Bases Atreladas Focadas Na Formatação Modular Com Propósitos De Extensões Nas Propagações Dos Arquivos Base (Estáticos VS Dinâmicos)