jampack
1.0.0
__ __
|__|____ _____ ___________ ____ | | __
| __ / \____ __ _/ ___| |/ /
| |/ __ | Y Y |_> > __ \ ___| <
/__| (____ /__|_| / __(____ /___ >__|_
______| / /| | / / /
|__|
Otimiza sites estáticos para melhor experiência do usuário e melhores pontuações do Core Web Vitals.
jampack ?Não é um empacotador. Não é uma estrutura.
jampack é uma ferramenta de pós-processamento que pega a saída do seu Static Site Generator (também conhecido como SSG) e a otimiza para melhor experiência do usuário e melhores pontuações do Core Web Vitals.
Leia a postagem do blog de introdução
jampack pode fazer?<img> < img src =" ./redpanda.jpg " alt =" Red panda " >torna-se responsivo com dimensões:
< img src =" ./redpanda.jpg.webp " alt =" Red panda "
srcset ="
./redpanda.jpg.webp 3872w, ./[email protected] 3572w, ./[email protected] 3272w,
./[email protected] 2972w, ./[email protected] 2672w, ./[email protected] 2372w,
./[email protected] 2072w, ./[email protected] 1772w, ./[email protected] 1472w,
./[email protected] 1172w, ./[email protected] 872w "
sizes =" 100vw "
loading =" lazy "
decoding =" async "
width =" 3872 "
height =" 2592 " ><picture> < picture >
< img src =" ./redpanda.jpg " alt =" Red panda " >
</ picture >torna-se responsivo com vários formatos, incluindo AVIF:
< picture >
< source type =" image/avif "
srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w " >
< source type =" image/webp "
srcset =" ./[email protected] 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w " >
< img src =" ./redpanda.jpg "
alt =" Red panda "
loading =" lazy "
decoding =" async "
width =" 1936 "
height =" 1296 "
srcset =" ./redpanda.jpg 1936w, ./[email protected] 1636w,
./[email protected] 1336w, ./[email protected] 1036w,
./[email protected] 736w "
sizes =" 100vw " >
</ picture >Leia mais
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
alt =" Clouds in the sky by Taylor Van Riper "
width =" 2848 "
height =" 4272 "
/>torna-se
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D "
alt =" Clouds in the sky by Taylor Van Riper "
width =" 2848 "
height =" 4272 "
loading =" lazy "
decoding =" async "
srcset ="
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2848&fit=min&auto=format 2848w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2548&fit=min&auto=format 2548w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=2248&fit=min&auto=format 2248w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1948&fit=min&auto=format 1948w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1648&fit=min&auto=format 1648w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1348&fit=min&auto=format 1348w,
https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&w=1048&fit=min&auto=format 1048w
"
sizes =" 100vw "
/>Leia mais
< img
src =" https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=jpg&fit=crop&w=1287&q=80 "
alt =" Clouds in the sky by Taylor Van Riper "
/>torna-se
< img
src =" _jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp "
alt =" Clouds in the sky by Taylor Van Riper "
loading =" lazy "
decoding =" async "
width =" 1287 "
height =" 1931 "
srcset ="
_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp 1287w,
_jampack/[email protected] 987w,
_jampack/[email protected] 687w
"
sizes =" 100vw "
/>Leia mais
jampack otimiza ativos acima da dobra ⬆️.
Ativos de carregamento lento abaixo da dobra .
Leia mais
Evite FOUC enquanto as folhas de estilo são baixadas e analisadas. jampack irá incorporar CSS crítico e carregar lentamente o restante do CSS.
Leia mais
Acelere as navegações futuras nas páginas, buscando previamente os links na página. Graças ao quicklink, isso pode ser feito dinamicamente à medida que os links entram na janela de visualização.
Leia mais
Numa segunda passagem, jampack compacta todos os ativos intocados e mantém o mesmo nome e o mesmo formato.
| Extensão | Compressor |
|---|---|
.html , .htm | html-minifier-terser |
.css | lightningCSS |
.js | esbuild ou swc |
.svg | svgo |
.jpg , .jpeg | sharp |
.png | sharp |
.webp | sharp |
.avif | sharp |
# Optimize static website in `dist` folder
npx @divriots/jampack ./distPara obter mais opções, consulte opções CLI.
jampack usado na naturezaAdicione o seu aqui
jampack ?jam : Do Jamstack.pack : Reminiscente dos Executable Packers dos anos 90. Este software é lançado sob os termos da licença do MIT.
