jampack
1.0.0
__ __
|__|____ _____ ___________ ____ | | __
| __ / \____ __ _/ ___| |/ /
| |/ __ | Y Y |_> > __ \ ___| <
/__| (____ /__|_| / __(____ /___ >__|_
______| / /| | / / /
|__|
Оптимизирует статические веб-сайты для лучшего взаимодействия с пользователем и получения лучших показателей Core Web Vitals.
jampack ?Не комплектатор. Не рамки.
jampack — это инструмент постобработки, который берет выходные данные вашего генератора статических сайтов (также известных как SSG) и оптимизирует их для лучшего взаимодействия с пользователем и получения лучших показателей Core Web Vitals.
Прочтите вводную запись в блоге
jampack ?<img> < img src =" ./redpanda.jpg " alt =" Red panda " >становится отзывчивым с размерами:
< 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 >становится отзывчивым к нескольким форматам, включая 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 >Читать далее
< 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 "
/>становится
< 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 "
/>Читать далее
< 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 "
/>становится
< 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 "
/>Читать далее
jampack оптимизирует ресурсы в кратчайшие сроки ⬆️.
Ленивая загрузка ресурсов в нижней части страницы.
Читать далее
Избегайте ошибок при загрузке и анализе таблиц стилей. jampack встраивает критический CSS и лениво загружает остальную часть CSS.
Читать далее
Ускорьте будущую навигацию по страницам, предварительно загрузив ссылки на странице. Благодаря быстрой ссылке это можно делать динамически, когда ссылки попадают в область просмотра.
Читать далее
При втором проходе jampack сжимает все нетронутые ресурсы и сохраняет то же имя и тот же формат.
| Расширение | Компрессор |
|---|---|
.html , .htm | html-minifier-terser |
.css | lightningCSS |
.js | esbuild или swc |
.svg | svgo |
.jpg , .jpeg | sharp |
.png | sharp |
.webp | sharp |
.avif | sharp |
# Optimize static website in `dist` folder
npx @divriots/jampack ./distДополнительные параметры см. в разделе «Параметры CLI».
jampack используемый в дикой природеДобавьте сюда свой
jampack ?jam : Из Jamstack.pack : напоминает упаковщики исполняемых файлов 90-х годов. Это программное обеспечение распространяется на условиях лицензии MIT.
