jampack

     __                                    __    
    |__|____    _____ ___________    ____ |  | __
    |  __    /     \____ __   _/ ___|  |/ /
    |  |/ __ |  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 >

阅读更多

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&amp;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&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2848&amp;fit=min&amp;auto=format 2848w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2548&amp;fit=min&amp;auto=format 2548w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=2248&amp;fit=min&amp;auto=format 2248w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1948&amp;fit=min&amp;auto=format 1948w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1648&amp;fit=min&amp;auto=format 1648w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1348&amp;fit=min&amp;auto=format 1348w,
        https://images.unsplash.com/photo-1513002749550-c59d786b8e6c?ixlib=rb-4.0.3&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&amp;w=1048&amp;fit=min&amp;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优化首屏资源 ⬆️。

• 图像以更高的优先级加载。
• 小图像嵌入 HTML 中。

延迟加载首屏资源。

• 图像和 Iframe 是延迟加载的。

阅读更多

内联关键 CSS

下载和解析样式表时避免 FOUC。 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

• 为所有<div>RIOTS'网站提供支持
• 钥匙斗篷.ch
• bayjs.org
• qwind.pages.dev
• 布洛西的博客
• gxanshu.in
• 云炮网
• 群组同步应用程序

在这里添加您的

为什么叫jampack ？

• jam ：来自 Jamstack。
• pack ：让人想起 90 年代的可执行加壳程序。

执照

该软件是根据 MIT 许可条款发布的。