Descrição

Aplicar code spliting e imports dinâmicos para reduzir o tamanho do código criado pelo bundler com o comando npm run build.

Report gerado com o lighthouse para Google Chrome

Para comparar a utilização de imports dinâmicos entre páginas é preciso executar o lighthouse no servidor de desenvolvimento, visto que a página de criarItemAcervo só é acessível por usuários logados. Mas ainda não existe funcionalidade para login em produção.

Para verificar que o bundle de cada página é separado pode-se utilizar a dependência vite-bundle-analyser com o comando npx vite-bundle-visualizer

Atualmente, os componentes MUI utilizados somente na página de CriarItemAcervo são carregados também na HomePage

Resultado esperado

• Javascript para uma página só deve ser baixado ao acessá-la
• Métricas First Contentful Paint e Largest Contentful Paint devem possuir alguma melhoria, principalmente relativo ao main thread work

Tarefas

• Adicionar dependência vite-bundle-visualizer

• Realizar import dinâmico das páginas no BrowserRouter em App.tsx, Documentação React. Utilizar um CircularProgress centralizado do material como Fallback;

• Atualizar formato de import dos componentes MUI, Documentação

• Realizar lazy loading de componentes próprios, exemplo: ImageCard em CriarItemAcervo

Issues Necessárias

Nenhuma