Análise de Tamanho do Bundle

Q: react-native-bundle-visualizer vs source-map-explorer?

Ambos mapeiam bytes para módulos. react-native-bundle-visualizer é otimizado para saída Metro do RN - comece por aí. Use source-map-explorer se você já tiver ferramentas web em CI.

Q: O gzip do Hermes corresponde aos bytes brutos do bundle?

CI frequentemente faz o gate do tamanho bruto ou gzip - escolha um e documente-o. Gzip ≈ 30–40% do bruto para bundles típicos de RN; alinhe com sua definição de orçamento de 4 MB.

Q: O import dinâmico() pode dividir qualquer dependência?

Metro suporta import() para chunks assíncronos. Módulos nativos ainda são autolinkados no tempo de compilação - remover o import JS não remove o código nativo a menos que você desinstale o pacote.

Q: Como as fontes afetam o tamanho?

Arquivos .ttf empacotados vão para os assets. Subset de fontes de ícones e carregue fontes de exibição após o splash quando possível - Otimização do Tempo de Inicialização.

Visualizador de bundle Metro e divisão de rotas lazy - descubra o que é enviado no bundle principal do Hermes e adie telas pesadas para depois do cold start.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

1. Gere o bundle de produção + source map

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file node_modules/expo-router/entry.js \
  --bundle-output ./.perf/index.android.bundle \
  --sourcemap-output ./.perf/index.android.bundle.map \
  --assets-dest ./.perf/assets

2. Abra o treemap

npx react-native-bundle-visualizer \
  --bundle ./.perf/index.android.bundle \
  --sourcemap ./.perf/index.android.bundle.map

3. Triagem dos principais infratores

Bloco do Treemap	Correção Comum
`moment` / `date-fns/locale/*`	`dayjs` ou imports mais específicos
`lodash` completo	`lodash/es/map` ou helpers nativos
Conjunto completo de `@expo/vector-icons`	Importação por família ou fonte subset
SDKs de `charting` / `maps` / `editor`	Rota lazy + `import()` dinâmico
Cópias duplicadas de `react` / aninhadas	Alinhe `metro.config.js` do monorepo

4. Carregamento lazy de telas pesadas do Expo Router

// app/(tabs)/analytics.tsx - tela de aba lazy
import { Suspense, lazy } from "react";
import { ActivityIndicator, View } from "react-native";
 
const AnalyticsScreen = lazy(() => import("../../src/screens/AnalyticsScreen"));
 
export default function AnalyticsRoute() {
  return (
    <Suspense
      fallback={
        <View style={{ flex: 1, justifyContent: "center" }}>
          <ActivityIndicator />
        </View>
      }
    >
      <AnalyticsScreen />
    </Suspense>
  );
}

5. Gate de tamanho em CI (esboço)

#!/usr/bin/env bash
# scripts/check-bundle-size.sh
BUNDLE="./.perf/index.android.bundle"
MAX_BYTES=4500000  # ~4.3 MB raw - ajuste ao seu orçamento de gzip
 
SIZE=$(wc -c < "$BUNDLE")
if [ "$SIZE" -gt "$MAX_BYTES" ]; then
  echo "Bundle $SIZE excede $MAX_BYTES"
  exit 1
fi

Quando usar isso:

TTI regrediu após adicionar uma dependência.
O tamanho do download da atualização OTA aumentou.
PR adiciona import de um SDK pesado no caminho do layout raiz.
Você precisa de evidências para uma exceção de ADR às Regras de Orçamento de Performance.

Exemplo de Trabalho

Audite um import raiz inchado, divida uma tela pesada e verifique se o bloco do treemap se move para fora do caminho principal.

// app/_layout.tsx - mantenha a raiz enxuta
import { Stack } from "expo-router";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "../src/lib/queryClient";
 
export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack screenOptions={{ headerShown: false }} />
    </QueryClientProvider>
  );
}

// app/settings/reports.tsx - tela pesada NÃO no caminho de TTI
import { Suspense, lazy } from "react";
import { ActivityIndicator, StyleSheet, View } from "react-native";
 
const ReportsScreen = lazy(() =>
  import("../../src/screens/ReportsScreen").then((m) => ({ default: m.ReportsScreen })),
);
 
export default function ReportsRoute() {
  return (
    <Suspense fallback={<View style={styles.fallback}><ActivityIndicator /></View>}>
      <ReportsScreen />
    </Suspense>
  );
}
 
const styles = StyleSheet.create({
  fallback: { flex: 1, alignItems: "center", justifyContent: "center" },
});

// src/screens/ReportsScreen.tsx - dependências pesadas isoladas em chunk lazy
import { StyleSheet, Text, View } from "react-native";
// Exemplo de dep pesada - só carrega quando o usuário abre Relatórios
import { VictoryPie } from "victory-native";
 
export function ReportsScreen() {
  const data = [
    { x: "A", y: 35 },
    { x: "B", y: 25 },
    { x: "C", y: 40 },
  ];
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Relatórios</Text>
      <VictoryPie data={data} width={280} height={280} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, alignItems: "center" },
  title: { fontSize: 20, fontWeight: "700", marginBottom: 16 },
});

Checklist de verificação

Execute o visualizador antes da divisão lazy - anote a área victory-native (ou seu SDK) no bundle principal.
Mova a tela para trás de lazy() - re-bundle; o bloco pesado encolhe no treemap principal.
Confirme se o caminho TTI da aba inicial não importa o módulo pesado transitivamente através de barrels.
Registre os bytes do bundle principal no ticket de release - link para a tabela de proprietários do orçamento.

Higiene de Importação

Prefira pontos de entrada específicos

// RUIM - carrega a biblioteca inteira
import _ from "lodash";
import * as Icons from "@expo/vector-icons";
 
// MELHOR
import debounce from "lodash/debounce";
import Ionicons from "@expo/vector-icons/Ionicons";

Audite barrels

// packages/ui/src/index.ts - reexporta tudo
export * from "./charts"; // ← arrasta charts para qualquer import `from "@acme/ui"`
 
// MELHOR - subpaths explícitos em exports do package.json
// import { Button } from "@acme/ui/button";

Resolução de monorepo Metro

Pacotes compartilhados em monorepos duplicam dependências facilmente - alinhe watchFolders e resolver em metro.config.js. Veja Pacotes Compartilhados e Resolução Metro.

Notas de Carregamento Lazy do Expo Router

Padrão	Impacto no TTI
Módulo de tela `lazy()`	Chunk carrega na primeira navegação - bom para configurações/relatórios
Aba `lazy: true` (padrão)	Adia a montagem inicial até o foco da aba - bom para cold start
`Link prefetch`	Carrega o chunk cedo - use apenas para a próxima tela provável
Imports da raiz `_layout`	Sempre no caminho crítico - mantenha o mínimo

// Pré-carrega rota de detalhes pesada quando o usuário passa o mouse sobre o card - trade-off opcional
import { Link } from "expo-router";
 
<Link href="/reports" prefetch>
  Abrir relatórios
</Link>

Escopo: O que Conta para o Orçamento

Por Regras de Orçamento de Performance:

Bundle principal do Hermes na primeira abertura
Chunks lazy carregados antes da interatividade primária (prefetch acidentalmente antecipado)
Tamanho do artefato OTA - gate separado, mesma ferramenta de análise

Assets (imagens, fontes) são separados, mas afetam o download - mídia empacotada pelo expo-asset aparece na saída da exportação.

Armadilhas

Analisando bundles de desenvolvimento - dev: true inclui ferramentas de desenvolvimento; sempre use --dev false.
Expo Go - não é o seu grafo de bundle; exporte a partir da entrada do seu aplicativo.
Lazy sem Suspense - React 19 ainda precisa de um limite para rotas lazy().
Imports transitivos através de hooks - um hook importado no layout raiz puxa sua árvore de dependências para o principal.

FAQs

react-native-bundle-visualizer vs source-map-explorer?

Ambos mapeiam bytes para módulos. react-native-bundle-visualizer é otimizado para saída Metro do RN - comece por aí. Use source-map-explorer se você já tiver ferramentas web em CI.

O gzip do Hermes corresponde aos bytes brutos do bundle?

CI frequentemente faz o gate do tamanho bruto ou gzip - escolha um e documente-o. Gzip ≈ 30–40% do bruto para bundles típicos de RN; alinhe com sua definição de orçamento de 4 MB.

O import dinâmico() pode dividir qualquer dependência?

Metro suporta import() para chunks assíncronos. Módulos nativos ainda são autolinkados no tempo de compilação - remover o import JS não remove o código nativo a menos que você desinstale o pacote.

DevDependencies afetam o tamanho do bundle?

Não - apenas imports alcançáveis da entrada de produção contam. Eles ainda afetam o tempo de instalação e CI - veja Código Morto e Análise de Dependência.

Como as fontes afetam o tamanho?

Arquivos .ttf empacotados vão para os assets. Subset de fontes de ícones e carregue fontes de exibição após o splash quando possível - Otimização do Tempo de Inicialização.

O bundle encolheu, mas o TTI não mudou - por quê?

TTI inclui inicialização nativa, carregamento de bytecode e trabalho da primeira tela - não apenas bytes JS. Perfis holísticos com Noções Básicas de Performance.

Relacionados

Otimização do Tempo de Inicialização - carregamento de bytecode e adiamento após a divisão
Noções Básicas de Performance - tamanho do bundle como uma entrada para TTI
Regras de Orçamento de Performance - limites de CI e proprietários
Grupos de Rotas e Organização do app - limites lazy de estrutura
Abas e Gavetas - montagem lazy de abas
Código Morto e Análise de Dependência - pacotes não utilizados vs. inchaço do bundle

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

1. Gere o bundle de produção + source map

npx react-native bundle \
  --platform android \
  --dev false \
  --entry-file node_modules/expo-router/entry.js \
  --bundle-output ./.perf/index.android.bundle \
  --sourcemap-output ./.perf/index.android.bundle.map \
  --assets-dest ./.perf/assets

2. Abra o treemap

npx react-native-bundle-visualizer \
  --bundle ./.perf/index.android.bundle \
  --sourcemap ./.perf/index.android.bundle.map

3. Triagem dos principais infratores

Bloco do Treemap	Correção Comum
`moment` / `date-fns/locale/*`	`dayjs` ou imports mais específicos
`lodash` completo	`lodash/es/map` ou helpers nativos
Conjunto completo de `@expo/vector-icons`	Importação por família ou fonte subset
SDKs de `charting` / `maps` / `editor`	Rota lazy + `import()` dinâmico
Cópias duplicadas de `react` / aninhadas	Alinhe `metro.config.js` do monorepo

4. Carregamento lazy de telas pesadas do Expo Router

// app/(tabs)/analytics.tsx - tela de aba lazy
import { Suspense, lazy } from "react";
import { ActivityIndicator, View } from "react-native";
 
const AnalyticsScreen = lazy(() => import("../../src/screens/AnalyticsScreen"));
 
export default function AnalyticsRoute() {
  return (
    <Suspense
      fallback={
        <View style={{ flex: 1, justifyContent: "center" }}>
          <ActivityIndicator />
        </View>
      }
    >
      <AnalyticsScreen />
    </Suspense>
  );
}

5. Gate de tamanho em CI (esboço)

#!/usr/bin/env bash
# scripts/check-bundle-size.sh
BUNDLE="./.perf/index.android.bundle"
MAX_BYTES=4500000  # ~4.3 MB raw - ajuste ao seu orçamento de gzip
 
SIZE=$(wc -c < "$BUNDLE")
if [ "$SIZE" -gt "$MAX_BYTES" ]; then
  echo "Bundle $SIZE excede $MAX_BYTES"
  exit 1
fi

Quando usar isso:

TTI regrediu após adicionar uma dependência.
O tamanho do download da atualização OTA aumentou.
PR adiciona import de um SDK pesado no caminho do layout raiz.
Você precisa de evidências para uma exceção de ADR às Regras de Orçamento de Performance.

Exemplo de Trabalho

Audite um import raiz inchado, divida uma tela pesada e verifique se o bloco do treemap se move para fora do caminho principal.

// app/_layout.tsx - mantenha a raiz enxuta
import { Stack } from "expo-router";
import { QueryClientProvider } from "@tanstack/react-query";
import { queryClient } from "../src/lib/queryClient";
 
export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <Stack screenOptions={{ headerShown: false }} />
    </QueryClientProvider>
  );
}

// app/settings/reports.tsx - tela pesada NÃO no caminho de TTI
import { Suspense, lazy } from "react";
import { ActivityIndicator, StyleSheet, View } from "react-native";
 
const ReportsScreen = lazy(() =>
  import("../../src/screens/ReportsScreen").then((m) => ({ default: m.ReportsScreen })),
);
 
export default function ReportsRoute() {
  return (
    <Suspense fallback={<View style={styles.fallback}><ActivityIndicator /></View>}>
      <ReportsScreen />
    </Suspense>
  );
}
 
const styles = StyleSheet.create({
  fallback: { flex: 1, alignItems: "center", justifyContent: "center" },
});

// src/screens/ReportsScreen.tsx - dependências pesadas isoladas em chunk lazy
import { StyleSheet, Text, View } from "react-native";
// Exemplo de dep pesada - só carrega quando o usuário abre Relatórios
import { VictoryPie } from "victory-native";
 
export function ReportsScreen() {
  const data = [
    { x: "A", y: 35 },
    { x: "B", y: 25 },
    { x: "C", y: 40 },
  ];
 
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Relatórios</Text>
      <VictoryPie data={data} width={280} height={280} />
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, alignItems: "center" },
  title: { fontSize: 20, fontWeight: "700", marginBottom: 16 },
});

Checklist de verificação

Execute o visualizador antes da divisão lazy - anote a área victory-native (ou seu SDK) no bundle principal.
Mova a tela para trás de lazy() - re-bundle; o bloco pesado encolhe no treemap principal.
Confirme se o caminho TTI da aba inicial não importa o módulo pesado transitivamente através de barrels.
Registre os bytes do bundle principal no ticket de release - link para a tabela de proprietários do orçamento.

Higiene de Importação

Prefira pontos de entrada específicos

// RUIM - carrega a biblioteca inteira
import _ from "lodash";
import * as Icons from "@expo/vector-icons";
 
// MELHOR
import debounce from "lodash/debounce";
import Ionicons from "@expo/vector-icons/Ionicons";

Audite barrels

// packages/ui/src/index.ts - reexporta tudo
export * from "./charts"; // ← arrasta charts para qualquer import `from "@acme/ui"`
 
// MELHOR - subpaths explícitos em exports do package.json
// import { Button } from "@acme/ui/button";

Resolução de monorepo Metro

Pacotes compartilhados em monorepos duplicam dependências facilmente - alinhe watchFolders e resolver em metro.config.js. Veja Pacotes Compartilhados e Resolução Metro.

Notas de Carregamento Lazy do Expo Router

Padrão	Impacto no TTI
Módulo de tela `lazy()`	Chunk carrega na primeira navegação - bom para configurações/relatórios
Aba `lazy: true` (padrão)	Adia a montagem inicial até o foco da aba - bom para cold start
`Link prefetch`	Carrega o chunk cedo - use apenas para a próxima tela provável
Imports da raiz `_layout`	Sempre no caminho crítico - mantenha o mínimo

// Pré-carrega rota de detalhes pesada quando o usuário passa o mouse sobre o card - trade-off opcional
import { Link } from "expo-router";
 
<Link href="/reports" prefetch>
  Abrir relatórios
</Link>

Escopo: O que Conta para o Orçamento

Por Regras de Orçamento de Performance:

Bundle principal do Hermes na primeira abertura
Chunks lazy carregados antes da interatividade primária (prefetch acidentalmente antecipado)
Tamanho do artefato OTA - gate separado, mesma ferramenta de análise

Assets (imagens, fontes) são separados, mas afetam o download - mídia empacotada pelo expo-asset aparece na saída da exportação.

Armadilhas

Analisando bundles de desenvolvimento - dev: true inclui ferramentas de desenvolvimento; sempre use --dev false.
Expo Go - não é o seu grafo de bundle; exporte a partir da entrada do seu aplicativo.
Lazy sem Suspense - React 19 ainda precisa de um limite para rotas lazy().
Imports transitivos através de hooks - um hook importado no layout raiz puxa sua árvore de dependências para o principal.

FAQs

react-native-bundle-visualizer vs source-map-explorer?

Ambos mapeiam bytes para módulos. react-native-bundle-visualizer é otimizado para saída Metro do RN - comece por aí. Use source-map-explorer se você já tiver ferramentas web em CI.

O gzip do Hermes corresponde aos bytes brutos do bundle?

CI frequentemente faz o gate do tamanho bruto ou gzip - escolha um e documente-o. Gzip ≈ 30–40% do bruto para bundles típicos de RN; alinhe com sua definição de orçamento de 4 MB.

O import dinâmico() pode dividir qualquer dependência?

DevDependencies afetam o tamanho do bundle?

Não - apenas imports alcançáveis da entrada de produção contam. Eles ainda afetam o tempo de instalação e CI - veja Código Morto e Análise de Dependência.

Como as fontes afetam o tamanho?

Arquivos .ttf empacotados vão para os assets. Subset de fontes de ícones e carregue fontes de exibição após o splash quando possível - Otimização do Tempo de Inicialização.

O bundle encolheu, mas o TTI não mudou - por quê?

TTI inclui inicialização nativa, carregamento de bytecode e trabalho da primeira tela - não apenas bytes JS. Perfis holísticos com Noções Básicas de Performance.

Relacionados

Otimização do Tempo de Inicialização - carregamento de bytecode e adiamento após a divisão
Noções Básicas de Performance - tamanho do bundle como uma entrada para TTI
Regras de Orçamento de Performance - limites de CI e proprietários
Grupos de Rotas e Organização do app - limites lazy de estrutura
Abas e Gavetas - montagem lazy de abas
Código Morto e Análise de Dependência - pacotes não utilizados vs. inchaço do bundle

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Análise de Tamanho do Bundle

Buscar na documentação

Análise de Tamanho do Bundle