---
sidebar_position: 10
title: "Otimização de Bundle"
---

Esta página resume as decisões de build que impactam carregamento e distribuição de código.

## Estratégia de chunking

```mermaid
graph TD
    ENTRY[**Entrada da aplicação**] --> INIT[**Chunk inicial**
interface + roteamento]
    ENTRY --> LAZY[**Lazy loading**
rotas e áreas pesadas]
    INIT --> CHUNKS[Chunks dedicados]
    CHUNKS --> B[blockly]
    CHUNKS --> P[phaser]
    CHUNKS --> C[codemirror]
    CHUNKS --> V[vendor genérico]
```

## Estratégias em uso

- Code splitting por grupos de dependência no build.
- Lazy loading de rotas e áreas pesadas.
- Separação de bibliotecas maiores em chunks dedicados.
- Otimização de imagens no pipeline.

Arquivos de referência:

- `app/vite.config.js`
- `app/src/App.jsx`

## Por que isso importa

Sem esse cuidado, o pacote inicial cresce rápido e piora o tempo de carregamento.
Com separação por chunk, o usuário baixa primeiro o necessário para abrir a interface e carrega o restante sob demanda.

## Práticas recomendadas para novas alterações

1. Evite adicionar dependência pesada sem avaliar impacto.
2. Prefira importação sob demanda para módulos de uso eventual.
3. Rode build local e inspecione tamanhos antes de merge.

Referências externas:

- Vite build guide: https://vite.dev/guide/build
- Rollup chunking: https://rollupjs.org/configuration-options/#output-manualchunks
- web.dev code splitting: https://web.dev/articles/reduce-javascript-payloads-with-code-splitting
