__ __
|__|____ _____ ___________ ____ | | __
| \__ \ / \\____ \__ \ _/ ___\| |/ /
| |/ __ \| Y Y \ |_> > __ \\ \___| <
/\__| (____ /__|_| / __(____ /\___ >__|_ \
\______| \/ \/| | \/ \/ \/
|__|
夹克
优化静态网站,以获得最佳用户体验和最佳Core Web Vitals分数.
带给你的
这是什么 jampack? 吗?
没有捆绑者。 不是一个框架.
jampack 是一个后处理工具,它占用您的输出 静态场地发电机(Aka SSG) 并优化它 最好的用户经验和最佳 核心网络维度 分数.
还有什么 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>
CDN 图像变得响应
<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"
/>
上至下层( B)
jampack 优化上下级的资产.
- 图像以更高的优先级加载.
- 小图像被嵌入到HTML中.
懒人资产低于... ...
- 图像和Iframes 懒得装入.
内部关键CSS
避免 团结基金 而样式表则被下载并解析.
jampack 将内置关键CSS 并懒惰地装入CSS的其余部分.
前置链接
通过预取页面链接来加快未来的页面导航. 感谢 快速链接,可以在链接输入视图端口时动态完成.
所有资产都已压缩
在第二个PASS, 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 在野外使用过
- 给所有人提供动力 迪维特斯网站
- 键盘cloak.ch
- bayjs.org (英语)
- qwind.pages.dev (中文(简体) )
- 布洛伊西的博客
- gxanshu.in (英语)
- (原始内容存档于2017-10-21). youtcannon.com
- 组同步.app
这里加你的
为什么它叫 jampack? 吗?
许可证
本软件按照以下条款发布: 麻省理工学院许可证。 。 。 .