@divriots/jampack
v0.34.0TypeScript
Packer for static websites
0/weekUpdated 5 months agoMITUnpacked: 111.3 KB
Published by Georges Gomes @georges-gomes
npm install @divriots/jampack``
__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
|__|
Jampack
Optimizes static websites for best user experience and best Core Web Vitals scores.
Brought to you by
What is jampack?
> Not a bundler. Not a framework.
jampack is a post-processing tool that takes the output of your Static Site Generator (aka SSG) and optimizes it for best user experience and best Core Web Vitals scores.
Read the introduction blog post
What can jampack do?
$3
`html`
becomes responsive with dimensions:
`html`
srcset="
./redpanda.jpg.webp 3872w, ./redpanda@3572w.jpg.webp 3572w, ./redpanda@3272w.jpg.webp 3272w,
./redpanda@2972w.jpg.webp 2972w, ./redpanda@2672w.jpg.webp 2672w, ./redpanda@2372w.jpg.webp 2372w,
./redpanda@2072w.jpg.webp 2072w, ./redpanda@1772w.jpg.webp 1772w, ./redpanda@1472w.jpg.webp 1472w,
./redpanda@1172w.jpg.webp 1172w, ./redpanda@872w.jpg.webp 872w"
sizes="100vw"
loading="lazy"
decoding="async"
width="3872"
height="2592">
$3
`html`
becomes responsive with multiple formats including AVIF:
`html`
./redpanda@1336w.avif 1336w, ./redpanda@1036w.avif 1036w,
./redpanda@736w.avif 736w">
./redpanda@1336w.webp 1336w, ./redpanda@1036w.webp 1036w,
./redpanda@736w.webp 736w">
alt="Red panda"
loading="lazy"
decoding="async"
width="1936"
height="1296"
srcset="./redpanda.jpg 1936w, ./redpanda@1636w.jpg 1636w,
./redpanda@1336w.jpg 1336w, ./redpanda@1036w.jpg 1036w,
./redpanda@736w.jpg 736w"
sizes="100vw">
$3
`html`
alt="Clouds in the sky by Taylor Van Riper"
width="2848"
height="4272"
/>
becomes
`html`
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"
/>
$3
`html`
alt="Clouds in the sky by Taylor Van Riper"
/>
becomes
`html`
alt="Clouds in the sky by Taylor Van Riper"
loading="lazy"
decoding="async"
width="1287"
height="1931"
srcset="
_jampack/ab99b9d280ce4cf7cfc810b59f3a7739.jpg.webp 1287w,
_jampack/ab99b9d280ce4cf7cfc810b59f3a7739@987w.webp 987w,
_jampack/ab99b9d280ce4cf7cfc810b59f3a7739@687w.webp 687w
"
sizes="100vw"
/>
$3
jampack optimizes assets above-the-fold ⬆️.
- Images are loaded with higher priority.
- Small images are embedded in HTML.
Lazy-load assets below-the-fold ⬇️.
- Images and Iframes are lazy loaded.
Inline critical CSS
Avoid FOUC while stylesheets are downloaded and parsed.
jampack will inline critical CSS and lazy-load the rest of CSS.
Prefetch links
Speedup the future page navigations by prefetching the links on the page.
Thanks to quicklink, this can be done dynamically as links enter the viewport.
$3
In a 2nd PASS, jampack compresses all untouched assets and keep the same name and the same format.
| Extension | Compressor |
| --------------- | --------------------- |
| .html,.htm | html-minifier-terser | .css
| | lightningCSS |.js
| | esbuild or swc | .svg
| | svgo | .jpg
| ,.jpeg | sharp | .png
| | sharp | .webp
| | sharp | .avif
| | sharp |
$3
Quick use
`shdistOptimize static website in
folder`
npx @divriots/jampack ./dist
For more options see CLI options.
jampack used in the wild
- Powering all ‹div›RIOTS' websites
- keycloak.ch
- bayjs.org
- qwind.pages.dev
- Bloycey's Blog
- gxanshu.in
- cloudcannon.com
- groupsync.app
> Add yours here
Why is it called jampack?
- jam: From Jamstack.pack`: Reminescent of the Executable Packers from the 90s.
-
License
This software is released under the terms of the MIT license.