O que é jampack?
jampack não é um bundler nem um framework, e sim uma ferramenta de pós-processamento que otimiza a saída de geradores de sites estáticos (SSG) para melhorar a experiência do usuário e as pontuações de Core Web Vitals.
O que o jampack pode fazer?
- As imagens em tags
<img> são convertidas para versões responsivas que suportam várias resoluções, e recebem os atributos loading="lazy" e decoding="async" para melhorar o desempenho.
- São convertidas em imagens responsivas com vários formatos usando a tag
<picture>, com suporte também ao formato AVIF.
- Imagens de CDN são convertidas para versões responsivas, fornecendo imagens em várias resoluções por meio de
srcset.
- É possível baixar imagens externas e otimizá-las, salvando os arquivos de imagem otimizados dentro da pasta
_jampack.
- Imagens visíveis imediatamente na tela (above-the-fold) são carregadas com alta prioridade, enquanto imagens que aparecem ao rolar a página (below-the-fold) usam carregamento tardio.
CSS crítico inline
- Para evitar FOUC (Flash of Unstyled Content), que pode ocorrer enquanto a folha de estilo é baixada e analisada, o
jampack coloca o CSS crítico inline e carrega o restante do CSS de forma tardia.
Pré-busca de links
- Faz a pré-busca de links na página para melhorar a velocidade de navegação em páginas futuras. Graças ao quicklink, é possível fazer a pré-busca dinâmica de links que entram na viewport.
Compressão de todos os assets
- O
jampack comprime, em uma segunda passagem, todos os assets que não foram tocados, mantendo o mesmo nome e formato. Usa ferramentas de compressão específicas para diferentes extensões de arquivo.
E muitos outros recursos!
- O
jampack pode otimizar um site estático dentro da pasta dist com o comando npx @divriots/jampack ./dist.
Casos de uso do jampack
- O
jampack é usado em vários sites, como o site da ‹div›RIOTS, keycloak.ch e bayjs.org.
Origem do nome jampack
jam: derivado de Jamstack.pack: remete aos empacotadores de executáveis (Executable Packers) dos anos 90.
Licença
- Este software é disponibilizado sob os termos da licença MIT.
Opinião do GN⁺
- O
jampack pode ser uma ferramenta útil para engenheiros de software iniciantes com grande interesse em otimização de performance web. Em especial, parece ser útil para desenvolvedores que valorizam métricas de desempenho como Core Web Vitals.
- Além da otimização de imagens, a ferramenta oferece vários recursos de otimização web, como compressão de CSS e JavaScript, podendo reduzir o tempo de carregamento das páginas e melhorar a experiência do usuário.
- Sob uma visão crítica, o uso de ferramentas como o
jampack pode aumentar a complexidade do site e, se usado de forma incorreta, até causar problemas de desempenho. Por isso, testes e revisão suficientes são necessários antes de adotá-lo.
- Já existem muitas ferramentas para otimização de performance web, como Lighthouse, do Google, e WebPageTest. O
jampack pode ser usado junto com essas ferramentas para analisar e melhorar de forma abrangente o desempenho do site.
- Ao adotar o
jampack, é preciso definir uma estratégia de otimização considerando a estrutura do site e a stack de tecnologias utilizada. Além disso, embora o uso de uma ferramenta open source traga a vantagem do suporte da comunidade, também é preciso considerar a responsabilidade pela continuidade e manutenção do projeto.
1 comentários
Comentários do Hacker News
Este usuário menciona que encontrou exatamente o que procurava. Ele vinha fazendo otimização de imagens com um script próprio usando Sharp, mas depois de usar o Jampack isso deixou de ser necessário. Após gerar um site estático com Quarto e executar o Jampack, o tamanho da pasta caiu 32%, e até agora ele não percebeu desvantagens claras. Ele também compartilhou métricas de desempenho antes e depois de usar o Jampack com o PageSpeed Insights.
Outro usuário menciona que esse recurso o faz lembrar do módulo PageSpeed para Apache e Nginx.
Um usuário diz que gostou do Jampack e pretende usá-lo, e pergunta que defeitos as pessoas com opiniões críticas poderiam apontar. Para ele, o Jampack faz algo parecido com compilar código C em assembly otimizado, assumindo tarefas que ele pessoalmente não gostaria de fazer.
Outro usuário tem interesse na ideia de identificar CSS "crítico" e tratá-lo inline. Ele esperava que houvesse uma forma mais principiada de identificar o CSS não crítico, mas a biblioteca usada aparentemente renderiza a página e tenta detectar da melhor forma possível quais regras são importantes.
Um usuário diz que gostaria de ver uma forma de selecionar parcialmente fontes com base no intervalo Unicode da saída do SSG e fixar eixos OpenType de acordo com
font-feature-settingsdefinidos no CSS.Um usuário que acha o Jampack muito legal pergunta se seria possível criar um contêiner Docker para simplificar o uso para pessoas que têm receio de usar Node.js.
Um usuário que detesta layout de páginas web e se recusa a aprender, mas às vezes precisa lidar com isso, comenta que o Jampack parece excelente.
Há um usuário perguntando sobre geradores de sites estáticos usados em ambientes reais de produção. Ele acha que poderia otimizar ainda mais a saída usando esse tipo de ferramenta. Por exemplo, passou o dia todo tentando converter um site React do Divjoy em HTML simples que pudesse ser servido a partir de um bucket S3, mas teve dificuldades. Ele precisa de uma ferramenta que faça o deploy automaticamente para um bucket S3 e permita apontar um domínio.
Há um usuário comentando que o Jampack parece cobrir vários casos de uso que SSGs e seus plugins tentam resolver. Ele se pergunta por que escolher Astro ou Eleventy em vez de preferir uma etapa separada de pós-build. Pode haver um trade-off entre rebuilds rápidos durante o desenvolvimento e a possibilidade de deixar passar bugs sutis introduzidos por coisas como declarar a largura das imagens.
Um usuário expressa agradecimento às pessoas que enviam exemplos reais por e-mail. Ele diz ser muito grato por esse apoio.