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
Outros prompts de Frontend
ChatGPT
Melhores práticas de performance e otimização para Frontend
Prompt gerado automaticamente para Performance e otimização em Frontend
5 usos
ChatGPT
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
6 usos
ChatGPT
Melhores práticas de debugging e troubleshooting para Frontend
Prompt gerado automaticamente para Debugging e troubleshooting em Frontend
4 usos