jampack
1.0.0
__ __
|__|____ _____ ___________ ____ | | __
| __ / \____ __ _/ ___| |/ /
| |/ __ | Y Y |_> > __ \ ___| <
/__| (____ /__|_| / __(____ /___ >__|_
______| / /| | / / /
|__|
Optimiza los sitios web estáticos para obtener la mejor experiencia de usuario y las mejores puntuaciones de Core Web Vitals.
jampack ?No es un paquete. No es un marco.
jampack es una herramienta de posprocesamiento que toma el resultado de su Generador de sitios estáticos (también conocido como SSG) y lo optimiza para obtener la mejor experiencia de usuario y las mejores puntuaciones de Core Web Vitals.
Lea la publicación del blog de introducción
jampack ?<img> < img src =" ./redpanda.jpg " alt =" Red panda " >se vuelve responsivo con dimensiones:
< 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 >se vuelve responsivo con múltiples formatos, incluido 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 >Leer más
< 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 "
/>se convierte
< 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 "
/>Leer más
< 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 "
/>se convierte
< 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 "
/>Leer más
jampack optimiza los recursos en la mitad superior de la página ⬆️.
Carga diferida de activos en la mitad inferior de la página.
Leer más
Evite FOUC mientras se descargan y analizan las hojas de estilo. jampack incorporará CSS crítico y cargará de forma diferida el resto de CSS.
Leer más
Acelere las navegaciones futuras de la página precargando los enlaces en la página. Gracias al enlace rápido, esto se puede hacer dinámicamente a medida que los enlaces ingresan a la ventana gráfica.
Leer más
En un segundo PASO, jampack comprime todos los recursos intactos y mantiene el mismo nombre y el mismo formato.
| Extensión | Compresor |
|---|---|
.html , .htm | html-minifier-terser |
.css | lightningCSS |
.js | esbuild o swc |
.svg | svgo |
.jpg , .jpeg | sharp |
.png | sharp |
.webp | sharp |
.avif | sharp |
# Optimize static website in `dist` folder
npx @divriots/jampack ./distPara obtener más opciones, consulte Opciones de CLI.
jampack usado en la naturalezaAñade el tuyo aquí
jampack ?jam : De Jamstack.pack : Con reminiscencias de los Executable Packers de los años 90. Este software se publica bajo los términos de la licencia MIT.
