🎨
ChatGPT intermediate

Como testar bundle optimization em Frontend

Prompt gerado automaticamente para Bundle optimization em Frontend

1 usos Frontend

Prompt completo

"Você é um engenheiro de performance sênior. Sua tarefa é criar um guia prático e acionável para desenvolvedores frontend que trabalham com grandes aplicações web. O foco é otimizar o tempo de carregamento inicial e a interatividade da página, especificamente através da melhoria da estratégia de 'bundle splitting' e 'lazy loading' em um projeto React/Next.js.

O guia deve abordar os seguintes pontos:

1.  **Identificação de gargalos:** Como analisar um bundle gerado (usando ferramentas como Webpack Bundle Analyzer) para identificar módulos grandes e subutilizados que podem ser candidatos à separação.
2.  **Estratégias de 'bundle splitting':**
    *   **Por rota:** Como dividir o bundle com base nas rotas da aplicação, garantindo que o código de uma rota só seja carregado quando o usuário a acessa.
    *   **Por componente:** Como implementar 'lazy loading' para componentes que não são críticos para o render inicial, como modais, abas não ativas, ou seções abaixo da dobra.
    *   **Por biblioteca externa:** Como separar bibliotecas grandes (ex: Lodash, Moment.js, Chart.js) em seus próprios chunks, aproveitando o cache do navegador.
    *   **Otimização de dependências comuns:** Como configurar o Webpack para criar um chunk compartilhado para módulos que são usados em múltiplos bundles, evitando duplicação.
3.  **Implementação prática com React/Next.js:**
    *   Exemplos de código usando `React.lazy()` e `Suspense`.
    *   Exemplos de código usando `next/dynamic` para 'lazy loading' no Next.js.
    *   Configurações comuns do `next.config.js` relacionadas à otimização de bundles.
4.  **Considerações sobre 'loading states' e UX:** Como gerenciar os estados de carregamento (placeholders, spinners) para proporcionar uma experiência de usuário fluida enquanto os chunks são baixados.
5.  **Validação e monitoramento:** Como medir o impacto das otimizações (Core Web Vitals, Lighthouse) e monitorar o tamanho dos bundles ao longo do tempo em um pipeline de CI/CD.

O tom deve ser técnico, mas didático, com exemplos de código claros e explica

Tags relacionadas

Frontend Bundle optimization gerado-automaticamente

Como usar este prompt

1

Clique no botão "Copiar" para copiar o prompt para sua área de transferência

2

Acesse sua ferramenta de IA preferida (ChatGPT, ChatGPT, Claude, etc.)

3

Cole o prompt e adapte conforme necessário para seu contexto específico