jampack
1.0.0
__ __
|__|____ _____ ___________ ____ | | __
| __ / \____ __ _/ ___| |/ /
| |/ __ | Y Y |_> > __ \ ___| <
/__| (____ /__|_| / __(____ /___ >__|_
______| / /| | / / /
|__|
Optimiert statische Websites für beste Benutzererfahrung und beste Core Web Vitals-Ergebnisse.
jampack ?Kein Bundler. Kein Rahmen.
jampack ist ein Nachbearbeitungstool, das die Ausgabe Ihres Static Site Generators (auch SSG genannt) übernimmt und sie für die beste Benutzererfahrung und die besten Core Web Vitals-Scores optimiert.
Lesen Sie den Einführungs-Blogbeitrag
jampack ?<img> < img src =" ./redpanda.jpg " alt =" Red panda " >reagiert auf folgende Dimensionen:
< 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 >reagiert auf mehrere Formate, einschließlich 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 >Mehr lesen
< 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 "
/>wird
< 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 "
/>Mehr lesen
< 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 "
/>wird
< 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 "
/>Mehr lesen
jampack optimiert Assets „above-the-fold“ ⬆️.
Lazy-Load-Assets unterhalb der Falte.
Mehr lesen
Vermeiden Sie FOUC, während Stylesheets heruntergeladen und analysiert werden. jampack integriert kritisches CSS und lädt den Rest des CSS verzögert.
Mehr lesen
Beschleunigen Sie die zukünftige Seitennavigation, indem Sie die Links auf der Seite vorab abrufen. Dank Quicklink kann dies dynamisch erfolgen, wenn Links in das Ansichtsfenster gelangen.
Mehr lesen
In einem zweiten PASS komprimiert jampack alle unberührten Assets und behält denselben Namen und dasselbe Format bei.
| Verlängerung | Kompressor |
|---|---|
.html , .htm | html-minifier-terser |
.css | lightningCSS |
.js | esbuild oder swc |
.svg | svgo |
.jpg , .jpeg | sharp |
.png | sharp |
.webp | sharp |
.avif | sharp |
# Optimize static website in `dist` folder
npx @divriots/jampack ./distWeitere Optionen finden Sie unter CLI-Optionen.
jampack in freier Wildbahn verwendetFügen Sie Ihre hier hinzu
jampack ?jam : Von Jamstack.pack : Erinnert an die Executable Packers aus den 90ern. Diese Software wird unter den Bedingungen der MIT-Lizenz veröffentlicht.
